ИИ-агент на сайте — это чат-бот с искусственным интеллектом, который встраивается в страницу одной строкой кода, отвечает посетителям на естественном языке 24/7 и сам собирает заявки. В отличие от старых скриптовых чат-ботов с фиксированными кнопками, ИИ-агент понимает вопрос свободным текстом, консультирует по вашим товарам и услугам, принимает файлы и голосовые — и когда посетитель готов, квалифицирует его как лид. В этом гайде разберём, как подключить виджет чат-бота на сайт за 10 минут: от создания агента до вставки embed.js и настройки брендинга.
Что такое ИИ-агент для сайта и что он умеет
ИИ-агент для сайта — это виджет онлайн-консультанта, который работает на вашем контенте и инструкциях. Посетитель открывает чат, задаёт вопрос обычными словами, а агент отвечает от лица вашего бренда, ведёт диалог к цели (продажа, запись, поддержка) и передаёт горячих клиентов вам. Он никогда не раскрывает, на какой технологии работает — для посетителя это ваш фирменный ассистент.
Что виджет принимает и умеет в диалоге:
- Текст — свободные вопросы без кнопок и сценарных веток
- Голосовые сообщения — распознаются в текст автоматически
- Документы — PDF, DOCX, XLSX, CSV, TXT: агент читает содержимое и отвечает по сути
- Картинки и фото-альбомы — распознавание изображений (vision), если модель агента умеет «видеть»
- Сбор заявок — агент квалифицирует посетителя (имя, контакт, суть, бюджет/сроки) и помечает диалог как «квалифицирован»
- Вызов оператора — посетитель может попросить живого человека, диалог переходит в режим handoff
Идентичность посетителя и история переписки живут внутри iframe виджета — на вашем сайте ничего не хранится, ставить базу данных или бэкенд не нужно.
Что нужно перед стартом
- Уже созданный и сохранённый ИИ-агент (каналы подключаются только к существующему агенту)
- Тариф Pro или выше на воркспейсе
- Нейроны на балансе — иначе посетители увидят «агент временно недоступен»
- Доступ к коду сайта, чтобы вставить строку виджета перед
</body>
Как подключить ИИ-агента на сайт: пошагово
Шаг 1. Создайте и сохраните агента
Если агента ещё нет — создайте его: задайте имя, инструкцию (кто он и как отвечает), выберите модель. Обязательно сохраните — без сохранённого агента каналы не подключить, потому что они привязываются к его идентификатору.
Шаг 2. Откройте «Шаг 6. Интерфейсы»
В редакторе агента перейдите на Шаг 6. Интерфейсы. Вы увидите карточки четырёх каналов: Виджет на сайт, Публичная страница, Telegram-бот и Бот MAX — у каждого свой тумблер включения и блок «Настроить». Для сайта нам нужна первая карточка.
Шаг 3. Включите виджет и выберите формат
Включите тумблер «Виджет на сайт». Виджет доступен в двух форматах — выбирайте под задачу:
| Формат | Как выглядит | Когда использовать |
|---|---|---|
| Плавающая кнопка (бабл) | Круглая кнопка в углу экрана, по клику раскрывается окно чата | Универсальный вариант для любой страницы: consult-виджет, который не мешает контенту |
| Inline-встраивание | Чат встроен прямо в блок страницы | Лендинги и разделы «Задайте вопрос», где чат должен быть частью контента |
Шаг 4. Вставьте embed.js перед </body>
Скопируйте строку подключения из карточки виджета и вставьте её в HTML вашего сайта перед закрывающим тегом </body> — на всех страницах, где нужен чат. Это единственный код, который вы добавляете на сайт:
index.html
<script src="https://superintellect.ru/api/widget/embed.js" data-token="ВАШ_ТОКЕН_ВИДЖЕТА" defer></script>Шаг 5. Настройте брендинг
В блоке «Настроить» приведите виджет к фирменному виду, чтобы посетитель видел ваш бренд, а не безликий чат:
- Название бренда — влияет на приветствие и на то, как агент себя называет
- Логотип — в шапке окна чата
- Акцент-цвет — под цвет вашего сайта
- Приветствие и плейсхолдер — первое сообщение и подсказка в поле ввода
- Стартовые вопросы-подсказки — кликабельные примеры, с которых посетителю проще начать диалог
Шаг 6. Выберите цель канала
Цель канала превращает универсального помощника в специалиста под задачу. Доступны варианты:
- Обычный помощник — консультации и ответы на вопросы
- Продажи — агент ведёт к покупке и собирает заявки
- Поддержка — помогает разобраться и снимает нагрузку с саппорта
- Запись-бронирование — собирает данные для записи на услугу
Рядом — поле дополнительных инструкций канала: опишите оффер, тон и что именно продаёте. Так агент на сайте становится продавцом, который квалифицирует клиентов, а не просто справочником.
Шаг 7. Включите проактивные триггеры
Проактивный чат-бот не ждёт, пока посетитель сам откроет окно, а сам начинает диалог в нужный момент. Настройте авто-открытие чата или тизер-приглашение по одному из условий:
- По времени на странице (например, через 20 секунд)
- По exit-intent — когда посетитель уводит курсор к закрытию вкладки
- По совпадению URL — только на нужных страницах (например, на карточке товара)
- По N-му визиту — для вернувшихся посетителей
Куда попадают заявки: блок «Действия»
Сбор заявок настраивается отдельно — не в Шаге 6, а в шаге «Настройки» агента, в блоке «Действия». Там вы добавляете действие и описываете словами, когда агенту его вызвать («когда клиент оставил имя и телефон — отправь заявку»). Доступные типы:
- Мини-CRM (из коробки, без настройки) — заявка сохраняется в базу и вам приходит письмо о новом лиде
- Лид в Bitrix24 — заявка падает сделкой в вашу CRM
- Лид в amoCRM — то же для amoCRM
- HTTP-вебхук — заявка уходит в вашу собственную систему в нужном формате
После настройки обязательно нажмите «Тест» — сделаете живой пробный вызов и убедитесь, что заявка доходит. Подробнее о заявках и аналитике — в гайде про мини-CRM ИИ-агента.
Где смотреть диалоги, заявки и аналитику
Из Шага 6 ведёт кнопка «Диалоги, заявки и аналитика каналов» — это единый инбокс внешних диалогов. Слева список переписок с иконкой канала, в центре — тред, справа — карточка контакта и заявки. Оттуда же оператор может перехватить диалог: как только человек ответит вручную, ИИ ставится на паузу, а кнопка «Вернуть ИИ» возобновляет автопилот. Здесь же — воронка «диалог → лид», конверсия и расход нейронов по дням.
Публичная страница вместо виджета
Если сайта нет или нужно быстро дать ссылку в соцсети — включите канал «Публичная страница». Вы получите готовую ссылку вида /a/<токен> на страницу с вашим агентом: ничего вставлять в код не нужно. Удобно для Instagram, TikTok, рассылок и QR-кодов. Виджет и публичную страницу можно использовать одновременно.
Частые вопросы
Как добавить ИИ-агента на сайт без программиста?
Нужно вставить одну строку embed.js перед закрывающим тегом </body>. Если у вас конструктор сайтов (Tilda, WordPress и т.п.) — вставьте её в блок «HTML-код» или в подвал сайта. Всё остальное — брендинг, цель, сбор заявок — настраивается кликами в редакторе агента, без кода.
На каком тарифе доступен виджет чат-бота?
Внешние каналы, включая виджет на сайт, доступны с тарифа Pro и выше. Также на балансе воркспейса нужны нейроны — за их счёт агент отвечает посетителям. Если нейроны закончатся или тариф ниже Pro, посетитель увидит аккуратное «агент временно недоступен» без раскрытия причины.
Куда попадают заявки, которые собрал агент?
Куда угодно из четырёх вариантов: во встроенную мини-CRM с письмом вам, в Bitrix24, в amoCRM или в вашу систему через HTTP-вебхук. Это настраивается в блоке «Действия» в шаге «Настройки» агента. Все диалоги и заявки также видны в инбоксе каналов с аналитикой конверсии.
Виджет принимает голосовые и файлы?
Да. Посетитель может отправить голосовое (агент распознает его в текст), документы (PDF, DOCX, XLSX, CSV, TXT), картинки и фото-альбомы. Агент автоматически определяет, умеет ли выбранная модель «видеть» изображения и читать PDF нативно, и отвечает по содержимому.
Чем ИИ-агент отличается от обычного чат-бота?
Обычный чат-бот работает по жёсткому сценарию с кнопками и «не понимает» вопрос вне скрипта. ИИ-агент отвечает свободным текстом на любой вопрос, ведёт живой диалог, читает присланные файлы и голосовые, сам решает, когда собрать заявку или позвать оператора — и делает это от лица вашего бренда.
Можно ли монетизировать доступ к агенту на сайте?
Да — можно продавать платный доступ подписчикам через блок «Продажа доступа»: деньги идут напрямую вам через вашу кассу ЮKassa. Подробности — в гайде как продавать доступ к ИИ-агенту.