Виджет чат-бота на сайт: установка и проверка перед запуском

Открыть схему крупнее ↗

Краткий ответ: чтобы установить виджет чат-бота на сайт, выберите способ, который поддерживает поставщик и ваша CMS, настройте условия показа, затем проверьте весь путь от открытия окна до появления тестового сообщения у ответственного. Отдельно пройдите этот сценарий на телефоне и определите запасной способ связи при недоступности сервиса.

Определите, что именно устанавливается

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

Сначала зафиксируйте задачу установки: на каких страницах нужен чат, кто увидит новое обращение и что должно происходить после отправки. Если цель — только форма связи, настройка будет одной; если за виджетом стоит ИИ-сотрудник, отдельно задайте условия автоматического ответа и передачи сотруднику. Обычный вопрос по проверенным сведениям может завершиться автоматически. Если вопрос не покрыт данными или посетитель просит человека, сценарий должен предложить передачу по согласованному маршруту.

Выберите способ установки по документации

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

В документации Google для Google tag отдельно описаны интеграции с CMS и ручной способ, а шаги зависят от выбранной платформы. Это пример платформенной установки; для виджета следуйте инструкции именно его поставщика (руководство Google по установке тега через сайт или CMS). Если для размещения используется Google Tag Manager, предварительный режим позволяет проверить срабатывание тегов до публикации (справка Google о Preview и debug mode). Такая проверка подтверждает работу тега, а доставку сообщения в чат нужно проверять отдельно.

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

Настройте страницы и положение

Составьте перечень страниц, где кнопка нужна посетителю: например, главная, каталог, карточка услуги и контакты. Для страниц оплаты, личного кабинета или процесса оформления заказа примите решение отдельно. У разных поставщиков условия показа настраиваются по-разному, поэтому сверяйтесь с их документацией и проверьте список URL после установки.

Задайте положение окна с учётом уже существующих элементов: кнопки звонка, согласия на cookies, корзины, плавающей панели и футера. Проверьте состояния по умолчанию, после открытия, при закрытии и после прокрутки страницы. Если есть уведомление о новом сообщении, проверьте, не выглядит ли оно как отдельное окно и не перекрывает ли содержимое.

Проверьте мобильный экран

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

Пройдите тест на основных шаблонах сайта: главной странице, каталоге и одной странице с длинным содержимым. Проверьте также разные ширины экрана и ориентации, если посетители ими пользуются. Запишите конкретный дефект — например, «кнопка перекрывает выбор варианта товара на узком экране» — и исправьте положение до запуска.

Проведите обращение от начала до конца

Проверьте не только открытие окна, но и фактическую доставку. Отправьте тестовое сообщение с пометкой «тест», затем найдите его в подключённой очереди, почте или CRM. Убедитесь, что ответственный видит сообщение и может продолжить диалог. Если для продолжения нужен контекст страницы или предыдущие сообщения, проверьте, что они действительно доступны сотруднику.

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

Чек-лист приёмки виджета

• Поставщик и способ установки совпадают с инструкцией для используемой CMS.
• Виджет появляется только на согласованных страницах.
• Положение окна проверено рядом с другими плавающими элементами.
• Открытие, закрытие, ввод и отправка проверены на компьютере и телефоне.
• После перехода между страницами известен статус диалога.
• Тестовое обращение найдено у нужного ответственного.
• Повторная отправка и недоступность сервиса не создают ложного подтверждения.
• Посетителю доступен запасной контакт, если отправка не работает.

Ограничения и следующий шаг

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

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