Чат-лендинг на веб-сайт (iframe)

Описание

На платформе Nextbot можно создать встраиваемый чат в формате iframe и разместить его на сайте. Такой формат подходит для диалоговых лендингов, страниц заявок и отдельных блоков сайта, где пользователь может сразу начать общение с ИИ-агентом.

Пример такого решения: https://nextbot.ru

В отличие от обычного лендинга, iframe-чат помогает сразу перевести посетителя в диалог:

• клиент попадает в интерфейс общения прямо на странице;

• ИИ-агент отвечает на вопросы, консультирует и доводит до заявки;

• при необходимости iframe-чат можно встроить в ваш процесс передачи заявок в CRM.

Создание iframe чата

1

Создание чата

1. В разделе «Интеграции» нажмите «Чат на сайт».

2. Выберите вкладку «Встроенный чайт (iframe)».

3. Нажмите кнопку «Создать iframe-чат».

2

Основные опции

1. Окно чата. В этом блоке можно настроить следующие опции:

   1. Язык интерфейса

   2. Сервер обработки сообщений — определяет, через какой сервер будут отправляться сообщения пользователя и возвращаться ответы ИИ-агента в процессе общения.

   3. Текст в поле ввода сообщения (например, «Введите ваш вопрос»)

   4. Фон (цвет фона)

   5. Фоновое изображение (контрастность фона)

   6. Текст индикатора набора (при наборе текста ботом)

   7. Цвет текста индикатора (цвет текста при наборе текста ИИ-агентом)

   8. Приветственное сообщение (первое сообщение, которое пользователь увидит при открытии чата)

   
2. Шрифты Google Fonts По желанию вы можете выбрать нужный вам шрифт и установить его. Для этого перейдите на сайт https://fonts.google.com/, выберите нужный язык (например, Russian) и нажмите на подходящий вам в списке шрифт. Откроется новое окно с выбранным вами шрифтом, нажмите кнопку Get Font, а затем <> Get Embeded Code. Скопируйте код из двух полей: — Embed code in the of your html -> вставьте его в поле "Ссылка на Google Fonts (CSS)" — Ponomar: CSS class -> вставьте его в поле "CSS стили для шрифтов" Нажмите "Применить" и не забудьте сохранить настройки. После сохранения ваш кастомный шрифт будет применён.

   
3. Иконка кнопки отправки Чтобы добавить кастомную иконку отправки сообщений, вы можете вставить SVG-код в поле и нажать "Применить". После сохранения, иконка отправки сообщения изменится на новую. Используя опцию "Поворот", вы можете настроить угол наклона вашей SVG-иконки.

   
4. Сообщения ИИ-агента

   1. Фон

   2. Текст

   
5. Сообщения пользователя

   1. Фон

   2. Текст

   
6. Размеры виджета

   1. Ширина – может быть указана в px (пикселях), процентах или vw (viewport width – ширина видимой области).

   2. Высота – может быть указана в px (пикселях) или vh (viewport height – высота видимой области)

   3. Отступ

   4. Закругление углов

   
7. Аватар - выберите один из предложенных или вставьте ссылку на свой аватар. Ссылка на свой аватар должна быть в формате https://xxxxxxx.xxx/avatar.png Используйте сервисы ImgBB, Imgur, PostImages, ImageShack и т.п.

   Google Drive / Яндекс.Диск — не дают прямую ссылку с расширением, поэтому ссылки с этих сервисов работать не будут.

8. Вспомогательные вопросы - Вы можете добавить до 6 вопросов, которые будут отображаться в начале диалога для упрощения начала общения с ботом. После отправки первого сообщения, вопросы будут скрыты.

9. Стили формы персональных данных.

Если в агенте есть функция с действием "Форма персональных данных", в настройках встроенного чата вы можете персонализировать внешний вид формы, которая открывается внутри чата.

Подробнее про настройку стилей формы персональных данных вы можете узнать в статье: Стили формы персональных данных в чате на сайт.

1. Не забудьте сохранить настройки!

3

Встраивание на сайт

1. Нажмите "Встроить на сайт"

2. Выберите сервер загрузки встроенного чата — адрес, с которого на сайт загружается сам iframe-чат: его интерфейс, стили и начальное отображение на странице.

3. Скопируйте код, нажав кнопку "Копировать"

4. Вставьте в код своего сайта

5. Пример встроенного чата:

   

4

Примечание

Если вы сменили настройки чата, надо заменить код на вашем сайте на обновлённый.

1С‑Битрикс: проактивная защита блокирует чат или iframe

При подключении чата на сайт или iframe веб-антивирус (модуль “Проактивная защита”) может считать код потенциально опасным и блокировать его из HTML.

В этом случае в Битриксе достаточно добавить домен виджета rus.nextbot.ru в исключения веб‑антивируса.

Пошагово в админке Битрикс

1. Откройте административную панель сайта (Битрикс).

2. Перейдите: Настройки → Проактивная защита → Веб-антивирус.​

3. Откройте вкладку “Исключения”.​

4. Добавьте в список исключений домен: rus.nextbot.ru.

5. Нажмите Сохранить.