Установка виджета Нотифлоу на любой сайт

Как выглядит код установки виджета

Код одинаковый независимо от того, на чем собран сайт: Tilda, WordPress, Bitrix, самописный движок или конструктор без названия. Это один блок с тегом script:

<script>
    (function(w,d,s,o,f,js,fjs){
        w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','nw','https://cp.notiflow.ru/js/widget.js'));
    nw('init', {apiKey:'ВАШ_КЛЮЧ'});
</script>

Копировать API-ключ отдельно не нужно — в коде, который выдает кабинет, он уже подставлен вместо плейсхолдера. Достаточно взять готовый блок целиком и вставить его на сайт без правок.

Где в кабинете взять свой код установки

Код формируется в разделе «Настройки → Сайт и установка». Там же, на одной странице, собраны три вещи сразу: сам код для вставки, поле для добавления домена и кнопка проверки. Если вы уже устанавливали виджет Нотифлоу на другой сайт, обратите внимание — ключ в коде общий для всего аккаунта, и об этом отдельно ниже.

Куда вставлять тег script на странице

Тег можно разместить в двух местах: внутри head или непосредственно перед закрывающим тегом body. Разница на практике почти не ощущается, потому что скрипт загружается асинхронно (атрибут async) и не блокирует отрисовку остальной страницы. Выбирайте вариант, который проще технически внедрить в вашу систему шаблонов.

После вставки страницу нужно переопубликовать или пересохранить — многие конструкторы держат отдельную «черновую» и «боевую» версии сайта, и код, добавленный в черновик, на живом адресе не появится, пока изменения не опубликованы.

Для Tilda и WordPress есть отдельные пошаговые инструкции с учетом особенностей этих платформ — если вы работаете именно с ними, удобнее заглянуть в инструкцию по установке на Tilda или в инструкцию по установке на WordPress.

Как добавить домен в кабинете

Домен добавляется в том же разделе «Настройки → Сайт и установка». В поле вводится адрес без http:// и без пути — то есть просто company.ru, а не https://company.ru/catalog. Префикс www кабинет отрезает автоматически, так что писать его отдельно не требуется. Поддерживаются и кириллические домены — они принимаются в формате punycode.

Подтверждать владение доменом не нужно: никаких файлов на сервер загружать не придется, DNS-записи менять тоже. Первый добавленный домен становится активным сразу после сохранения.

Один и тот же API-ключ работает для всех доменов аккаунта — если у компании несколько сайтов, ключ переносить и менять не нужно, меняется только список доменов в кабинете.

Сколько доменов можно подключить на разных тарифах

Число доменов ограничено тарифом. На «Старте» доступен один домен, на «Команде» — три, на «Бизнесе» — десять, на «Масштабе» ограничений нет. Если попытаться добавить домен сверх лимита, кабинет вернет ошибку «достигнут лимит доменов» и добавление не пройдет.

Подробнее лимиты и условия тарифов описаны в материале про лимиты тарифа и в обзоре тарифов Нотифлоу. Актуальные цены и состав тарифов можно посмотреть на странице тарифов.

Как проверить, что виджет установлен правильно

На странице «Настройки → Сайт и установка» есть кнопка «Проверить» — она отправляет запрос на ваш сайт и через несколько секунд показывает результат. Это самый быстрый способ убедиться, что все настроено верно, не открывая сайт вручную.

Кроме ручной проверки, кабинет раз в час автоматически проверяет все активные домены. При такой проверке система смотрит на три вещи: есть ли на странице тег script с адресом https://cp.notiflow.ru/js/widget.js, вызывается ли функция nw('init', ...) и совпадает ли переданный в ней ключ с ключом вашего аккаунта.

Есть и третий механизм — флаг установки ставится автоматически, как только виджет реально загрузился в браузере у живого посетителя сайта. Это дает почти мгновенное подтверждение без ожидания часовой проверки.

Работает ли виджет на одностраничных сайтах

Да, виджет корректно ведет себя на SPA-сайтах, построенных на React, Vue или похожих технологиях. Он отслеживает переходы между разделами через history.pushState, history.replaceState, а также кнопки «назад» и «вперед» браузера. При каждом таком переходе правила показа виджета — на какой странице он должен появиться, а на какой скрыться — перепроверяются заново, без перезагрузки всей страницы.

Для владельца сайта это означает, что отдельно настраивать виджет под каждый экран приложения не требуется: один тег script в общем шаблоне покрывает все маршруты.

Почему виджет не появляется на сайте

Чаще всего причина одна из трех, и все три легко проверить самостоятельно. Первая — страница не была переопубликована после того, как код вставили в редактор: черновик сохранился, а боевая версия сайта осталась старой. Вторая — домен, указанный в кабинете, не совпадает с реальным адресом сайта: например, в кабинете указан company.ru, а сайт открывается по www.company.ru или по поддомену shop.company.ru. Третья причина — блокировщик рекламы в браузере посетителя: некоторые расширения режут запросы к адресам вида cp.notiflow.ru, принимая их за рекламный трекер.

Если после проверки по всем трем пунктам виджет все равно не появился, откройте консоль разработчика в браузере на живой странице сайта — там будет видно, дошел ли запрос к скрипту и что ответил сервер. Живой чат поддержки Нотифлоу поможет разобрать конкретный случай, если проблема не решается самостоятельно.

Часто задаваемые вопросы