Главная · Блог · Онлайн-чат для сайта: виджет за 5 минут
Онлайн-чат для сайта: виджет за 5 минут
Онлайн-чат на сайте нужен не ради «поболтать»: посетитель задаёт вопрос, пока ему интересно, и уходит, если ответа нет. Виджет ЧБТ — это тот же бот, что работает в Telegram, MAX и VK, только на вашей странице: сценарий отвечает мгновенно, человек подключается, когда нужно, а контакт сохраняется, даже если вы спали. Ниже — как поставить его за пять минут и что включить, чтобы заявки не терялись.
Шаг 1. Создать виджет и получить код вставки
Зарегистрируйтесь на app.chbt.io, создайте бота (на Бесплатном тарифе — один) и откройте в меню проекта раздел «Виджет». Если канал ещё не создан, будет одна кнопка — «Создать виджет». Нажали — у канала появился ключ, а внизу страницы блок «Код вставки»:
<script src="https://app.chbt.io/w.js" data-key="ВАШ_КЛЮЧ" data-color="#6366f1" data-title="Чат" data-position="right"></script>Одна строка перед закрывающим </body>. На Tilda, WordPress и Битриксе она вставляется через штатную настройку «свой HTML-код для всех страниц», на самописном сайте — прямо в шаблон; отличий в коде для разных платформ нет. Хостинг и сервер не нужны: скрипт грузится с app.chbt.io, а диалоги идут через защищённое соединение в ваш кабинет.
Виджет изолирован от вёрстки страницы: стили сайта не ломают окно чата, а окно чата не трогает ваш сайт — можно ставить на любую тему без правок CSS. Цвет, заголовок и положение (справа или слева) задаются в настройках и подхватываются автоматически — код на сайте переписывать не придётся.
Шаг 2. Настроить внешний вид и приветствие
В блоке «Внешний вид» четыре поля: заголовок окна, позиция, цвет кнопки и имя агента. Имя и аватар — это то, что посетитель увидит в шапке чата: «Анна» с фотографией доверия вызывает больше, чем безликий «Чат». Ссылку на аватар можно взять с вашего же сайта.
Приветствие — первое сообщение, которое появляется при открытии окна. Не пишите «Здравствуйте, чем можем помочь?»: это ничего не сообщает. Лучше сразу обозначить, что здесь можно сделать: «Подскажу по ценам и срокам, запишу на замер. Напишите вопрос или нажмите кнопку». Кнопки и ветки настраиваются уже в сценарии — в разделе «Сценарии» есть отдельный триггер «Открытие виджета», который срабатывает, как только человек развернул чат, ещё до первого сообщения.
На Бесплатном тарифе в окне будет подпись «ЧБТ». На Базовом и Бизнесе она снимается флажком — код вставки при этом обновится сам (параметр data-brand).
Шаг 3. Pre-chat форма или кнопка «Оставить контакты»
Есть два способа получить контакт из виджета, и их не стоит включать одновременно.
Pre-chat форма («Спрашивать контакты до начала диалога») показывает поля до первого сообщения. Для каждого из трёх полей — имя, email, телефон — есть галочка «обязательное». Это жёсткий вариант: часть посетителей закроет окно, не заполнив форму. Он оправдан для B2B и услуг с длинным циклом, где вопрос без контакта не имеет смысла.
Кнопка «Оставить контакты» в чате (блок «Сбор контактов», включена по умолчанию) — мягкий вариант: сначала разговор, потом форма, когда человек сам решил. Что бы он ни ввёл, ЧБТ проверит формат: email должен быть похож на email, в телефоне должно быть хотя бы несколько цифр, и нужен минимум один из двух. Валидный контакт попадает в раздел «Контакты» с тегом «виджет-лид», а в CRM появится карточка «Лид с сайта — Имя» в колонке «Новый». Дубли не создаются: повторная отправка с той же сессии обновит контакт, а не заведёт вторую сделку.
Совет: для интернет-магазина или доставки оставьте только кнопку, а сбор телефона переложите на сценарий — блок «Сбор данных» с проверкой «Телефон» спросит номер в нужный момент диалога, а не на входе.
Шаг 4. Передача оператору и статус «онлайн»
Бот закрывает типовое, но вопрос «а можно скидку, если возьму три?» должен дойти до человека. Для этого в сценарии есть блок «Оператор» (категория «Действия»). Поставьте его в ветку «Позвать человека» и на кнопку «Другой вопрос» после FAQ. Что происходит при срабатывании:
- диалог получает статус «Оператор» и появляется в разделе «Диалоги» на вкладке «Ждут ответа»;
- всем, у кого открыт кабинет, приходит уведомление; если включены push в браузере (раздел «Аккаунт → Уведомления»), оно придёт и при закрытой вкладке;
- бот молчит и не мешает переписке, пока оператор не нажмёт «Вернуть боту» — тогда сценарий продолжится;
- оператор видит, что посетитель печатает, а посетитель — что печатает оператор.
Индикатор «онлайн» в шапке виджета — честный: он горит, пока у кого-то из команды открыт кабинет ЧБТ. Как только все вышли, статус меняется. Не нужно вручную «уходить с линии» — виджет сам понимает, есть ли кто-то на месте.
Шаг 5. Рабочие часы и оффлайн-сообщение
Ночью чат не должен молчать, но и обещать «ответим через минуту» нельзя. Включите в блоке «Рабочие часы» флажок «Показывать оффлайн-сообщение вне рабочих часов» и напишите текст: «Мы офлайн до 10:00. Оставьте вопрос и телефон — перезвоним утром». Этот текст заменит стандартное «обычно отвечаем быстро», пока в кабинете никого нет.
Сам сценарий при этом продолжает работать: бот отвечает на кнопки, собирает контакт, раскладывает заявки по CRM. Если в оффлайне диалог дошёл до блока «Оператор», он просто дождётся утра в «Диалогах» — ничего не теряется. Более тонкое поведение по времени суток настраивается условием «Время» в сценарии: об этом подробнее в статье про автоответчик, приём одинаковый для всех каналов.
Файлы: скриншоты, договоры, макеты
Рядом с полем ввода в виджете есть скрепка. Посетитель может прислать изображение (JPG, PNG, GIF, WebP), PDF, документ Word или Excel, текстовый файл или ZIP — до 10 МБ. Файл появляется у оператора в «Диалогах» с превью для картинок и ссылкой для остальных. Оператор тоже может отправить файл из кабинета: прайс, договор, схему проезда.
Для сервисных бизнесов это часто главный аргумент за виджет: «пришлите фото поломки» работает в чате куда лучше, чем «отправьте на почту».
Проактивные сообщения — осторожно
Блок «Проактивные сообщения» в настройках виджета позволяет боту заговорить первым: виджет сам предложит помощь в нужный момент, а не ждёт, пока посетитель найдёт кнопку. Правила собираются визуально — кнопка «+ Добавить правило» открывает форму из пяти частей:
- Когда — сразу, через N секунд на странице, при прокрутке до N %, после N секунд бездействия или при уходе с сайта (курсор двинулся к верхней границе окна; это правило работает только на десктопе).
- Где — на всех страницах либо только там, где URL содержит, начинается с или равен заданному значению (несколько вариантов через
|); отдельным полем — страницы-исключения, например корзина и оформление заказа. - Устройства — все, только десктоп или только мобильные.
- Действие — «пузырь» с текстом рядом с кнопкой чата, который не мешает читать страницу, или сразу открыть чат с сообщением. К тексту можно добавить до трёх быстрых ответов: клик отправляет текст кнопки как сообщение и открывает диалог.
- Как часто — раз за визит, раз в N дней или каждый раз. Сверх этого виджет сам держит паузу: не чаще одного показа в 30 секунд, не больше трёх за просмотр страницы, и молчит, если чат уже открыт или посетитель написал сам.
Чтобы не собирать правила с нуля, рядом лежат три готовых: «Помощь через 20 секунд», «Уходите? Оставьте вопрос» (уход с сайта, раз в 7 дней) и «На странице с ценами» (через 5 секунд на страницах с /price или /pricing). Каждый пресет — обычное правило, тексты в нём можно переписать под себя. Для тех, кто привык к конфигам, под списком есть «Продвинутое: JSON», но для типовых задач он не нужен.
Рабочий минимум — одно правило-пузырь на странице цен: «Подобрать тариф под ваш объём?». Открывать чат на каждой странице через 5 секунд не стоит: это раздражает и бьёт по конверсии сильнее, чем помогает. Второе разумное правило — «уход с сайта» с открытием чата и предложением оставить вопрос: оно срабатывает один раз и только на десктопе, поэтому почти не бывает лишним.
Что входит в бесплатный тариф и когда его хватит
Запрос «чат на сайт бесплатно» обычно означает одно из двух: либо «навсегда бесплатно для маленького сайта», либо «бесплатно попробовать, а потом решим». Бесплатный тариф ЧБТ закрывает оба сценария, но с понятными границами — лучше знать их до установки, чем обнаружить на 31-м диалоге.
Что доступно на Бесплатном без ограничений по функциям. Весь виджет целиком: внешний вид, приветствие, pre-chat форма и кнопка «Оставить контакты», рабочие часы с оффлайн-сообщением, файлы в обе стороны, проактивные сообщения, список разрешённых доменов, JS API. Сценарий в режиме «Шаги» со всеми блоками — «Сообщение», «Сбор данных», «Условие», «Оператор». Разделы «Диалоги», «Контакты» с выгрузкой CSV и «CRM». Уведомления на почту и push в браузере. Плюс остальные каналы того же бота — Telegram, MAX и ВКонтакте — в одном проекте.
Где проходят границы.
- Подпись «ЧБТ» в окне чата. Снимается только на Базовом и выше.
- 30 диалогов в месяц. Диалог — это уникальный посетитель, написавший в чат хотя бы одно сообщение за календарный месяц. Считается по проекту целиком, вместе с Telegram и MAX, если они подключены. Когда лимит исчерпан, с посетителями, которые уже писали в этом месяце, переписка продолжается как обычно, а новым бот вместо сценария отвечает коротким сообщением о лимите, и их сообщения в «Диалоги» не попадают, — до первого числа следующего месяца, когда счётчик обнулится, или до перехода на платный тариф. Счётчик «N из 30» — на странице «Обзор» бота.
- Один оператор. Кабинет открывает владелец аккаунта; пригласить второго человека в «Доступ» на Бесплатном нельзя. Для одного менеджера или самого владельца бизнеса этого достаточно, для смены из трёх человек — нет.
- Без ИИ-агента и рассылок, редактор — только «Шаги» без визуального «Холста». Для виджета с кнопочным сценарием и передачей оператору эти функции не нужны.
Когда Бесплатного хватает надолго. Сайт услуг с пятью-двадцатью обращениями в месяц: стоматология в небольшом городе, юрист, ремонт техники, локальный B2B. Лендинг, где чат нужен как запасной путь к заявке рядом с формой. Сезонный проект на два месяца. Проверка гипотезы «а пишут ли вообще в чат» — за один месяц вы увидите реальное число обращений, и решение о тарифе станет очевидным. Сколько людей написали боту, показывает счётчик «N из 30» (он общий для всех каналов проекта). Строка «Виджет на сайте» в блоке «По каналам» раздела «Аналитика» считает шире: в её диалоги за 30 дней входят и те, кто открыл окно чата, но ничего не написал.
Когда лимит закончится к десятому числу. Интернет-магазин или доставка с живым трафиком, сайт с несколькими тысячами посетителей в день, любая ситуация, где в чат пишут три и больше новых человека в день. Здесь Бесплатный тариф — только на первые дни для настройки. Базовый за 650 ₽ за бота в месяц снимает лимит диалогов и подпись, открывает команду операторов, «Холст», рассылки и ИИ-агента — если вопросы однотипные, он возьмёт первую линию, как описано в статье про ИИ-консультанта на сайте. Переход занимает минуту в разделе «Оплата», код виджета на сайте менять не нужно.
Что проверить перед запуском
- Откройте сайт с телефона или из браузера, где вы не входили в кабинет, и напишите в чат — сообщение должно появиться в «Диалогах».
- Нажмите «Оставить контакты» с тестовым email — проверьте карточку в CRM и письмо о новой заявке (включается в «Аккаунт → Уведомления»).
- Дойдите до блока «Оператор» и ответьте из кабинета — ответ должен прийти в виджет.
- Закройте кабинет и убедитесь, что в шапке виджета показалось оффлайн-сообщение.
Бесплатный тариф даёт 30 диалогов в месяц на один бот — этого хватает, чтобы понять, сколько вопросов на самом деле приходит с сайта. Дальше Базовый снимает лимиты и подпись. Тот же сценарий, что отвечает на сайте, подключается к Telegram и MAX — достаточно вставить токен бота в разделе «Каналы»; заявки со всех каналов будут в одних «Диалогах» и одной CRM.
Шаблон «Поддержка»Шаблон «Автоответчик FAQ»Тарифы