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

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

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

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

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

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

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

У каждого способа есть свой сниппет — небольшой кусок кода, который вставляют в код сайта. Если сайт ведёт кто-то другой, просто отправьте сниппет ему.

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

В блоке JavaScript-виджет нажмите Скопировать JS-сниппет. Вставьте код на свой сайт перед закрывающим тегом </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-сниппет нужна, когда чат должен стоять внутри страницы — например, на странице поддержки, — а не висеть поверх неё:

<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-уведомления. Заголовок и описание страницы задаются на той же вкладке.

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

• Светлая, тёмная или автоматическая тема
• Акцентный цвет, цвета сообщений посетителя и бота, цвет или картинка фона чата
• Аватар бота и Иконка страницы (favicon) — маленькая картинка на вкладке браузера
• Ширина popup-виджета для кнопки в углу и Ширина встроенного чата для iframe и отдельной страницы
• Скругление углов

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

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

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

По умолчанию виджет загружается с домена FlowCastle. Чтобы он открывался с вашего поддомена (подписи в этом блоке в интерфейсе пока на английском):

1. На вкладке Установка введите адрес в поле Hostname — например chat.example.com.
2. Нажмите Connect custom domain. FlowCastle покажет DNS-запись, которую нужно создать.
3. Там, где вы управляете доменом (у регистратора или DNS-провайдера), создайте эту запись. Это запись CNAME — настройка, которая направляет ваш поддомен на FlowCastle.
4. Вернитесь в FlowCastle и нажмите Verify DNS and TLS. TLS — это сертификат безопасности, благодаря которому работает https://.

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

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

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

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

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

Прежде чем вести на виджет настоящих посетителей, прогоните сценарий через тест и опубликуйте его: Тест и публикация бота