Как подключить чат на сайт
Технически это одна строка кода. Всё остальное время уходит на то, чтобы чат отвечал по делу, а не «здравствуйте, чем могу помочь».
Шаг 1. Решите, зачем вам чат
Звучит как отговорка, но это главное решение. Чат бывает трёх видов, и от вида зависит всё остальное:
- Кнопка «позовите человека». Просто быстрая связь. Работает, пока есть кому отвечать.
- Чат со сценариями. Меню из кнопок: «цены», «доставка», «где вы находитесь». Дёшево, но клиент упирается в первый же вопрос не из списка.
- Чат, который знает ваш бизнес. Отвечает своими словами по вашим ценам и условиям, а сложное передаёт человеку.
Дальше — про третий, потому что первые два ставятся за пять минут и не требуют инструкции. Чем эти виды отличаются по стоимости владения, разобрано в статье про виды чат-ботов.
Шаг 2. Поставьте код на сайт
Строка выглядит так и живёт перед закрывающим тегом </body>:
<script src="https://app.agent604.ru/widget.js" data-a604="ваш-ключ" defer></script>
Куда её вставить:
| Сайт | Где вставлять |
|---|---|
| Тильда | Настройки сайта → Ещё → HTML-код для вставки внутрь body |
| WordPress | Внешний вид → Редактор темы → footer.php, либо плагин вставки кода |
| Битрикс | Настройки → Настройки продукта → Сайты → шаблон сайта, конец footer |
| Свой сайт | Общий шаблон страницы, перед </body> |
Проверка: откройте сайт в новом окне — виджет должен появиться в правом нижнем углу за секунду-две.
Шаг 3. Дайте чату знания
Тут проходит граница между «поставил и он бесполезен» и «поставил и он работает».
Чату нужно знать ваши цены, услуги, города, условия. Есть два пути: писать это руками в редакторе базы знаний или дать адрес сайта, чтобы он прочитал страницы сам. Второй быстрее и не расходится с сайтом: обход повторяется по расписанию, обновлённый прайс подхватывается сам.
Шаг 4. Скажите, чего делать нельзя
Второй по важности шаг после знаний. Чату нужно объяснить, где он должен замолчать и позвать человека:
- вопросы про конкретный заказ или бронь,
- скидки и торг,
- жалобы и возвраты,
- всё, что требует посмотреть в календарь или в базу.
Хороший чат в такой момент честно говорит: «Уточню у коллеги, ответим здесь же». Плохой придумывает срок доставки, которого у вас нет, и вы узнаёте об этом от клиента.
Шаг 5. Проверьте на телефоне
Больше половины посетителей приходят с телефона. Проверьте своими руками:
- Виджет не перекрывает кнопку «Заказать» и не наезжает на номер телефона.
- Клавиатура не закрывает поле ввода.
- Чат не открывается сам через две секунды после захода — это раздражает сильнее, чем помогает.
Если сайт собран в конструкторе, пути вставки описаны отдельно: Тильда, WordPress, Битрикс.
Шаг 6. Первую неделю читайте переписки
Читайте целиком, все подряд. Метрики подождут. За неделю вы увидите настоящие вопросы своих клиентов, а не те, которые предполагали. Обычно после этого в базу знаний добавляют три-четыре абзаца, и качество ответов заметно меняется.
Дальше можно смотреть на цифры: сколько диалогов закрыл ИИ сам, сколько ушло человеку, где именно он звал на помощь.
Частые ошибки
- Поставили и забыли. Чат без знаний — это форма обратной связи с лишними шагами.
- Запретили звать человека. Клиенту, который третий раз переформулирует вопрос, нужен живой сотрудник, а не ещё одна вежливая фраза.
- Приветствие во весь экран. Всплывающее окно на пол-страницы на телефоне закрывают, не читая.
- Ночь и выходные никто не проверил. Именно тогда чат приносит больше всего пользы — и именно тогда обычно выясняется, что уведомления никому не приходят.
Поставить чат бесплатно — пятьдесят диалогов без карты.
Частые вопросы
Замедлит ли чат загрузку сайта?
Скрипт грузится с атрибутом defer и весит около десяти килобайт, поэтому страница отрисовывается раньше, чем появляется виджет. На показатели скорости в PageSpeed это не влияет.
Что делать, если сайт на конструкторе?
В Тильде, Битриксе, WordPress и большинстве CMS есть поле «код в подвале сайта» или «сторонние скрипты» — строка вставляется туда, править шаблон не нужно.
Нужен ли программист?
Нет, если у вас есть доступ в админку сайта. Программист нужен, только когда сайт собран вручную и вы не знаете, где лежит шаблон.
Читайте дальше
- Чат для Joomla: шаблон или модульДва способа поставить чат на Joomla: правка шаблона и модуль HTML-кода. Почему редактор вы…
- Чат для OpenCart: установка без правки движкаКуда вставить код чата в OpenCart — через поле аналитики или footer.twig, что делать с кэш…
- Чат для InSales: куда вставить код и что проверитьКак добавить чат на магазин InSales: вставка кода в бэк-офисе, работа с темами на Liquid, …
- Чат на лендинге: зачем нужен, как установить и не терять трафикКлик из рекламы стоит денег, а посетитель уходит с вопросом о цене. Зачем лендингу чат, ку…