Flowtomate

Установка виджета на сайт ​

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

html
<script async
  src="https://app.flowtomate.ru/widget/v1/widget.js"
  data-flowtomate-key="pub_live_REPLACE_WITH_YOUR_KEY"
  data-flowtomate-api="https://api.flowtomate.ru"></script>

Замените пример ключа на ключ проекта. Он публичный: его можно размещать в HTML. Пароль и токен кабинета туда не добавляйте. На каждой странице должен быть один тег виджета. Если сайт меняет страницы без перезагрузки, не вставляйте скрипт заново на каждом переходе.

Порядок загрузки ​

Тег с async загружается независимо от кода сайта. Вызывайте window.FlowtomateWidget после события загрузки скрипта, затем дождитесь await window.FlowtomateWidget.ready(). В GTM используйте тег Custom HTML с триггером All Pages и тем же кодом. Проверьте, что другой тег или шаблон не вставляет дубликат.

В React и Next.js добавьте скрипт один раз в браузере. Для Next.js используйте клиентский компонент:

tsx
'use client';

import { useEffect } from 'react';

export function FlowtomateScript() {
  useEffect(() => {
    if (document.querySelector('script[data-flowtomate-key]')) return;
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://app.flowtomate.ru/widget/v1/widget.js';
    script.dataset.flowtomateKey = 'pub_live_REPLACE_WITH_YOUR_KEY';
    script.dataset.flowtomateApi = 'https://api.flowtomate.ru';
    document.body.append(script);
  }, []);
  return null;
}

Подключите компонент один раз в общем layout. Вызовы API делайте после загрузки скрипта.

Для обычной HTML-страницы можно сохранить порядок двух скриптов через defer:

html
<script defer src="https://app.flowtomate.ru/widget/v1/widget.js"
  data-flowtomate-key="pub_live_REPLACE_WITH_YOUR_KEY"
  data-flowtomate-api="https://api.flowtomate.ru"></script>
<script defer src="/flowtomate-integration.js"></script>

Второй файл создаёт ваш разработчик. Браузер выполнит его после скрипта виджета. Перед методами, которым нужен загруженный контент, вызовите await window.FlowtomateWidget.ready(). Полный пример передачи ID, email и событий есть в основной инструкции. Для команд до загрузки есть ранняя очередь.

Своя кнопка ​

В «Настройки виджета» → «Вид виджета» выберите «Своя кнопка». Добавьте атрибут к кнопке или пункту меню на сайте:

html
<button type="button" data-flowtomate-open>Что нового</button>

Виджет найдёт и элементы, добавленные после загрузки страницы. Если он выключен или посетителю нечего показать, панель не откроется.

Если сайт использует CSP ​

Добавьте источники виджета в действующую Content Security Policy сайта. Текущая версия создаёт стили в документе, поэтому ей нужен 'unsafe-inline' в style-src:

text
script-src 'self' https://app.flowtomate.ru;
connect-src 'self' https://api.flowtomate.ru;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
media-src 'self' https:;

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

Проверка ​

Откройте сайт и DevTools → Network. Убедитесь, что widget.js загрузился, запрос настроек не заблокирован CSP или CORS, а window.FlowtomateWidget появился. Выполните await window.FlowtomateWidget.ready(). Затем вернитесь в «Интеграция виджета»: там должен появиться адрес сайта и время последнего запроса. ready() сам по себе не доказывает, что контент и данные посетителя загрузились; проверяйте нужный результат отдельно. Если что-то не сработало, откройте диагностику.