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

### Описание

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

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

<figure><img src="/files/CO9QNlb5H7eKdDdI0D5y" alt=""><figcaption></figcaption></figure>

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

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

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

{% stepper %}
{% step %}
**Создание чата**

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

<figure><img src="/files/HTRnJy1Hlvexm99zcE6y" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Основные опции**

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

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

   <div align="left"><figure><img src="/files/9JatrywPCuDcwLN8OlDU" 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="/files/s54Sm5SVpGkFcQhS3cAO" alt=""><figcaption></figcaption></figure>
3. Иконка кнопки отправки\
   \
   Чтобы добавить кастомную иконку отправки сообщений, вы можете вставить SVG-код в поле и нажать "Применить". После сохранения, иконка отправки сообщения изменится на новую.\
   \
   Используя опцию "Поворот", вы можете настроить угол наклона вашей SVG-иконки.<br>

   <figure><img src="/files/6kQ16n2W7nF5OXEGyWKU" alt=""><figcaption></figcaption></figure>
4. Сообщения ИИ-агента

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

   <div align="left"><figure><img src="/files/2YIw5lyg2CUV5YJEB0BV" alt=""><figcaption></figcaption></figure></div>
5. Сообщения пользователя

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

   <div align="left"><figure><img src="/files/44TJ4TghutVIfpzc8t8p" alt=""><figcaption></figcaption></figure></div>
6. Размеры виджета

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

   <div align="left"><figure><img src="/files/3N4ghGxTFkxpAB3oiFdu" alt=""><figcaption></figcaption></figure></div>
7. Аватар - выберите один из предложенных или вставьте ссылку на свой аватар.\
   \
   Ссылка на свой аватар должна быть в формате [https://xxxxxxx.xxx/avatar.png](https://example.com/avatar.png)\
   Используйте сервисы **ImgBB, Imgur, PostImages, ImageShack и т.п.**

   **Google Drive / Яндекс.Диск** — не дают прямую ссылку с расширением, поэтому ссылки с этих сервисов работать не будут.\
   ![](/files/jiWdoMEctcX4K0dAkxv2)
8. Вспомогательные вопросы - Вы можете добавить до 6 вопросов, которые будут отображаться в начале диалога для упрощения начала общения с ботом. После отправки первого сообщения, вопросы будут скрыты.\
   ![](/files/4lQVuEKkBL40hEJVLpZh)
9. **Стили формы персональных данных.**

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

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

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

{% step %}
**Встраивание на сайт**

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

   <div align="left"><figure><img src="/files/2FWvUXWeX9Ze3JiaaI7w" alt="" width="292"><figcaption></figcaption></figure></div>
3. Вставьте в код своего сайта
4. Пример встроенного чата:<br>

   <figure><img src="/files/jxjGlCxoaQgtoFyvvEoe" 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. Нажмите **Сохранить**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.nextbot.ru/functional/integrations/chat-na-sait/chat-lending-na-veb-sait-iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.