Как установить онлайн-чат на сайт: код виджета, CMS и конструкторы

Вопрос «как установить онлайн-чат на сайт» звучит технически, но на практике это одна из самых простых доработок, которые можно сделать своими руками. Почти все современные виджеты подключаются одной строкой кода, а разница между платформами сводится к тому, в какое поле эту строку вставить. Ниже — универсальная инструкция: как устроен код виджета, куда его ставить, как это сделать на HTML-сайте, в CMS, в конструкторе и через Google Tag Manager, и как убедиться, что всё работает.

Как устроен виджет чата: одна строка кода

Виджет онлайн-чата — это небольшой скрипт, который загружается вместе со страницей и рисует в углу кнопку. По нажатию открывается окно переписки, а сообщения уходят на сервер сервиса и попадают к операторам.

Сам скрипт хранится у сервиса, на ваш сайт вставляется только ссылка на него и ключ, по которому сервис понимает, чей это сайт. Например, код ChatDeck выглядит так:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

Здесь важны три вещи:

• src — адрес скрипта. Его не нужно скачивать к себе: обновления виджета приходят автоматически.
• Ключ (data-chatdeck-key) — публичный ключ вашего аккаунта. Он не секретный, его видно в коде страницы любому посетителю, и это нормально.
• async — скрипт грузится параллельно со страницей и не задерживает её отображение.

Где взять код: после регистрации он находится в настройках личного кабинета, в блоке установки виджета. Скопируйте его целиком, без изменений.

Куда вставлять код: head или перед закрывающим body

Классическая рекомендация — вставлять сторонние скрипты перед закрывающим тегом </body>, чтобы они не мешали загрузке основного содержимого. Но если у скрипта стоит атрибут async, разница почти исчезает: браузер не ждёт его и продолжает рисовать страницу.

Виджет ChatDeck работает в обоих местах — и внутри <head>, и перед </body>. Это важно для конструкторов: многие из них дают только одно общее поле «код в head», и другого варианта у вас просто нет.

Главное правило — код должен попасть на все страницы, где нужен чат. Поэтому вставляют его не в отдельную страницу, а в общий шаблон или в общие настройки сайта.

Установка на HTML-сайт

Если сайт написан вручную или на собственном движке, порядок такой:

1. Найдите общий шаблон, который подключается на всех страницах. Часто это header.php, footer.php, layout или base.html.
2. Вставьте код виджета перед </body> (или внутрь <head>) и сохраните файл.
3. Если страницы — отдельные HTML-файлы без общего шаблона, добавьте код в каждый файл.
4. Обновите страницу сайта в браузере — кнопка чата появится в углу.

Подробная инструкция — на странице установки на свой сайт.

Установка в CMS и конструкторах: общий принцип

В любой CMS и любом конструкторе есть место для пользовательского кода. Называется оно по-разному: «Вставка кода», «HTML-код для вставки внутрь HEAD», «Пользовательский HTML», «Свой код», «Счётчики и скрипты». Логика всегда одинаковая:

1. Откройте настройки сайта (не отдельной страницы).
2. Найдите поле для кода в head или в конце body.
3. Вставьте код виджета и сохраните.
4. Если платформа требует, переопубликуйте сайт.

Несколько нюансов, на которых чаще всего спотыкаются:

• Тариф. На некоторых конструкторах вставка своего кода доступна только на платных тарифах. Например, на Tilda нужен тариф Personal или Business.
• Публикация. В конструкторах код появляется на сайте только после повторной публикации страниц. Сохранить настройки недостаточно.
• Кэш. В CMS с кэширующими плагинами после установки нужно очистить кэш, иначе посетители ещё какое-то время будут видеть старую версию страниц.
• Готовые модули. Для популярных CMS бывают отдельные модули: код вставлять не нужно, достаточно указать ключ в настройках. Для ChatDeck есть модуль для 1С-Битрикс и плагин для WordPress — они ещё и передают оператору имя и email авторизованных пользователей.

Пошаговые инструкции для 26 платформ — Tilda, WordPress, 1С-Битрикс, Битрикс24.Сайты, Wix, InSales, OpenCart, Joomla, MODX и других — собраны в разделе интеграций. Отдельно мы подробно разобрали установку чата на Tilda.

Установка через Google Tag Manager

Если на сайте уже стоит Google Tag Manager, чат удобно подключить через него, не трогая шаблоны:

1. «Теги» → «Создать» → тип «Пользовательский HTML».
2. Вставьте код виджета. Опцию «Поддержка document.write» не включайте.
3. Триггер — «All Pages» (все страницы), затем «Сохранить».
4. «Отправить» → «Опубликовать».

Этот способ выручает на платформах, где HTML-блоки не принимают скрипты, а GTM подключается встроенным блоком. Подробнее — в статье про онлайн-чат через Google Tag Manager.

Как проверить, что чат работает

Установку стоит проверить сразу, пока вы помните, что именно меняли. Простой чек-лист:

1. Откройте сайт в окне инкогнито — так вы исключите кэш браузера и собственную авторизацию.
2. Убедитесь, что кнопка чата появилась в нужном углу на нескольких страницах, включая мобильную версию.
3. Напишите тестовое сообщение от имени посетителя.
4. Откройте рабочее место оператора и проверьте, что сообщение пришло, а ответ вернулся в виджет.
5. Если первым отвечает ИИ-ассистент, проверьте, что он корректно передаёт диалог человеку.

Совет: пусть тестовое сообщение напишет коллега со своего телефона. Так вы заодно проверите уведомления операторов.

Частые ошибки при установке

• Код вставлен в одну страницу, а не в общий шаблон. Чат есть на главной и пропадает в каталоге.
• Не переопубликован сайт в конструкторе. В редакторе всё сохранено, а на живом сайте кода нет.
• Код искажён при копировании. Текстовые редакторы и мессенджеры иногда заменяют прямые кавычки на «ёлочки». Копируйте код прямо из личного кабинета.
• Код вставлен в визуальный блок текста, который экранирует теги. Нужен именно блок или поле для HTML-кода.
• Код вставлен дважды — например, и в шаблон, и через GTM. Оставьте один способ.
• Не очищен кэш CMS или CDN.

Частые вопросы

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

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

Можно ли поставить чат только на некоторые страницы?

Да. Вставьте код не в общий шаблон, а только в нужные страницы — во многих конструкторах для этого есть HTML-блок на странице. В Google Tag Manager вместо триггера «All Pages» можно настроить триггер по адресу страницы.

Влияет ли виджет на скорость загрузки?

Скрипт с атрибутом async загружается параллельно и не блокирует отрисовку страницы. Виджет ChatDeck к тому же работает в изолированном Shadow DOM и не ломает стили сайта.

Что делать, если чат не отображается?

Проверьте по порядку: опубликован ли сайт после вставки кода, очищен ли кэш, попал ли код в исходный код страницы (поиск по слову widget.js в «Просмотре кода страницы»), не изменились ли кавычки в коде, не блокирует ли скрипт расширение-блокировщик в вашем браузере.

Итог

Установка чата — это одна строка кода в общем шаблоне или поле для HTML и короткая проверка. Если хотите попробовать на своём сайте, зарегистрируйтесь в ChatDeck: код появится в настройках сразу после регистрации, а инструкции для вашей платформы есть в разделе интеграций. Весь путь со скриншотами — в уроке «Установка чата на сайт», а посмотреть чат в работе до установки поможет урок «Попробуйте чат до установки».