Перейти к содержимому
ReplAI
en
Разделы документации

Каталог на сайте

Свой сайт — подключение

Как подключить ReplAI к сайту без OpenCart: фид каталога, чат на сайте, «В корзину» из чата и помощь на странице товара — по шагам для разработчика.

Если сайт не на OpenCart — самописный, на WordPress, Bitrix или другом движке, — подключение делает ваш разработчик. Всё, что умеет расширение OpenCart, доступно и вам: агент знает каталог, показывает товары карточками, кладёт их в корзину сайта и сам предлагает помощь на странице товара.

Подключение — четыре шага. Первые два обязательны, остальные добавляют продажи:

Шаг Что даёт Нужен ли
1. Фид каталога Агент знает товары, цены, остатки, акции и условия доставки Да
2. Код чата Окно чата в углу сайта Да
3. «В корзину» из чата Покупатель кладёт товар в корзину сайта прямо из карточки в чате, агент ведёт к оформлению Желательно
4. Разметка товара Чат сам предлагает помощь, пока покупатель рассматривает товар Желательно, у многих CMS уже есть

Шаг 1. Фид каталога

Сделайте на сайте адрес, который отдаёт каталог в формате ReplAI Feed — JSON с товарами, акциями и информационными страницами. ReplAI сам забирает его каждые 30 минут, отправлять ничего не нужно.

Самое короткое рабочее тело — одна запись на каждую вариацию (цвет × размер):

{
  "snapshot": true,
  "products": [
    {
      "external_id": "42-red-M",
      "group_id": "42",
      "name": "Куртка зимняя North",
      "price": "4500.00",
      "quantity": 7,
      "color": "красный",
      "size": "M",
      "images": ["https://myshop.kg/image/north-red-1.jpg"],
      "url": "https://myshop.kg/kurtka-north"
    }
  ]
}

Три поля важны для следующих шагов:

  • external_id — постоянный id вариации у вас. Его же ваш сайт получит, когда покупатель нажмёт «В корзину» в чате (шаг 3): по нему вы найдёте товар у себя.
  • url — страница товара. Фото и название карточки в чате открывают её.
  • images — фото, главное первым. Без них карточка в чате будет со значком вместо фото.

Подключите адрес в кабинете: Товары → Источники → Товары с вашего сайта → Подключить, вкладка «Другой сайт». Каталог у каждого агента свой: если агентов несколько, сначала выберите нужного вверху страницы.

Все поля, лимиты, большие каталоги по страницам и коды ошибок — Формат фида (ReplAI Feed).

Шаг 2. Код чата на сайте

Вставьте в общий шаблон сайта перед </body>, чтобы код был на всех страницах:

<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…', cart: true })</script>

agent_01ABC… замените ключом своего агента — это ID агента, тот же код с готовым ключом есть в кабинете: Каналы → Чат на сайте, блок Подключение. cart: true включает «В корзину» (шаг 3); без обработчика корзины кнопка просто откроет страницу товара. В блоке Разрешённые домены добавьте адрес сайта — и с www., и без, если сайт открывается по обоим.

Сайт должен открываться по https://: без него браузер не даст чату микрофон для голосовых и звонков.

Подробнее — Чат на сайте.

Шаг 3. «В корзину» из чата

Карточки товаров в чате получают кнопку «В корзину», когда сайт берётся класть товар в свою корзину. Для этого нужны две вещи.

Опция cart: true в строке запуска чата из шага 2:

<script>new window.RWLiveChat({ agent_key: 'agent_01ABC…', cart: true })</script>

Обработчик события rw-live-chat:addToCart. Чат присылает товар, ваш код кладёт его в корзину и отвечает, получилось ли:

<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) { return response.json() })
            .then(function (result) {
                // Отказ магазина — его же словами под карточкой в чате.
                if (result.error) throw new Error(result.error)
                // Обновите значок корзины в шапке сайта, иначе покупатель
                // увидит товар в корзине только после перезагрузки страницы.
                updateHeaderCart(result)
                return { checkout_url: '/checkout' } // куда вести оформлять заказ
            })
    )
})
</script>

/cart/add, result.error и updateHeaderCart здесь — для примера: подставьте свой адрес добавления в корзину, свой ответ и свою функцию обновления корзины в шапке.

Что видит покупатель:

  1. На кнопке крутится индикатор, пока выполняется ваш запрос.
  2. Получилось — на кнопке галочка, под карточкой «Добавлено в корзину». В чат уходит реплика «Добавлено в корзину: …», и агент отвечает: подтверждает, предлагает подходящее к товару и даёт кнопку «Оформить заказ» на адрес из checkout_url.
  3. Не получилось — под карточкой текст ошибки, который вы передали в Error: «Этот размер закончился», «Выберите цвет на странице товара».

Если обработчика нет или он не вызвал preventDefault(), кнопка просто открывает страницу товара. Все поля события и правила — Карточки товаров и корзина.

Шаг 4. Разметка страницы товара

На странице товара чат сам предлагает помощь: карточка с фото, названием и готовыми вопросами — «Чем он хорош?», «Есть дешевле?», «Когда доставите?». Товар он узнаёт по разметке для поисковиков schema.org Product. Многие CMS и темы уже выводят её; если её нет, добавьте в шаблон страницы товара:

<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": "4500",
    "priceCurrency": "KGS",
    "availability": "https://schema.org/InStock"
  }
}
</script>

availability: InStock — в наличии, PreOrder или BackOrder — под заказ, OutOfStock — нет в наличии. От него зависят готовые вопросы. Та же разметка помогает сайту и в поиске Google. Подробнее — Помощь на странице товара.

Делать больше ничего не нужно: на какой странице сейчас покупатель, агент знает и так — чат сообщает ему адрес и заголовок страницы.

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

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

Проверка

  1. Фид открывается снаружи и отдаёт JSON: curl -s "https://мой-магазин.kg/replai-feed.json" | head -c 400.
  2. Товары пришли: в кабинете на странице Товары → Источники видно, сколько товаров загружено, и нет строки «Последняя ошибка».
  3. Чат на месте: обновите сайт — в углу строка чата. Спросите про товар: агент отвечает и показывает карточки с фото и ценой, фото открывает страницу товара.
  4. Корзина: нажмите «В корзину» на карточке — галочка, «Добавлено в корзину», товар появился в корзине сайта и в значке в шапке, агент дал «Оформить заказ», и она ведёт на ваше оформление.
  5. Страница товара: откройте любой товар, прокрутите страницу — через несколько секунд над строкой чата появится карточка «Есть вопрос про этот товар?».

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