Установка Нотифлоу на Tilda: 2 способа за 5 минут
Нотифлоу ставится на сайт Tilda за 5 минут — либо через HTML-блок T123 на отдельной странице, либо через вставку в <head> для всех страниц сразу. Второй способ требует тариф Tilda Personal (от 500 ₽/мес) или Business — на бесплатном тарифе доступа к HEAD нет, остается только T123 блок постранично. Скрипт весит около 35 КБ в gzip и грузится асинхронно, на PageSpeed влияния почти нет.
Что нужно перед установкой?
Зарегистрируйте проект в Нотифлоу, добавьте домен сайта в «Настройки → Домены». Если домен еще не подключен к Tilda, сначала пройдите настройку домена — без верификации виджет не запустится.
Скопируйте код установки в кабинете: «Подписка → Установка виджета». Это блок <script>...</script> с уже подставленным API-ключом. Его и будем вставлять в Tilda.
Способ 1: вставка через блок T123 (HTML-код)
Подходит для бесплатного тарифа Tilda и для случая, когда чат нужен на одной-двух страницах.
- Откройте страницу в Tilda → «Все блоки» → раздел «Другое» → блок T123 «HTML-код»
- Вставьте блок в самый низ страницы, после футера
- Нажмите «Контент» → вставьте скопированный из Нотифлоу
<script>целиком - «Сохранить и закрыть» → «Опубликовать страницу»
- Откройте опубликованный URL — через 2-3 секунды в правом нижнем углу появится иконка чата
Блок T123 не виден на самой странице (он невидимый контейнер для кода), поэтому не сдвигает верстку. Если виджет не появился — откройте DevTools, во вкладке Console смотрите ошибки. Часто виновата опечатка в apiKey.
Способ 2: вставка в HEAD сайта (для всех страниц сразу)
Подходит для тарифов Personal и Business — дает чат на всех страницах без правки каждой по отдельности.
- В Tilda откройте «Настройки сайта» → «Еще» → раздел HTML-код для вставки внутри HEAD
- Вставьте
<script>от Нотифлоу - «Сохранить» → «Переопубликовать все страницы»
После переопубликации виджет загрузится на главной, на всех внутренних, в каталоге и на «спасибо»-странице. Это правильный способ для боевого сайта — не забудете добавить чат на новую страницу.
В блок «HTML-код перед </body>» класть скрипт не обязательно. Нотифлоу loader сам грузится async, поэтому HEAD не блокирует рендер.
Как проверить, что виджет работает?
Откройте сайт во вкладке «инкогнито» (на основной вкладке может закэшироваться старая версия). В правом нижнем углу через 1-3 секунды появляется кнопка чата. Кликните — откроется окно. Напишите тест-сообщение — оно должно прийти в раздел «Диалоги» в кабинете Нотифлоу.
Если виджет видно, но сообщения не приходят — проверьте, что домен в кабинете Нотифлоу совпадает с реальным (включая www. или его отсутствие). Несовпадение — частая причина «виджет рендерится, но не работает».
Что делать, если виджет не появился?
Проверьте по очереди:
- Опубликована ли страница после вставки кода. Tilda кэширует версии — после правки нужно «Переопубликовать»
- Совпадает ли домен в Нотифлоу с реальным URL сайта
- Не блокирует ли AdBlock или uBlock запросы к
cp.notiflow.ru(отключите расширения и обновите страницу) - Нет ли в Tilda Settings → Site SEO галочки «Disable cookies and trackers» — она ломает все внешние скрипты
В DevTools Console при ошибке загрузки будет сообщение Failed to load resource: cp.notiflow.ru/js/widget.js. Если оно есть — проблема на стороне сети или AdBlock. Если ошибки нет, но виджет не виден — копайте в apiKey и в API-ключах.
Установка на бесплатном тарифе Tilda — что важно знать
Free-тариф Tilda не дает доступа к HEAD сайта. Доступен только блок T123 на каждой странице по отдельности. Это значит:
- На каждой странице, где нужен чат, ставьте отдельный T123
- На страницах без T123 чат не появится
- Неудобно для каталога с десятком страниц — но работает
Альтернатива: перейти на тариф Personal (500 ₽/мес) — тогда установка занимает 1 шаг и работает на всем сайте. Сравнение тарифов Tilda — на их сайте.
Как ускорить загрузку: ленивая инициализация
По умолчанию скрипт Нотифлоу грузится async через 200-500 мс после загрузки страницы. Это уже легкий вариант. Но если ваш сайт оптимизирован под идеальный PageSpeed, можно отложить загрузку до первого взаимодействия пользователя:
<script>
function loadНотифлоу() {
if (window.nwLoaded) return;
window.nwLoaded = true;
window.nw = window.nw || function(){(window.nw.q=window.nw.q||[]).push(arguments)};
var s = document.createElement('script');
s.src = 'https://cp.notiflow.ru/js/widget.js';
s.async = true;
s.onload = function() {
nw('init', { apiKey: 'YOUR_API_KEY_UUID' });
};
document.head.appendChild(s);
}
['scroll', 'mousemove', 'touchstart', 'click'].forEach(function(evt) {
window.addEventListener(evt, loadНотифлоу, { once: true, passive: true });
});
setTimeout(loadНотифлоу, 8000);
</script>
Чат подгрузится при первом скролле / движении мыши / клике или через 8 секунд (страховка для тех, кто читает без действий). LCP сайта остается нетронутым. Подробнее про оптимизацию — в статье онлайн-чат WordPress без замедления, приемы те же.
Совместимость с Tilda Members и Zero Block
Tilda Members (закрытые разделы для подписчиков) работает с Нотифлоу без проблем. Если хотите идентифицировать вошедшего пользователя — после авторизации Tilda пробрасывает email в JS. Передайте его в nw('identify'):
<script>
if (window.t_member_email) {
nw('identify', window.t_member_email, {
email: window.t_member_email
});
}
</script>
Zero Block — конструктор с абсолютным позиционированием. С чатом конфликтов нет, виджет крепится к окну браузера, а не к Zero Block-сетке.
Часто задаваемые вопросы
Можно ли поставить чат на бесплатный Tilda?
Да, через блок T123 «HTML-код» постранично. Доступ к <head> на бесплатном тарифе закрыт — для одной установки на весь сайт нужен Personal или Business.
Почему чат не отображается?
Чаще всего — страница не переопубликована после вставки кода, или домен в Нотифлоу не совпадает с реальным URL. Откройте DevTools Console и проверьте ошибки. AdBlock тоже может резать.
Как поставить чат сразу на все страницы?
На тарифе Personal и выше — через «Настройки сайта → Еще → HTML-код для вставки внутри HEAD». На бесплатном — только постранично через T123.
Замедляет ли Нотифлоу загрузку Tilda?
Скрипт весит 35 КБ в gzip и грузится async — LCP не страдает. Для перфекционистов есть прием с отложенной загрузкой до первого взаимодействия (см. раздел выше) — тогда влияние на PageSpeed нулевое.
Можно ли скрыть чат на отдельных страницах?
Да, через таргетирование в кабинете Нотифлоу. В настройках виджета задайте правило «не показывать на URL, начинающихся с /landing-promo» — на этих страницах виджет не запустится. Подробнее — в статье таргетирование виджетов.
Поставьте Нотифлоу на Tilda за 5 минут — зарегистрируйтесь и скопируйте код установки. Дальше пригодятся статьи чат для Tilda за 5 минут и установка на WordPress. Подробнее о виджете — на странице чата.