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

### Описание

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

**Пример такого решения:** [https://nextbot.ru](https://nextbot.ru/)

<figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2Fw9CoChTvFYtfR3LMSNut%2FScreenshot_13.png?alt=media&#x26;token=c7d50598-a9d7-4701-a629-92509b360c71" alt=""><figcaption></figcaption></figure>

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

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

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

{% stepper %}
{% step %}

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

1. В разделе **«Интеграции»** нажмите **«Чат на сайт»**.
2. Выберите вкладку **«Встроенный чайт (iframe)»**.
3. Нажмите кнопку **«Создать iframe-чат»**.

<figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FDwzn6Pkz16kw9SvmcALr%2FScreenshot_11.png?alt=media&#x26;token=b4abdafd-c3af-45ad-b9ec-2b53c4939c53" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

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

   1. Язык интерфейса
   2. Текст в поле ввода вопроса (например, «Введите ваш вопрос»)
   3. Фон (цвет фона)
   4. Контрастность фонового изображения
   5. Текст при наборе текста ботом
   6. Цвет текста при наборе текста ботом:
   7. Приветственное сообщение

   <div align="left"><figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FSQ7M6iPLwqqk088JH558%2Fimage.png?alt=media&#x26;token=d67d96a9-8a8f-4270-8190-c9860fe3b39d" alt=""><figcaption></figcaption></figure></div>
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 стили для шрифтов"\
   \
   Нажмите "Применить" и не забудьте сохранить настройки.\
   После сохранения ваш кастомный шрифт будет применён.<br>

   <figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FL4EVOkKys8W0ISY2SbJl%2Fimage.png?alt=media&#x26;token=05a50122-ff20-411a-b217-c24bad9751de" alt=""><figcaption></figcaption></figure>
3. Иконка кнопки отправки\
   \
   Чтобы добавить кастомную иконку отправки сообщений, вы можете вставить SVG-код в поле и нажать "Применить". После сохранения, иконка отправки сообщения изменится на новую.\
   \
   Используя опцию "Поворот", вы можете настроить угол наклона вашей SVG-иконки.<br>

   <figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FGedcGyiejYyva68IRMB6%2Fimage.png?alt=media&#x26;token=0546bd3f-0e59-412a-90a8-39f5c90eff23" alt=""><figcaption></figcaption></figure>
4. Сообщения ИИ-агента

   1. Фон
   2. Текст

   <div align="left"><figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FwKq9xPs2jR37czQYQXib%2Fimage.png?alt=media&#x26;token=92eb5763-e852-4c7e-9d11-2932b8d8e68a" alt=""><figcaption></figcaption></figure></div>
5. Сообщения пользователя

   1. Фон
   2. Текст

   <div align="left"><figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FLB9A4a7kf70AbA1jnQjQ%2Fimage.png?alt=media&#x26;token=161e0b18-55cb-4039-8ace-33b0c56ea4b1" alt=""><figcaption></figcaption></figure></div>
6. Размеры виджета

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

   <div align="left"><figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FSAecI8wpT9uOMRwdhTm7%2Fimage.png?alt=media&#x26;token=3cf6b6de-a183-40d8-9c27-79b09153eff7" alt=""><figcaption></figcaption></figure></div>
7. Аватар - выберите один из предложенных или вставьте ссылку на свой аватар.\
   \
   Ссылка на свой аватар должна быть в формате [https://xxxxxxx.xxx/avatar.png](https://example.com/avatar.png)\
   Используйте сервисы **ImgBB, Imgur, PostImages, ImageShack и т.п.**

   **Google Drive / Яндекс.Диск** — не дают прямую ссылку с расширением, поэтому ссылки с этих сервисов работать не будут.\
   ![](https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2Fl1d4KWAERH53RviHik72%2Fimage.png?alt=media\&token=161326f8-9bd2-4bda-bbc8-382513af508a)
8. Вспомогательные вопросы - Вы можете добавить до 6 вопросов, которые будут отображаться в начале диалога для упрощения начала общения с ботом. После отправки первого сообщения, вопросы будут скрыты.\
   ![](https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2F2J9JrpnzzFwaLWieG15V%2Fimage.png?alt=media\&token=cf092b42-777e-4265-b31a-fe8f7c79b32f)
9. **Стили формы персональных данных.**

Если в агенте есть функция с действием "[Форма персональных данных"](https://doc.nextbot.ru/functional/functions/sending-result/forma-personalnykh-dannykh), в настройках встроенного чата вы можете персонализировать внешний вид формы, которая открывается внутри чата.

Подробнее про настройку стилей формы персональных данных вы можете узнать в статье: [Стили формы персональных данных в чате на сайт](https://doc.nextbot.ru/functional/integrations/chat-na-sait/stili-formy-personalnykh-dannykh-v-chate-na-sait).

10. **Не забудьте сохранить настройки!**
    {% endstep %}

{% step %}

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

1. Нажмите "Встроить на сайт"
2. Скопируйте код, нажав кнопку "Копировать"<br>

   <div align="left"><figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FVJiCWOvrquOA3fsh83YM%2Fimage.png?alt=media&#x26;token=3037b5d0-bc95-4422-bccd-3aea59c31504" alt="" width="292"><figcaption></figcaption></figure></div>
3. Вставьте в код своего сайта
4. Пример встроенного чата:<br>

   <figure><img src="https://2593311972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fef2EBU68XAlye1NtG8DF%2Fuploads%2FPWzGz1knL1LXnVpWjMmU%2Fimage.png?alt=media&#x26;token=581728c5-6f77-43e2-9c07-52f1103fadc5" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}

#### Примечание

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

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

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

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

#### Пошагово в админке Битрикс <a href="#undefined" id="undefined"></a>

1. Откройте административную панель сайта (Битрикс).
2. Перейдите: **Настройки → Проактивная защита → Веб-антивирус**.​
3. Откройте вкладку **“Исключения”**.​
4. Добавьте в список исключений домен: `rus.nextbot.ru`.
5. Нажмите **Сохранить**.