Виджет — чат-кнопка на сайте, через которую посетитель может написать в онлайн-чат (а при желании — ещё и в подключённые мессенджеры). Ниже — как собрать базовый виджет именно с онлайн-чатом и установить его на сайт. У виджета есть и другие настройки (мессенджеры на обложке, приглашения по поведению посетителя, чат-меню, данные с сайта) — в статье они не разбираются подробно, здесь только необходимый минимум.
Шаг 1. Создайте виджет
Перейдите в Маркетинг → Лидогенерация → Виджет, нажмите «Добавить виджет» и укажите название.
Шаг 2. Включите онлайн-чат
Откройте вкладку «Общие» → «Компоненты виджета». Здесь три блока, которые показываются на обложке виджета, каждый со своим переключателем:
- Приветственное сообщение — заголовок и текст на обложке;
- Онлайн-чат — кнопка перехода в чат (то, что нужно для базового сценария);
- Мессенджеры и другие каналы — список подключённых мессенджеров на обложке.
Для базового виджета достаточно оставить включённым «Онлайн-чат» (он включён по умолчанию), а блок с мессенджерами можно выключить, если посетитель должен писать только в онлайн-чат, без перехода во внешние мессенджеры.
Шаг 3. Настройте внешний вид
На вкладке «Настройки виджета»:
- в блоке «Оформление» задайте заголовок, дополнительный текст, цвет виджета и логотип;
- в блоке «Приветствие» — текст приветствия и подзаголовок, которые посетитель увидит на обложке;
- в блоке «Кнопка перехода в чат» — название кнопки, которая открывает онлайн-чат с обложки (например, «Написать сообщение»).
В блоках «Кнопка виджета» и «Кнопка на мобильном» можно отдельно настроить стиль, анимацию, положение и размер свёрнутой кнопки — для базового виджета эти настройки можно оставить по умолчанию.
Шаг 4. Настройте сценарий онлайн-чата
Откройте вкладку «Онлайн-чат» → «Начало диалога». Здесь задаётся, что увидит посетитель сразу после открытия чата:
- сценарий по умолчанию — например, «Показать приветственное сообщение»;
- текст сообщения;
- до трёх быстрых ответов — каждый привязан к своему сценарию чат-бота. Кнопка без указанного текста просто не показывается, поэтому можно настроить и один быстрый ответ, и все три.
Шаг 5. Установите виджет на сайт
На вкладке «Общие» → «Скрипт для сайта» скопируйте готовый код — адрес скрипта в нём уже подставлен для вашего виджета — и вставьте его перед закрывающим тегом </body> на всех страницах сайта.
<script async src="https://cdn.fstrk.io/widget3-cdn/10e75574-5f5e-40c4-915c-79c47bbab493.js"></script>Там же есть отдельный «Код для WebView мобильного приложения» — с его помощью, можно встроить виджет в WebView собственного приложения (чат тогда открывается сразу на весь экран, без обложки и кнопки закрытия). Для обычной установки на сайт он не нужен.
JavaScript API
После установки виджетом можно управлять прямо со страницы сайта: скрывать и открывать его по своей кнопке, передавать данные о посетителе, менять оформление и текст на отдельных страницах, запускать сообщения и приглашения через код. Всё это делается через объект window.fasttrack — его свойства и методы.
Весь JS API с рабочими сценариями и комментариями смотрите на соответствующей странице настроек виджета (вкладка «JavaScript API» в карточке вашего виджета).
Итог
Базовый виджет с онлайн-чатом собирается так: создали виджет → оставили включённым компонент «Онлайн-чат» (мессенджеры при желании выключили) → настроили оформление, приветствие и текст кнопки → задали, что посетитель увидит при открытии чата (сообщение + быстрые ответы на сценарии бота) → скопировали <script>-тег со вкладки «Скрипт для сайта» и вставили его перед </body> на сайте. Расширенные возможности — мессенджеры на обложке, чат-меню, приглашения по поведению посетителя, данные из cookies/localStorage сайта и JavaScript API — настраиваются отдельно, по мере необходимости.