> For the complete documentation index, see [llms.txt](https://doc.nextbot.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.nextbot.ru/functional/integrations/chat-na-sait/chat-lending-na-veb-sait-iframe.md).
# Чат-лендинг на веб-сайт (iframe)
### Описание
На платформе Nextbot можно создать встраиваемый чат в формате iframe и разместить его на сайте. Такой формат подходит для диалоговых лендингов, страниц заявок и отдельных блоков сайта, где пользователь может сразу начать общение с ИИ-агентом.
**Пример такого решения:** [https://nextbot.ru](https://nextbot.ru/)
В отличие от обычного лендинга, iframe-чат помогает сразу перевести посетителя в диалог:
* клиент попадает в интерфейс общения прямо на странице;
* ИИ-агент отвечает на вопросы, консультирует и доводит до заявки;
* при необходимости iframe-чат можно встроить в ваш процесс передачи заявок в CRM.
### Создание iframe чата
{% stepper %}
{% step %}
**Создание чата**
1. В разделе **«Интеграции»** нажмите **«Чат на сайт»**.
2. Выберите вкладку **«Встроенный чайт (iframe)»**.
3. Нажмите кнопку **«Создать iframe-чат»**.
{% endstep %}
{% step %}
**Основные опции**
1. Окно чата. В этом блоке можно настроить следующие опции:
1. Язык интерфейса
2. Сервер обработки сообщений — определяет, через какой сервер будут отправляться сообщения пользователя и возвращаться ответы ИИ-агента в процессе общения.
3. Текст в поле ввода сообщения (например, «Введите ваш вопрос»)
4. Фон (цвет фона)
5. Фоновое изображение (контрастность фона)
6. Текст индикатора набора (при наборе текста ботом)
7. Цвет текста индикатора (цвет текста при наборе текста ИИ-агентом)
8. Приветственное сообщение (первое сообщение, которое пользователь увидит при открытии чата)
2. Шрифты Google Fonts\
\
По желанию вы можете выбрать нужный вам шрифт и установить его. Для этого перейдите на сайт , выберите нужный язык (например, 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](https://example.com/avatar.png)\
Используйте сервисы **ImgBB, Imgur, PostImages, ImageShack и т.п.**
**Google Drive / Яндекс.Диск** — не дают прямую ссылку с расширением, поэтому ссылки с этих сервисов работать не будут.\
8. Вспомогательные вопросы - Вы можете добавить до 6 вопросов, которые будут отображаться в начале диалога для упрощения начала общения с ботом. После отправки первого сообщения, вопросы будут скрыты.\
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. Выберите сервер загрузки встроенного чата — адрес, с которого на сайт загружается сам iframe-чат: его интерфейс, стили и начальное отображение на странице.\
3. Скопируйте код, нажав кнопку "Копировать"
4. Вставьте в код своего сайта
5. Пример встроенного чата:
{% endstep %}
{% step %}
**Примечание**
Если вы сменили настройки чата, надо **заменить код** на вашем сайте на обновлённый.
{% endstep %}
{% endstepper %}
### **1С‑Битрикс: проактивная защита блокирует чат или iframe**
При подключении **чата на сайт** или **iframe** веб-антивирус (модуль “Проактивная защита”) может считать код потенциально опасным и блокировать его из HTML.
В этом случае в Битриксе достаточно добавить домен виджета `rus.nextbot.ru` в исключения веб‑антивируса.
#### Пошагово в админке Битрикс
1. Откройте административную панель сайта (Битрикс).
2. Перейдите: **Настройки → Проактивная защита → Веб-антивирус**.
3. Откройте вкладку **“Исключения”**.
4. Добавьте в список исключений домен: `rus.nextbot.ru`.
5. Нажмите **Сохранить**.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://doc.nextbot.ru/functional/integrations/chat-na-sait/chat-lending-na-veb-sait-iframe.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.