ИИ чат-бот, онлайн консультант для сайта: виджет чата

Что делает этот ИИ чат-бот

• Главная и ключевая цель данного онлайн консультанта — ПРОДАТЬ!
• Читает и понимает текст текущей страницы (заголовки, описания товаров, цены, условия, отзывы) и формирует ответы на основе реального содержимого сайта, без внешней базы знаний.
• Работает полностью автономно — без участия оператора. Цель: подвести пользователя к оформлению заказа.
• Показывает в чате кнопку «Заполнить форму» и, ориентируясь на атрибут data-form="FORM_ID", плавно прокручивает страницу к вашей нативной форме.
• Лёгкая установка: JS + PHP, разворачивается на любом хостинге и в любом стеке.

Как это работает: контент → ИИ → чат → форма

1. Сбор контента страницы. Скрипт на стороне клиента собирает текст из DOM (заголовки, описания, упоминания условий и цен).
2. Очистка шума. Отбрасываются технические элементы, меню и служебные блоки.
3. Передача в ИИ (PHP endpoint). Текст отправляется для формирования контекста ответа.
4. Генерация ответа. Бот отвечает по сути, строго в рамках содержимого текущей страницы.
5. Призыв к действию. Вставляет кнопку «Заполнить форму». Нажатие — плавный скролл к форме с указанным FORM_ID.
6. Заполнение нативной формы. Лид оформляется стандартным бэкендом сайта, без ломки текущей логики вашего сайта.

Почему это увеличивает конверсию

Контекст ровно этой страницы

Бот не фантазирует, а опирается на конкретные тексты на странице, поэтому отвечает в терминах ваших товаров, цен и условий — понятно и по делу.

Нативная форма = меньше трения

Вместо своих форм бот переводит пользователя к вашей форме заказа. Никаких лишних шагов: только хардкор, только продажи!

Полный автопилот

Нет ожидания оператора. Пользователь получает ответ сразу и идёт оформлять заказ. Скрипт нацелен на продажу товаров с текущей страницы.

Быстрый старт: установка за 5–10 минут

1) Подключите виджет

Вставьте скрипт на страницу перед </body>:

<link rel="stylesheet" href="widget.css" />
<script defer src="widget.js"></script>

<div
  id="bc-ai-chat"
  data-photo="https://medongroup-odc.ru/upload/iblock/818/ckbhnmn6ttaiuxl3uhgtux1897noi3mt.jpg"
  data-endpoint="chat.php"
  data-form="#form"
  data-name="Надежда"
  data-price="0"
></div>

Параметры:

• data-form="order_form" — ID вашей формы на странице (пример: <form id="order_form">…</form>).
• data-photo: ссылка на фото консультанта в виджете онлайн чата.
• data-name: имя оператора в виджете и чате.
• data-price: Цена товара на странице. Например 99 BGN.

2) Обозначьте форму на странице

<form id="order_form" method="post" action="/api.php">
  <input type="text" name="name" required placeholder="Ваше имя">
  <input type="tel"  name="phone" required placeholder="Телефон">
  <button type="submit">Отправить заявку</button>
</form>

3) Замените api ключ для Open Ai

В файле chat.php в третьей строке:
$OPENAI_API_KEY
Замените api ключ на свой, в этой переменной.

Пример UX диалога

Пользователь задаёт вопрос о товаре → бот отвечает по информации на странице → предлагает «Заполнить форму» → плавно прокручивает к нативной форме → пользователь отправляет заявку.

Настройки и кастомизация

Триггеры показа

• Автостарт «умный»: через N секунд на странице, по скроллу, при попытке закрыть вкладку (exit-intent).
• Ручной запуск по клику на иконку.

Тексты приветствия

• Короткое приветствие на языке страницы (напр., data-lang="ru|en").

Ограничение длины ответов

• Рекомендуется держать ответы в 2–4 коротких абзацах + CTA.

Технические детали

• Клиент: vanilla JS.
• Сервер: PHP endpoint.
• Производительность: можно кэшировать очищенный текст страницы, чтобы не собирать DOM каждый раз.

Частые вопросы (FAQ)

Бот использует внешнюю базу знаний?
Нет. Он обучается на тексте текущей страницы: заголовки, описания, цены, условия — всё берётся с сайта.

Нужен оператор или человек для диалога?
Нет. Скрипт полностью автономный и нацелен на продажу товаров, представленных на странице.

Как он собирает лиды?
В чате появляется кнопка «Заполнить форму». При нажатии бот прокручивает страницу к вашей нативной форме, которую обрабатывает ваш бэкенд.

Сложно ли внедрить?
Нет. Подключаете JS, указываете data-form и настраиваете PHP endpoint. Скрипт работает на любом сайте.

Можно ли сделать мультиязычно?
Да. Скрипт сам определяет язык браузера клиента и общается на этом языке.

Готов к запуску?

Хотите протестировать на своём лендинге? Скачайте и подключите скрипт. Все элементарно, Ватсон!