Когда компания решает разместить AI-чат на сайте, первый вопрос - как именно это сделать технически. Существует три принципиально разных подхода, каждый со своим уровнем сложности и гибкости:

• Iframe-виджет - самый простой способ. Вставляете одну строку HTML-кода на сайт, и чат появляется. Подходит для быстрого запуска без привлечения разработчиков
• JavaScript SDK - лёгкий скрипт, который загружается на страницу и предоставляет программный интерфейс для управления виджетом. Позволяет настраивать внешний вид, поведение и реагировать на события
• REST API - полный контроль. Вы сами создаёте интерфейс чата и обращаетесь к бэкенду через HTTP-запросы. Максимальная гибкость, но требует разработки на вашей стороне

Выбор зависит от ваших задач, технических ресурсов и требований к кастомизации. Рассмотрим каждый вариант подробно.

Iframe-виджет - это готовый чат-интерфейс, размещённый на нашем сервере и встроенный на вашу страницу через тег <iframe>. Вся логика - отображение, отправка сообщений, получение ответов - работает внутри фрейма. Ваш сайт никак не затрагивается.

Установка занимает буквально 5 минут. Вы получаете фрагмент HTML-кода, который нужно вставить на страницу:

• Скопируйте предоставленный код виджета
• Вставьте его перед закрывающим тегом </body> на вашем сайте
• Виджет появится в правом нижнем углу страницы - кнопка чата, которая раскрывается в окно диалога

Iframe-виджет работает на абсолютно любом сайте: WordPress, Tilda, Bitrix, самописные решения, одностраничники. Не требует никаких зависимостей, не конфликтует с существующим JavaScript и CSS вашего сайта. Весь код выполняется в изолированной среде фрейма.

Кастомизация iframe-виджета

Несмотря на простоту, iframe-виджет поддерживает настройку внешнего вида через параметры URL:

• Цветовая тема - основной цвет кнопки и заголовка виджета. Можно задать любой HEX-цвет, чтобы виджет вписался в дизайн вашего сайта
• Приветственное сообщение - текст, который видит пользователь при первом открытии чата. Например: «Здравствуйте! Я AI-консультант компании N. Чем могу помочь?»
• Аватар бота - логотип вашей компании или иконка бота, которая отображается рядом с сообщениями
• Позиция - правый нижний угол (по умолчанию), левый нижний или фиксированная позиция
• Размер - ширина и высота окна чата, размер кнопки открытия
• Язык интерфейса - русский, английский или автоопределение по браузеру пользователя

Ограничение iframe-подхода - вы не можете полностью переделать дизайн виджета или добавить кастомную логику. Если нужен уникальный интерфейс, используйте JavaScript SDK или REST API.

Когда iframe - правильный выбор

Iframe-виджет идеален для быстрого запуска. Если вам нужно проверить гипотезу («поможет ли AI-чат нашим клиентам?»), запустить пилот за один день или добавить чат на сайт без привлечения разработчиков - это ваш вариант. Многие наши клиенты начинают с iframe и переходят на SDK, когда убеждаются в ценности AI-консультанта для их бизнеса.

JavaScript SDK - это лёгкий скрипт (около 5 КБ в сжатом виде), который загружается асинхронно и не влияет на скорость загрузки вашего сайта. В отличие от iframe, SDK рендерит виджет непосредственно на вашей странице, что даёт больший контроль над внешним видом и поведением.

Установка тоже проста: вы добавляете один тег <script> на страницу и вызываете функцию инициализации с вашим API-ключом и настройками. Скрипт загружается асинхронно с атрибутом async, поэтому не блокирует парсинг и отрисовку основного контента страницы. На метрики Core Web Vitals (LCP, FID, CLS) влияние минимальное.

Программное управление виджетом

Главное преимущество SDK - программный доступ к функциям виджета через JavaScript API. Это открывает возможности, недоступные с iframe:

• Открытие и закрытие по событию - откройте чат, когда пользователь провёл на странице 30 секунд, прокрутил до определённого блока или нажал конкретную кнопку. Например, кнопка «Задать вопрос AI» рядом с карточкой товара
• Передача контекста - отправьте в чат информацию о текущей странице, товаре, разделе. Бот сразу поймёт, о чём хочет спросить пользователь: «Пользователь находится на странице товара «Модель X», вероятно хочет узнать характеристики или цену»
• Предзаполненные сообщения - задайте начальное сообщение программно. Пользователь нажимает «Сравнить модели A и B» - и чат открывается с уже отправленным запросом
• Подписка на события - получайте уведомления, когда пользователь отправил сообщение, получил ответ, оставил контакт, закрыл чат. Это позволяет отслеживать события в вашей аналитике (Яндекс Метрика, Google Analytics)
• Кастомные триггеры - показать подсказку («Нужна помощь с выбором?»), если пользователь переключается между двумя карточками товаров. Или предложить чат, если пользователь заполняет форму дольше 60 секунд

Кастомизация внешнего вида

SDK рендерит виджет в Shadow DOM, что изолирует его стили от стилей вашего сайта (и наоборот). При этом вы можете переопределить CSS-переменные для полной кастомизации:

• Цвета фона, текста, кнопок, ссылок
• Шрифт (по умолчанию наследуется от вашего сайта)
• Радиус скругления углов, тени, отступы
• Размер и позиция виджета
• Анимации открытия и закрытия

Для продвинутой кастомизации можно заменить отдельные компоненты: свою кнопку открытия вместо стандартной, свой заголовок чата, свою форму ввода. SDK предоставляет слоты (render slots), куда вы подключаете свои React или vanilla JS компоненты.

Влияние на производительность сайта

Мы уделяем особое внимание производительности. SDK спроектирован так, чтобы минимально влиять на ваш сайт:

• Размер скрипта - менее 5 КБ (gzip). Для сравнения, средний рекламный трекер весит 15-30 КБ
• Асинхронная загрузка - скрипт не блокирует рендеринг страницы
• Ленивая инициализация - тяжёлые ресурсы (шрифты, иконки, WebSocket-соединение) загружаются только при первом открытии чата
• Нулевое влияние на CLS (Cumulative Layout Shift) - виджет рендерится поверх контента, не сдвигая элементы страницы

На практике установка SDK не влияет на оценку PageSpeed Insights - мы проверяли это на десятках сайтов с разной архитектурой.

REST API - это вариант для команд, которым нужна максимальная гибкость. Вы создаёте свой собственный интерфейс чата (или встраиваете ИИ в существующий продукт) и обращаетесь к нашему бэкенду через HTTP-запросы. Никакого виджета - только данные.

API предоставляет следующие возможности:

• Отправка сообщения - POST-запрос с текстом пользователя и идентификатором сессии. API возвращает ответ бота с найденными источниками
• Потоковая передача (SSE) - вместо ожидания полного ответа вы получаете текст по мере его генерации через Server-Sent Events. Пользователь видит, как ответ «печатается» в реальном времени - это создаёт ощущение живого диалога и уменьшает воспринимаемое время ожидания
• Управление сессиями - создание, продолжение и завершение диалогов. Каждая сессия хранит историю разговора, что обеспечивает контекстную связность
• Получение истории - загрузка предыдущих сообщений для отображения при повторном визите пользователя
• Сбор обратной связи - API принимает оценки ответов (полезно / бесполезно), которые используются для улучшения качества

SSE-стриминг: как работает потоковая передача

Потоковая передача ответов через Server-Sent Events - одно из ключевых преимуществ нашего API. Когда языковая модель генерирует ответ, она делает это токен за токеном. Без SSE клиент ждёт 3-8 секунд, пока генерация завершится, а потом получает весь текст разом. С SSE первые слова появляются через 300-500 миллисекунд, и ответ «печатается» на глазах пользователя.

Технически SSE работает так: клиент отправляет POST-запрос с заголовком Accept: text/event-stream. Сервер открывает долгоживущее HTTP-соединение и отправляет данные порциями в формате data: .... Каждая порция содержит несколько токенов текста. Соединение закрывается после завершения генерации. Все современные браузеры поддерживают SSE нативно, без библиотек.

Для мобильных приложений и нестандартных клиентов мы также поддерживаем формат обычного JSON-ответа (без стриминга) - просто не указывайте заголовок SSE.

CORS и валидация источника

Безопасность API обеспечивается на нескольких уровнях. Первый - CORS (Cross-Origin Resource Sharing). При создании API-ключа вы указываете список разрешённых доменов. Запросы с других доменов будут отклонены браузером ещё до обращения к серверу.

Второй уровень - серверная валидация заголовка Origin. Даже если злоумышленник подделает CORS-заголовки (например, через cURL), сервер проверит источник запроса и отклонит его, если домен не в белом списке.

Третий уровень - API-ключи. Каждый ключ привязан к конкретному боту, домену и набору разрешений. Ключи можно ротировать, отзывать и ограничивать по количеству запросов в минуту. Для серверных интеграций (server-to-server) используются отдельные ключи с расширенными правами, которые не передаются в браузер.

Четвёртый уровень - rate limiting. Каждый ключ имеет лимит на количество запросов в минуту и в сутки. Это защищает от злоупотреблений и контролирует расходы на API языковой модели.

Когда выбрать REST API

REST API - правильный выбор в нескольких сценариях:

• Вы строите своё мобильное приложение (iOS, Android) и хотите встроить AI-чат
• Ваш сайт - SPA (React, Vue, Angular), и вы хотите полностью кастомный интерфейс, встроенный в дизайн-систему
• Вы интегрируете AI-ответы в существующий продукт (внутреннюю CRM, ERP, портал самообслуживания)
• Вам нужен серверный доступ - например, обработка входящих email через AI или интеграция с внутренними системами
• Вы хотите обогатить данные в реальном времени - например, подсказки при заполнении форм на основе базы знаний

Независимо от способа интеграции (виджет или API), AI-чат поддерживает широкий набор настроек для адаптации под ваш бизнес.

Визуальная настройка

Чат должен выглядеть как естественная часть вашего сайта, а не чужеродный элемент. Вот что можно настроить:

• Цветовая схема - основной цвет, цвет фона, цвет сообщений пользователя и бота. Обычно мы берём основной цвет бренда и строим вокруг него палитру
• Логотип и аватар - логотип компании в заголовке виджета, аватар бота рядом с сообщениями. Вместо абстрактного робота лучше использовать фирменный знак - это повышает доверие
• Приветственное сообщение - текст, который видит пользователь при открытии чата. Лучшие приветствия - конкретные и полезные: «Я помогу подобрать квартиру по вашим параметрам» работает лучше, чем «Привет! Чем могу помочь?»
• Подсказки для быстрого старта - кнопки с типичными вопросами: «Показать каталог», «Условия ипотеки», «Ход строительства». Они снижают барьер входа - пользователю не нужно придумывать, что спросить
• Язык интерфейса - русский, английский, или автоматический выбор по браузеру пользователя

Поведенческая настройка

Помимо внешнего вида, настраивается поведение бота:

• Тон общения - формальный, нейтральный или дружеский. Настраивается через системный промпт
• Длина ответов - краткие (2-3 предложения) или развёрнутые (5-7 предложений с деталями). Зависит от специфики бизнеса: для техподдержки - кратко и по делу, для консультации по недвижимости - подробно
• Автооткрытие - через сколько секунд после загрузки страницы показать виджет. Или не показывать автоматически - только по клику
• Сценарии сбора контактов - когда и как бот предлагает оставить телефон: после 5 сообщений, после конкретного вопроса, или только по запросу пользователя

Подключение AI-чата к сайту - это только начало. Настоящая ценность раскрывается, когда вы начинаете анализировать данные диалогов. Каждый разговор - это источник информации о потребностях и поведении ваших клиентов.

Вот что мы отслеживаем в нашей аналитической панели:

• Количество диалогов - общее число разговоров за период. Рост числа диалогов обычно коррелирует с ростом трафика и говорит о том, что пользователи находят чат полезным
• Популярные вопросы - кластеризация запросов по темам. Если 30% вопросов - про цены, а 25% - про условия доставки, это сигнал разместить эту информацию заметнее на сайте
• Процент успешных ответов - доля вопросов, на которые бот нашёл релевантную информацию в базе знаний. Целевой показатель - 85-95%. Если ниже, нужно пополнять базу знаний
• Конверсионные события - сколько диалогов привели к целевым действиям: оставлен контакт, нажата кнопка «Записаться», открыта ссылка на товар. Эти события можно передавать в Яндекс Метрику или Google Analytics для сквозной аналитики
• Среднее время ответа - от отправки вопроса до получения ответа. Должно быть менее 5 секунд. Если растёт - нужно оптимизировать инфраструктуру
• Глубина диалога - среднее количество сообщений в разговоре. Слишком мало (1-2) - пользователь не находит чат полезным. Слишком много (20+) - возможно, бот не может решить проблему и нужна эскалация к человеку

Аналитика помогает не только оценивать эффективность бота, но и улучшать бизнес-процессы. Один наш клиент обнаружил, что 40% вопросов к боту связаны с условиями возврата - это привело к переработке страницы возвратов на сайте и снижению нагрузки на поддержку на 25%.

В зависимости от бизнес-задачи чат может работать в трёх режимах аутентификации:

Анонимный режим

Пользователь задаёт вопросы без регистрации и идентификации. Сессия привязывается к cookie или fingerprint устройства. Идеально для первого касания - не создаёт барьеров, позволяет оценить ценность чата до передачи контактных данных. Большинство сайтов используют этот режим по умолчанию.

Верификация по телефону

Бот запрашивает номер телефона и отправляет SMS с кодом подтверждения. Это гарантирует достоверность контакта - никаких фейковых номеров. Режим используется, когда бот имеет доступ к конфиденциальной информации (статус заказа, личный кабинет) или когда бизнесу критически важно получить проверенный контакт.

В нашей реализации верификация происходит один раз за сессию. После подтверждения номера пользователь общается свободно. Номер автоматически привязывается к лиду в CRM.

Аутентификация по email-домену

Для внутренних ассистентов (доступных только сотрудникам компании) используется проверка email-домена. Пользователь вводит корпоративный email, получает ссылку для подтверждения, и после этого получает доступ к чату. Это обеспечивает, что к внутренней базе знаний имеют доступ только авторизованные сотрудники.

Одно из главных архитектурных решений в нашей платформе - разделение RAG-пайплайна и канала доставки. База знаний, индекс эмбеддингов, промпт и логика ответов - всё это единое ядро, к которому подключаются разные каналы:

• Виджет на сайте - через iframe, SDK или API
• Telegram-бот - через Telegram Bot API и вебхуки
• REST API для внешних клиентов - для мобильных приложений, партнёрских интеграций, внутренних инструментов

Это означает, что вы настраиваете базу знаний один раз, а она работает во всех каналах. Обновили цены в базе - изменения мгновенно доступны и на сайте, и в Telegram. Добавили новый раздел FAQ - он появляется везде. Никакой дупликации данных, никакой рассинхронизации.

При этом каждый канал может иметь свои настройки: разные приветственные сообщения, разный тон общения, разные сценарии сбора контактов. Telegram-бот может быть более неформальным, а виджет на корпоративном сайте - строго деловым. RAG-ядро одно, но «обёртка» адаптируется под канал.

Для клиентов это создаёт бесшовный опыт. Человек может начать разговор на сайте, а продолжить в Telegram - если он идентифицирован (по номеру телефона или email), система подхватывает контекст предыдущего диалога.

Независимо от выбранного способа интеграции, процесс подключения RAG к сайту состоит из нескольких этапов:

1. Подготовка базы знаний - соберите и структурируйте данные, которые бот должен знать. Каталог товаров, FAQ, документация, прайс-листы. Подробнее об этом - в нашей статье о подготовке данных для ИИ
2. Загрузка и векторизация - данные разбиваются на фрагменты (чанки), преобразуются в эмбеддинги и индексируются в векторной базе данных. Мы используем Voyage AI для генерации эмбеддингов и pgvector или Turbopuffer для хранения
3. Настройка бота - системный промпт, тон общения, кнопки быстрого старта, сценарии сбора контактов, CRM-интеграция. Всё настраивается через веб-интерфейс нашей платформы
4. Тестирование - прогоняем 50-100 типичных вопросов и проверяем качество ответов. Корректируем промпт, пополняем базу знаний, настраиваем пороги релевантности
5. Установка на сайт - выбираете способ интеграции (iframe, SDK, API) и размещаете код на сайте. Для iframe - одна строка HTML, для SDK - скрипт инициализации, для API - разработка интерфейса
6. Запуск и мониторинг - запускаем на ограниченной аудитории (10-20% трафика), отслеживаем метрики, собираем обратную связь. Через 1-2 недели раскатываем на весь трафик

Весь процесс от первой встречи до запуска на production занимает от 2 до 6 недель в зависимости от объёма базы знаний и требований к кастомизации.

Скорость ответа AI-чата критически важна для пользовательского опыта. Мы применяем несколько стратегий оптимизации:

• Потоковая передача (SSE) - пользователь видит ответ по мере его генерации. Первые слова появляются через 300-500 мс, полный ответ готов через 3-8 секунд. Без стриминга те же 3-8 секунд ощущаются как долгое ожидание
• Кэширование частых запросов - если 50 пользователей в день спрашивают «Какие у вас часы работы?», нет смысла каждый раз обращаться к языковой модели. Мы кэшируем ответы на типичные вопросы в Redis с TTL от 1 до 24 часов
• Предзагрузка эмбеддингов - для наиболее популярных запросов эмбеддинги вычисляются заранее, а не в момент запроса. Это экономит 100-200 мс на каждом обращении
• Географическая близость - серверы RAG-пайплайна расположены в России (Yandex Cloud), что обеспечивает минимальную сетевую задержку для российских пользователей

В результате оптимизаций типичное время от нажатия «Отправить» до появления первых слов ответа - менее 1 секунды. Полный ответ - 3-5 секунд для стандартных вопросов и до 8-10 секунд для сложных запросов, требующих анализа большого количества источников.

Подключение RAG к вашему сайту - это не разовый проект, а создание AI-инфраструктуры, которая будет работать на ваш бизнес годами. Виджет на сайте - лишь один из каналов. Та же база знаний работает в Telegram-ботах, через API для мобильных приложений и через внутренние инструменты для сотрудников.

В Промолитике мы помогаем на каждом этапе: от аудита данных и подготовки базы знаний до интеграции виджета на сайт и подключения аналитики. Наша платформа позволяет управлять ботом без кода - добавлять документы, менять настройки, отслеживать метрики через веб-интерфейс.

Хотите увидеть, как AI-чат будет работать на вашем сайте? Запишитесь на бесплатную демонстрацию, и мы покажем прототип на ваших данных за одну встречу.