Вы собрали бота для Telegram: он отвечает на вопросы, принимает заявки, ведёт по меню. Но часть аудитории живёт не в мессенджере, а у вас на сайте — человек читает страницу, у него возник вопрос, и уходить ради него в Telegram он не станет. Он просто закроет вкладку. Теперь для этого ничего не теряется: тот же самый бот умеет жить кнопкой в углу вашего сайта. Один и тот же сценарий — и в мессенджере, и на странице. Подключается одной строкой кода, без программиста и дизайнера. Разберём, что это за виджет, как его включить и где у него честные границы.
Что нового: тот же бот — теперь и на сайте
Раньше бот в tabi жил в Telegram и VK. Появилась третья площадка — веб-виджет: плавающая кнопка чата, которую можно поставить на любую страницу вашего сайта. Ключевое слово — тот же. Вы не собираете отдельного «бота для сайта»: на вебе работает ровно та же схема из блоков, что и в мессенджере. Под капотом веб — это просто ещё один канал для вашего сценария, наравне с Telegram и VK. Нарисовали граф один раз — он отвечает везде.
Для посетителя это выглядит привычно, как онлайн-консультант, только вместо оператора отвечает ваш бот: мгновенно, круглосуточно и по вашему сценарию. Человеку не нужно ничего устанавливать, регистрироваться или уходить в мессенджер — он пишет прямо на странице, где уже находится.
Как это выглядит у посетителя
В углу страницы появляется небольшая круглая кнопка с иконкой чата. Клик — и разворачивается аккуратное окно диалога с заголовком (имя вашего бота) и приветствием. Дальше это полноценный чат вашего бота:
- Текст, кнопки и меню. Inline-кнопки под сообщением и кнопки-меню внизу работают так же, как в Telegram: нажал — пошёл по нужной ветке.
- Медиа. Бот шлёт картинки и файлы, а посетитель может прикрепить свой файл (скрепка 📎) — например, приложить фото или документ к заявке.
- Живые ответы. Пока бот думает, видно «печатает…»; ответы прилетают сразу, без перезагрузки страницы. Если вкладка была свёрнута, на кнопке загорается счётчик непрочитанных.
- Телефон. На мобильном окно раскрывается на весь экран, чтобы в маленьком чате было удобно.
Виджет живёт в изолированном слое страницы (Shadow DOM) со своим шрифтом — поэтому он не ломает вёрстку сайта и стили сайта не ломают его. Внизу окна — ненавязчивая подпись «Сделано в TabiChat».
Как включить — по шагам
Всё делается в панели бота, кода писать не нужно.
Шаг 1. Опубликуйте бота. Веб-чат оживает сразу после публикации сценария — тот же граф, который вы уже отправили в Telegram, поедет и в виджет.
Шаг 2. Включите веб-виджет. В карточке бота откройте вкладку «Платформы» и нажмите «Включить веб-виджет». Появится готовый код для вставки.
Шаг 3. Скопируйте одну строку. Конструктор уже подставил в неё адрес и id вашего бота — ничего править не надо, жмёте «Скопировать код»:
<script src="https://tabi.chat/widget/bot-widget.js"
data-bot-id="ВАШ-ID-БОТА" async></script>Шаг 4. Вставьте на сайт. Добавьте эту строку перед закрывающим тегом </body> на любой странице сайта, обновите страницу — и кнопка чата появится в углу. На конструкторах сайтов (Tilda, Битрикс, WordPress и т. п.) для этого есть поле «вставить свой код / HTML». Одна строка — на все страницы, где нужен чат.
Настройка под ваш сайт
Тут же, на вкладке «Платформы», виджет подгоняется под ваш бренд — без перевыпуска кода, все настройки подхватываются сами при следующей загрузке страницы:
- Заголовок чата — имя, которое видит посетитель в шапке окна.
- Приветствие в пустом чате — первая фраза, когда диалог ещё не начат.
- Подсказка в поле ввода — серый текст-плейсхолдер в строке сообщения.
- Акцентный цвет — цвет кнопки и элементов чата (по умолчанию фирменный лаймовый — поставьте свой, под палитру сайта).
- Позиция на странице — в каком углу висит кнопка (снизу справа или слева).
В той же карточке видно, сколько человек сейчас онлайн в веб-чате, и небольшая воронка: сколько людей открыли чат, написали, дошли до цели. Удобно понимать, работает ли виджет на конкретной странице.
Тот же сценарий — ничего не переделывать
Стоит повторить, потому что это и есть главная мысль: отдельный бот для сайта не нужен. Всё, что вы уже собрали, работает и в виджете — блоки «Сообщение» с кнопками и меню, ветвления, «Ввод текста» и формы, отправка медиа, а также умные блоки — ИИ-ответ и RAG-поиск по вашим документам. Загрузили в базу знаний прайс — бот отвечает по нему и в Telegram, и на сайте одинаково. Добавили новую ветку в схему, опубликовали — она сразу появилась на всех площадках.
Честные границы
Чтобы не было завышенных ожиданий — где у веб-виджета рамки:
- Массовые рассылки — по-прежнему только Telegram и VK. Веб-виджет — это живой диалог здесь и сейчас на странице, а не канал, куда можно разослать акцию всей базе. Хотите догревать рассылками — собирайте аудиторию в мессенджерах.
- Проверка подписки на канал (популярный приём «подпишись, чтобы получить») на вебе не применяется — у посетителя сайта нет вашего Telegram-канала под рукой.
- Умные блоки расходуют баланс. ИИ-ответ и RAG тратят кредиты бота — и в мессенджере, и на сайте одинаково. Это платный ресурс, а не безлимит.
Проще говоря: веб-виджет отлично закрывает диалог с человеком, который уже пришёл на сайт — заявку, вопрос, консультацию, подбор. А массовая работа с базой остаётся в мессенджерах. Вместе это и даёт омниканальность: поймали на сайте — продолжили в Telegram.
Зачем это вам
Один собранный сценарий теперь встречает клиента там, где он есть: пришёл из поиска на сайт — ответил виджет; написал в Telegram — ответил тот же бот; нашёл вас в VK — снова он. Вы не дублируете логику под каждую площадку и не теряете человека, которому лень переходить в мессенджер за ответом. Меньше брошенных вкладок — больше заявок и вопросов, доведённых до конца.
Соберите бота один раз — пусть отвечает во всех каналах сразу. Виджет включается на вкладке «Платформы» одной кнопкой, а на сайт добавляется одной строкой кода — без программиста.
Если у вас уже есть бот в tabi — зайдите в его карточку, откройте «Платформы» и включите веб-виджет: код вставки будет готов через минуту. Если бота ещё нет, соберите простой сценарий заявки или FAQ в конструкторе и поставьте его на сайт первым — это самый быстрый способ увидеть, как виджет ловит вопросы посетителей.