Чат-виджет на вашем сайте

Guide

1. 1

   Шаг 1. Создайте бота для сайта

   Откройте приложение, добавьте бота и выберите платформу Чат на сайте.

   В отличие от Telegram, здесь нечего запрашивать и нечего вставлять: нет шага с BotFather, нет токена, нет модерации. Бот существует сразу после создания.

   При создании можно задать имя, которое видно в шапке виджета, и приветствие — оно отправится само, когда чат откроют впервые. И то и другое потом меняется.

2. 2

   Шаг 2. Откройте вкладку «Установка»

   Зайдите в настройки бота и откройте вкладку Установка. Она есть только у ботов для сайта.

   Здесь три готовых способа установки и несколько настроек, которые стоит заполнить заранее:

   • Отображаемое имя — имя в шапке виджета
   • Приветственное сообщение — отправляется автоматически при первом открытии чата
   • Уведомление — закрываемая плашка под шапкой; отдельно настраивается, показывать её один раз или по разу на каждом новом устройстве
   • Текст для «Поделиться» — подставляется, когда ссылку на чат кому-то отправляют
   • Переключатель: открывать чат самому при новом сообщении от бота или только показывать значок непрочитанного
3. 3

   Шаг 3. Выберите, как чат появится на сайте

   Вариант А — кнопка в углу (подходит большинству)

   Скопируйте сниппет JavaScript-виджет и вставьте его перед закрывающим тегом </body>. Выглядит он так:

   <script>
     (function() {
       var s = document.createElement('script');
       s.src = 'https://dashboard.flowcastle.ai/webchat-widget.js';
       s.setAttribute('data-bot-api-key', 'YOUR_BOT_API_KEY');
       s.setAttribute('data-api-base-url', 'https://dashboard.flowcastle.ai');
       document.head.appendChild(s);
     })();
   </script>
   

   На каждой странице, где стоит сниппет, появится кнопка чата в правом нижнем углу.

   Копируйте сниппет из вкладки «Установка», а не с этой страницы. В настоящем уже подставлен ключ вашего бота, а если вы подключили свой домен — он ведёт на ваш домен, а не на наш.

   Вариант Б — встроенный блок

   Сниппет с iframe нужен, когда чат должен стоять внутри страницы — например, на странице поддержки, — а не висеть поверх неё:

   <iframe
     src="https://dashboard.flowcastle.ai/webchat/YOUR_BOT_API_KEY?embedded=1"
     style="width:480px;height:600px;border:none;"
     allow="notifications"
   ></iframe>
   

   Ширина в сниппете берётся из настройки ширины встроенного чата на вкладке Оформление (360, 480, 600, 800 пикселей или во всю ширину) — сначала задайте её, потом копируйте сниппет.

   Вариант В — отдельная страница

   У каждого бота для сайта есть свой полноэкранный адрес. Устанавливать ничего не нужно: ведите на него ссылкой из письма, с кнопки или по QR-коду.

   Эту страницу можно установить как приложение — посетитель оставит её на домашнем экране телефона и будет получать push-уведомления. Заголовок и описание страницы задаются на той же вкладке.

4. 4

   Шаг 4. Приведите виджет к виду вашего сайта

   Откройте вкладку Оформление. Настраиваются:

   • Светлая, тёмная или автоматическая тема
   • Акцентный цвет, цвета сообщений посетителя и бота, цвет или картинка фона чата
   • Аватар бота и favicon
   • Ширина всплывающего окна и ширина встроенного чата для iframe
   • Радиус скругления

   Изменения применяются к живому виджету — заново вставлять сниппет не нужно.

5. 5

   Шаг 5. Проверьте

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

   Проверьте, что приходит приветствие, работают кнопки, а передача человеку открывает диалог у вас во входящих.

6. 6

   По желанию: свой домен

   По умолчанию виджет загружается с домена FlowCastle. Чтобы он отдавался с вашего поддомена, укажите имя хоста — например chat.example.com — на вкладке Установка, создайте показанную CNAME-запись и нажмите кнопку проверки DNS и TLS.

   Два важных момента:

   • Только поддомены. Корневой домен вида example.com использовать нельзя.
   • Выпуск DNS и сертификата может занять до 24 часов, хотя обычно проходит гораздо быстрее. Текущий статус показывает та же кнопка проверки.

   У бота может быть один свой домен; новый заменяет предыдущий.

7. 7

   Чем это отличается от Telegram

   • Оплата в чате на сайте не работает. Шаг сценария с оплатой действует в Telegram, но не в виджете. Ведите посетителей сайта в вашу обычную оплату.
   • Кнопки Telegram Mini App виджет игнорирует.
   • Положение кнопки чата фиксировано — правый нижний угол.
   • Посетители могут присылать фото и файлы до 50 МБ.
8. 8

   Что почитать дальше

   На странице Чат-виджет для сайта описано, как один сценарий обслуживает и Telegram, и сайт. Если сам сценарий ещё не собран, начните с Создайте первого Telegram-бота за 10 минут.