ChatLab предлагает два способа добавить чат-бота на ваш сайт: в виде виджета (widget) или через iframe. В обоих случаях используется один и тот же чат-бот с одинаковыми данными для обучения и настройками, но они по-разному отображаются на странице.
Виджет
Виджет добавляет иконку чата в фиксированную позицию на вашей странице (по умолчанию в нижнем правом углу). Посетители нажимают на иконку, чтобы открыть всплывающее окно чата. Окно чата можно в любой момент свернуть обратно в иконку.
Ключевые особенности:
- Отображается как кнопка запуска в углу экрана
- Открывается во всплывающем окне, когда посетители нажимают на иконку
- Остается доступным на всех страницах, где установлен код
- Поддерживает настройку положения иконки, автоматического открытия, всплывающих приветственных сообщений и свернутого режима (Settings > Appearance (Настройки > Внешний вид))
Iframe
Iframe встраивает чат-бота непосредственно в контент страницы. Окно чата отображается постоянно и может быть окружено другими элементами страницы.
Ключевые особенности:
- Всегда виден на странице без необходимости нажимать на иконку
- Встроен в структуру страницы наряду с другим содержимым
- Настраиваемый размер - вы можете задать атрибуты
widthиheightв коде вставки в соответствии с вашим макетом - Лучше всего подходит для специальных страниц, где чат-бот является ключевым элементом, например для страницы поддержки или лендинга
Где выбрать виджет или iframe
- Выберите чат-бота на панели управления
- Перейдите на вкладку Deploy (Развертывание)
- Выберите HTML Code (HTML-код), затем откройте вкладку Widget (Виджет) или Iframe (Iframe), чтобы увидеть соответствующий код для вставки
- Нажмите Copy to clipboard (Скопировать в буфер обмена). Разместите код Widget в заголовке сайта (header) или в блоке скриптов вашей платформы; код Iframe вставьте в тело страницы (body) именно там, где должен отображаться чат.
- Опубликуйте страницу, откройте ее на компьютере и мобильном устройстве и отправьте тестовое сообщение.
Тестирование обоих вариантов
Вы можете протестировать оба варианта без вставки кода на сайт. На вкладке Overview (Обзор) найдите строку Try out & share (Протестировать и поделиться) и нажмите на любую из ссылок:
- As always-open frame (В виде постоянно открытого фрейма) - открывает чат-бота в режиме iframe
- As openable widget (В виде открываемого виджета) - открывает чат-бота в режиме виджета с иконкой запуска
В каждой строке также есть ссылка QR Code (QR-код), которая открывает код для сканирования с тем же URL-адресом, чтобы вы могли протестировать чат-бота на телефоне, отсканировав его камерой.
Подробнее о передаче этих ссылок для предпросмотра читайте в статье Отправка ссылки на вашего чат-бота.
Что выбрать?
- Выберите виджет, если хотите, чтобы чат-бот был доступен на каждой странице и не занимал лишнее место на экране. Посетители смогут открыть чат, когда им понадобится помощь, и закрыть его после завершения диалога.
- Выберите iframe, если хотите сделать чат-бота постоянной частью макета конкретной страницы - например, в справочном центре, на странице контактов или на странице продукта, где бот всегда готов к общению.