Каналы связи

Чат на сайте (виджет)

Как поставить чат ReplAI на сайт: код вставки, разрешённые домены, проверка и подключение оператора.

Виджет — это окно чата в углу вашего сайта. Клиент пишет прямо со страницы товара, отвечает агент, а при необходимости в разговор подключается ваш сотрудник.

Раздел в кабинете: Каналы → Чат на сайте.

Установка

Есть два пути: магазины на OpenCart подключаются автоматически через расширение, любой другой сайт — вставкой кода в шаблон.

Магазин на OpenCart — автоматически

Код можно не вставлять руками: расширение ReplAI Feed (версия 1.2.0 и новее) добавляет его на все страницы само.

Откройте Каналы → Чат на сайте и включите канал, если он выключен.
Скопируйте код из блока Подключение — модулю нужен только ключ агента (строка вида agent_01ABC…), но можно вставить и весь код целиком, ключ выделится сам.
В админке OpenCart откройте настройки модуля ReplAI Feed, в секции «Виджет чата на сайте» поставьте «Виджет на сайте: Включено», вставьте скопированное и нажмите Сохранить.
Обновите любую страницу магазина — кнопка чата появится в углу.

Пошагово с установкой самого расширения — Подключение OpenCart, шаг 7. Выключили тумблер в модуле — виджет исчез со всех страниц.

Любой другой сайт — вставить код за 5 минут

Откройте Каналы → Чат на сайте и включите канал, если он выключен.
Скопируйте код из блока Подключение — это три строки: скрипт, стили и запуск виджета с ключом вашего агента.
Вставьте код в шаблон сайта перед закрывающим тегом </body> — так, чтобы он попадал на все страницы.
Обновите сайт и убедитесь, что кнопка чата появилась в углу.

Код одинаковый для всех, отличается только ключ агента (agent_01… — ID агента, он же виден в адресе его страницы в кабинете):

<script src="https://chat.replai.kg/bundle.js"></script>
<link rel="stylesheet" href="https://chat.replai.kg/main.css">
<script>new window.RWLiveChat({ agent_key: 'agent_01ABC…' })</script>

Сайт сам кладёт товары в корзину из чата — добавьте cart: true: new window.RWLiveChat({ agent_key: 'agent_01ABC…', cart: true }) и обработчик из раздела Карточки товаров и корзина.

Куда именно вставлять код, зависит от вашей CMS:

WordPress — тема → footer.php либо плагин для вставки скриптов;
Tilda — Настройки сайта → Ещё → HTML-код для вставки внутрь <body>;
OpenCart без расширения — админка → Дизайн → Редактор шаблонов → footer.twig (но проще поставить расширение, см. выше);
самописный сайт — общий шаблон страницы (layout).

Весь порядок подключения своего сайта — фид каталога, чат, «В корзину» из чата и разметка товара — Свой сайт — подключение.

Код не содержит секретов: в нём только публичный ключ агента, его можно смело держать в исходниках страницы.

Когда агент предлагает товары, он показывает их не списком в тексте, а карточками под ответом — до четырёх, лентой: две видны целиком, остальные покупатель листает вбок (пальцем или стрелками по краям). На карточке — фото, название с цветом и размером и цена. На фото — скидка в процентах, если у товара есть старая цена; под ценой — «Под заказ» или «Нет в наличии», у товаров в наличии этой строки нет. Фото на белом фоне ложится на светло-серую плитку ровно, без белой рамки. Если в фиде у товара есть url, фото и название открывают страницу товара: ваш сайт — в той же вкладке, чат после перехода остаётся с перепиской.

Кнопку «В корзину» — белую, с сумкой в углу фото; при наведении на карточку на ней появляется подпись — включает сайт, который умеет класть товар в свою корзину. На OpenCart это делает расширение версии 1.5.0 и новее — ничего настраивать не нужно.

На своём сайте кнопку включает опция cart: true в коде вставки и обработчик события rw-live-chat:addToCart. Виджет присылает товар, а ваш код кладёт его в корзину и возвращает результат:

<script>new window.RWLiveChat({ agent_key: 'agent_01ABC…', cart: true })</script>
<script>
document.addEventListener('rw-live-chat:addToCart', function (event) {
    var product = event.detail.product
    event.preventDefault() // событие обработает этот сайт
    event.detail.waitUntil(
        fetch('/cart/add', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: product.external_id, quantity: event.detail.quantity })
        }).then(function (response) {
            if (!response.ok) throw new Error('Этот размер закончился')
            return { checkout_url: '/checkout' } // куда вести оформлять заказ
        })
    )
})
</script>

Поле `event.detail`	Что в нём
`product.external_id`	`external_id` вариации из вашего фида — по нему вы находите товар у себя
`product.name`, `product.variant`	Название и цвет с размером одной строкой
`product.price`	Цена на момент показа карточки
`product.url`	Страница товара из фида или `null`
`product.variant_id`, `product.product_id`	Номера вариации и товара в ReplAI
`quantity`	Сколько положить — сейчас всегда 1
`waitUntil(promise)`	Передайте обещание: пока оно выполняется, на кнопке крутится индикатор; выполнилось — галочка и «Добавлено в корзину» под карточкой; отклонено — под карточкой текст ошибки (`message` объекта `Error`)

Когда товар лёг в корзину, виджет пишет в чат от имени покупателя «Добавлено в корзину: …», и агент отвечает: подтверждает, может предложить подходящее к этому товару и даёт кнопку «Оформить заказ». Адрес для неё берётся из обещания: выполните его объектом { checkout_url: '…' } — полным адресом или путём от вашего сайта, как /checkout в примере. Без него агент подскажет оформить заказ в корзине сайта.

Кнопка есть только у товаров из вашего фида (с external_id) и не у тех, что нет в наличии.
Не вызвали preventDefault() — виджет откроет страницу товара, чтобы покупатель положил его в корзину сам.
Вызвали preventDefault(), но не waitUntil — виджет сразу покажет галочку.

Помощь на странице товара

Когда покупатель рассматривает товар, виджет сам предлагает помощь: над строкой чата появляется карточка с фото и названием товара, «Есть вопрос про этот товар?» и готовыми вопросами — «Чем он хорош?», «Есть дешевле?», «Когда доставите?» (для товара под заказ или нет в наличии — свои). Нажатый вопрос уходит в чат вместе с названием товара, и агент сразу понимает, о чём речь.

Карточка не навязывается:

появляется через 8 секунд на странице товара (на телефоне — через 12) и только после того, как человек прокрутил страницу или подвигал мышью;
не встаёт поверх открытого чата и начатого вопроса;
на каждый товар — один раз за визит, не больше трёх товаров; закрыл крестиком — до конца визита больше не появится;
сама уходит через 30 секунд или когда покупатель пролистал страницу дальше.

Включено по умолчанию. Выключить можно в Каналы → Чат на сайте, вкладка «Настройки», строка «Помощь на странице товара».

Товар виджет узнаёт по разметке страницы для поисковиков — schema.org Product. Она есть почти у всех магазинов на CMS, в том числе у тем OpenCart. Если у вас свой сайт и карточка не появляется, добавьте на страницу товара такой блок — он же помогает и в поиске Google:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Куртка North, красная",
  "image": "https://myshop.kg/image/north-red-1.jpg",
  "offers": {
    "@type": "Offer",
    "price": "5200",
    "priceCurrency": "KGS",
    "availability": "https://schema.org/InStock"
  }
}
</script>

availability: InStock — в наличии, PreOrder или BackOrder — под заказ, OutOfStock — нет в наличии. От него зависят готовые вопросы.

Фото от покупателя

У строки чата есть скрепка: покупатель прикладывает фото — например, снимок товара «есть такое же?» или фото брака — и может дописать к нему вопрос. Агент смотрит на сам снимок: описывает, что на фото, ищет похожее в каталоге. В Диалогах кабинета фото видно миниатюрой.

За раз — до 3 фото, каждое до 5 МБ: JPEG, PNG или WebP. Фото с iPhone виджет перекодирует сам. PDF и другие файлы покупатель из чата не отправляет — их присылает магазин: оператор прикладывает файл к ответу в Диалогах.
Фото хранятся 180 дней, потом удаляются сами. В переписке остаются пометка «фото» и ответ агента.
Фото входит в объём ответа, как вопрос и история диалога: примерно 1–1,5 токена ReplAI на снимок с поправкой на расход модели. Повторно не оплачивается: в следующих ответах агент видит только пометку.

Включено по умолчанию. Выключить можно в Каналы → Чат на сайте, вкладка «Настройки», строка «Фото от покупателей».

Скрепки нет, если переключатель выключен или модель агента не видит картинки (DeepSeek) — тогда покупатель не отправит фото в пустоту.

В WhatsApp и Instagram фото тоже доходит до агента, там свой переключатель — см. WhatsApp. В Telegram агент фото пока не разбирает.

Звонок из чата

Если звонки включены, в шапке чата появляется трубка. Покупатель нажимает её, разрешает доступ к микрофону и говорит с агентом голосом: агент отвечает, ищет товары в каталоге, а если покупатель просит человека — передаёт разговор оператору. Перед звонком и во время него покупатель видит строку «Вы говорите с ИИ-помощником. Голос обрабатывает OpenAI».

Разговор остаётся в переписке: после звонка его реплики появляются в чате с пометкой «из звонка» — и у покупателя, и в кабинете в Диалогах. Свернул или закрыл чат — звонок завершается.

Включают звонки в Каналы → Чат на сайте, вкладка «Настройки», переключатель «Звонки в чате» — на тарифах Pro и Business. Стоимость минуты и лимиты — Тарифы и токены.

Трубки в чате нет, если:

переключатель выключен или тариф Free;
на балансе меньше токенов, чем на минуту разговора;
сайт открыт не по https:// — без него браузер не даёт микрофон;
сайт запрещает микрофон заголовком Permissions-Policy: microphone=() — разрешите его своему сайту: microphone=(self);
браузер слишком старый для звонков.

Разрешённые домены

Блок Разрешённые домены решает, на каких сайтах виджет будет работать.

Пусто — виджет работает на любом сайте, куда вставлен код. Удобно для быстрого старта.
Список доменов — виджет запускается только на них. Если кто-то скопирует ваш код себе на сайт, чат у него не откроется и ваши токены не потратятся.

Добавляйте домен в том виде, в котором он в адресной строке: myshop.kg. Тестируете локально — добавьте и адрес разработки, иначе чат не откроется.

Проверьте, включён ли канал в кабинете — выключенный виджет не отрисуется.
Проверьте домен в списке разрешённых: сайт открыт по www.myshop.kg, а в списке только myshop.kg — добавьте оба.
Проверьте, что код на странице: откройте исходный код страницы (Ctrl+U) и найдите RWLiveChat. Нет — код вставлен не в тот шаблон или кэш сайта не сброшен.
Загляните в консоль браузера (F12 → Console): ошибки загрузки скрипта почти всегда означают, что сайт блокирует внешние скрипты.
Магазин на OpenCart с расширением: откройте настройки модуля ReplAI Feed и проверьте секцию «Виджет чата на сайте» — тумблер «Включено», в поле «Ключ агента» тот же ключ, что в кабинете (Каналы → Чат на сайте). После изменения нажмите «Сохранить» и обновите страницу магазина без кэша (Ctrl+F5).

Не сходится — напишите в поддержку ReplAI и приложите адрес страницы, где виджет должен стоять.

Чат на сайте (виджет)

Установка

Магазин на OpenCart — автоматически

Любой другой сайт — вставить код за 5 минут

Карточки товаров и корзина

Помощь на странице товара

Фото от покупателя

Звонок из чата

Разрешённые домены

Превью

Как подключается оператор

Если чат не появился