Встраиваемый виджет

Добавьте чат-виджет Flow на любую страницу одним тегом <script>. Виджет монтируется в изолированный Shadow DOM, поэтому его стили не конфликтуют с сайтом.

Быстрый старт

Скопируйте сниппет в разделе Настройки → Виджет (он уже содержит публичный токен вашего воркфлоу) и вставьте перед </body>:

<script
  src="https://app.example.com/widget/flow-widget.js"
  data-token="<public_token>"
  data-mode="bubble"
  async
></script>

Цвета, заголовок, лаунчер, позиция и язык берутся из серверной конфигурации воркфлоу; любой атрибут data-* переопределяет серверное значение. Используйте data-mode="inline" вместе с data-target="#some-id", чтобы отрисовать чат внутри элемента, а не в плавающем пузыре.

Идентификация пользователя

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

Передайте статически через data-user-jwt:

<script
  src="https://app.example.com/widget/flow-widget.js"
  data-token="<public_token>"
  data-user-jwt="<JWT пользователя>"
  async
></script>

…или вызовите flowWidget.identify(jwt) в рантайме. Используйте shim с очередью команд, чтобы это работало даже до загрузки бандла:

<script>
  window.flowWidget = window.flowWidget || { _q: [] };
  flowWidget.identify = flowWidget.identify
    || function () { (flowWidget._idq = flowWidget._idq || []).push(arguments); };

  flowWidget.identify("<JWT пользователя, подписанный секретом встраивания>");
</script>

Вызов браузерного JS из воркфлоу

Воркфлоу может вызывать JavaScript, выполняемый на вашей странице (прочитать корзину, подсветить элемент, открыть модальное окно). Объявляйте функции через flowWidget.defineFunction; обработчик остаётся в браузере, воркфлоу каждый ход получает только форму {name, description, parameters}.

<script>
  window.flowWidget = window.flowWidget || { _q: [] };
  flowWidget.defineFunction = flowWidget.defineFunction
    || function () { flowWidget._q.push(arguments); };

  flowWidget.defineFunction({
    name: "get_cart_total",
    description: "Возвращает текущую сумму корзины",
    parameters: { type: "object", properties: {} },
    handler: async () => ({ total: window.cart.total }),
  });
</script>

Когда воркфлоу вызывает get_cart_total, виджет запускает ваш обработчик и возвращает результат — синхронный round-trip, по которому воркфлоу может ветвиться.

Совет: каждый запуск изолирован и оплачивается по тарифу владельца воркфлоу.