Добавить чат на сайт проще, чем кажется. Если сервис выбран правильно, вся установка занимает 10–15 минут и не требует разработчика. В этой инструкции разберём каждый шаг — от выбора инструмента до первого тестового сообщения.
Шаг 1: Выбрать сервис чата
Прежде чем копировать код, стоит определиться с инструментом. Ключевые параметры выбора: поддерживаемые каналы (только сайт или ещё WhatsApp и Telegram), наличие AI-возможностей, единый inbox для команды и цена.
Важный момент: чат, который работает изолированно, создаёт дополнительную вкладку для оператора. Если клиент одновременно пишет в чат и в Telegram, оператор будет переключаться между интерфейсами. Лучше выбирать платформу, где все каналы собраны вместе — это экономит время и снижает число пропущенных обращений.
Шаг 2: Зарегистрироваться и получить код виджета
После регистрации в сервисе вы получите JavaScript-код для встраивания. Код уникален для вашего аккаунта. Его нужно разместить на каждой странице сайта — либо напрямую в HTML, либо через менеджер тегов.
Шаг 3: Установить код на сайт
Способ установки зависит от платформы вашего сайта.
Обычный HTML-сайт. Вставьте код перед закрывающим тегом body в файл шаблона (обычно index.html или layout.html). Если шаблон общий для всех страниц, код автоматически появится везде.
WordPress. Можно вставить код через плагин «Insert Headers and Footers» — он добавляет произвольный скрипт на все страницы без редактирования файлов темы. Альтернатива — вставить код в functions.php темы через функцию wp_footer.
Tilda. Зайдите в Настройки сайта → Ещё → HTML-код в head/footer. Вставьте код виджета в поле «HTML-код перед закрывающим тегом body». Код применится ко всем страницам.
Bitrix24.Сайты и другие конструкторы. Большинство конструкторов поддерживают вставку произвольного HTML-кода через настройки страницы или раздел «Интеграции». Найдите раздел «HTML-виджеты» или «Пользовательский код».
Google Tag Manager. Если на сайте настроен GTM, добавьте новый тег типа «Пользовательский HTML», вставьте код виджета и укажите триггер «Все страницы».
Шаг 4: Настроить внешний вид виджета
После установки откройте панель управления сервиса и настройте виджет под стиль вашего сайта.
Цвет кнопки и заголовка должны соответствовать фирменному стилю. Клиенты быстрее замечают виджет, который органично вписывается в дизайн, а не выбивается из него.
Приветственное сообщение формирует первое впечатление. «Здравствуйте! Задайте вопрос — ответим за 5 минут» работает лучше, чем просто «Чем могу помочь?»
Настройте часы работы. В рабочее время клиент видит виджет с онлайн-статусом, в нерабочее — офлайн-форму для сбора контактов. Заявки из офлайн-формы приходят в inbox и не теряются.
Шаг 5: Подключить команду или AI
Чат без оператора бесполезен. Добавьте коллег в панели управления: задайте роли, настройте уведомления на смартфон и email. Каждый оператор получит доступ к входящим обращениям из своего браузера или мобильного приложения.
Если хотите обрабатывать обращения круглосуточно без расширения штата — подключите AI-агента. Он отвечает на типовые вопросы по базе знаний компании и передаёт нестандартные случаи живому оператору. Первичную настройку AI-агента можно сделать за час: загрузить FAQ, условия доставки и описания продуктов.
Шаг 6: Проверить, что всё работает
Откройте сайт в режиме инкогнито и отправьте тестовое сообщение. Убедитесь, что виджет отображается на всех ключевых страницах, сообщение пришло в inbox вовремя, оператор получил уведомление, история переписки сохранилась.
Если используете AI — проверьте несколько типовых вопросов и убедитесь, что ответы точные.
Частые ошибки при установке
Чат работает только на главной. Значит, код вставлен не в шаблон, а в конкретную страницу. Найдите общий шаблон и перенесите скрипт туда.
Виджет тормозит загрузку страницы. Убедитесь, что скрипт загружается асинхронно (атрибут async или defer). Большинство сервисов используют именно этот способ по умолчанию.
Операторы не получают уведомления. Проверьте настройки уведомлений в браузере (нужно разрешить push-уведомления для домена панели управления) и в мобильном приложении.
Офлайн-форма не отправляет заявки. Проверьте настройки часов работы: если они не заданы, сервис может считать вас онлайн круглосуточно и не показывать офлайн-форму.
После установки полезно связать чат с другими каналами — Telegram, WhatsApp, Авито — чтобы все обращения приходили в единый inbox. Подробнее об омниканальной поддержке в Cloft →
Как настроить уведомления для операторов
Это один из самых важных, но часто пропускаемых шагов. Без правильных уведомлений оператор просто не узнает о новом сообщении.
Браузерные push-уведомления работают, когда панель управления открыта в вкладке. При первом входе браузер попросит разрешение — нужно обязательно нажать «Разрешить». Если разрешение отклонили случайно, его можно включить в настройках браузера (адресная строка → иконка замка → Уведомления).
Мобильное приложение — надёжнее для небольших команд, где оператор не всегда сидит за компьютером. Уведомление приходит на телефон как обычное push-сообщение, диалог открывается в один тап.
Email-дайджест подойдёт как дополнительный слой: если сообщение не обработано за N минут, на почту приходит напоминание. Это страховка от пропущенных обращений.
Как оптимизировать виджет после установки
Установка — это только начало. Виджет нужно настроить так, чтобы он конвертировал посетителей, а не просто висел в углу.
Первое — правильное позиционирование. По умолчанию большинство виджетов появляются в правом нижнем углу. Это стандарт, которому клиенты уже обучены. Менять позицию стоит только если виджет перекрывает важный элемент сайта (форму, кнопку, навигацию).
Второе — задержка появления. Если виджет открывается сразу при загрузке страницы, это раздражает. Лучше настроить задержку 5–10 секунд или триггер по прокрутке (например, открыть после прокрутки 50% страницы).
Третье — разные приветствия для разных страниц. На главной: «Привет! Чем могу помочь?». На странице цен: «Остались вопросы по тарифам? Спрашивайте». На странице доставки: «Подскажу детали по доставке в ваш регион». Персонализированный контекст повышает вероятность начала диалога.
Как измерить, работает ли чат
После установки через 2–4 недели стоит посмотреть на несколько метрик.
Процент посетителей, открывших виджет — нормальное значение 5–15%. Ниже 5% значит, что виджет незаметен или открывается неудобно.
Процент диалогов с ответом оператора — должен стремиться к 100%. Если есть диалоги без ответа, значит, оператор не получил уведомление или не был онлайн.
Среднее время первого ответа — в рабочее время нормой считается до 2–3 минут, в нерабочее — следующее рабочее утро (или немедленно, если есть AI-агент).
Частые вопросы об установке чата
Нужен ли разработчик для установки чата на сайт? Нет, если у вас стандартный сайт на HTML, WordPress или Tilda. Установка — одна строка кода или плагин. Разработчик нужен только если сайт работает на нестандартном движке или требует специфической интеграции с CRM.
Можно ли поставить чат на несколько сайтов с одним аккаунтом? Зависит от сервиса. Большинство платформ позволяют создать несколько «проектов» или «каналов» в одном аккаунте — у каждого свой код виджета, но все обращения приходят в единый inbox.
Что делать, если виджет не появляется после установки? Проверьте три вещи: код вставлен на все страницы (а не только на главную), в браузере нет блокировщика скриптов, домен сайта совпадает с тем, что указан в настройках виджета (некоторые сервисы блокируют загрузку с незарегистрированных доменов).
Можно ли скрыть виджет на мобильных устройствах? Да, в настройках большинства виджетов есть опция скрыть на мобильных. Но делать это не рекомендуется: мобильный трафик составляет 60–70% от общего, и лишать мобильных пользователей поддержки — значит терять значительную часть потенциальных обращений.
