Встраивание чата (iframe)

POST /v1/iframe — встраивание чата WazzaBee

Этот эндпоинт позволяет встроить чат WazzaBee в вашу CRM-систему или любое веб-приложение через <iframe>. Идеально подходит для кастомных CRM на React, Vue, Angular или любом другом фреймворке.

URL

POST https://api.wazzabee.com/api-gateway/v1/iframe

Заголовки

Authorization: Bearer ВАШ_API_КЛЮЧ
Content-Type: application/json

Параметры тела запроса

Режимы отображения (scope)

global — все чаты

Показывает полный список диалогов, как в основном интерфейсе WazzaBee. Подходит для отдельной страницы «Чаты» в вашей CRM.

card — чат конкретного контакта

Фильтрует диалоги по телефону контакта. Идеально для встраивания в карточку клиента — менеджер видит только переписку с этим клиентом.

Примеры запросов

Пример 1. Все чаты (scope=global)

curl -X POST "https://api.wazzabee.com/api-gateway/v1/iframe" \
  -H "Authorization: Bearer ВАШ_API_КЛЮЧ" \
  -H "Content-Type: application/json" \
  -d '{
    "user": {
      "id": "manager-42",
      "name": "Алексей Менеджер"
    },
    "scope": "global"
  }'

Пример 2. Чат конкретного клиента (scope=card)

curl -X POST "https://api.wazzabee.com/api-gateway/v1/iframe" \
  -H "Authorization: Bearer ВАШ_API_КЛЮЧ" \
  -H "Content-Type: application/json" \
  -d '{
    "user": {
      "id": "manager-42",
      "name": "Алексей Менеджер"
    },
    "scope": "card",
    "filter": {
      "phone": "77001234567"
    }
  }'

Пример 3. С ограничением по каналам

curl -X POST "https://api.wazzabee.com/api-gateway/v1/iframe" \
  -H "Authorization: Bearer ВАШ_API_КЛЮЧ" \
  -H "Content-Type: application/json" \
  -d '{
    "user": {
      "id": "manager-42",
      "name": "Алексей Менеджер"
    },
    "scope": "card",
    "filter": {
      "phone": "77001234567",
      "channelIds": ["550e8400-e29b-41d4-a716-446655440000"]
    }
  }'

Успешный ответ (200 OK)

{
  "success": true,
  "url": "https://app.wazzabee.com/chat/embed/a1b2c3d4...64-символьный-токен",
  "token": "a1b2c3d4...64-символьный-токен",
  "expiresAt": "2026-03-13T10:00:00.000Z",
  "scope": "card"
}

Встраивание на фронтенде

Простой HTML

<iframe
  src="https://app.wazzabee.com/chat/embed/ТОКЕН_СЕССИИ"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write"
></iframe>

React-компонент

import { useEffect, useState } from "react";

function WazzaBeeChat({ contactPhone }) {
  const [iframeUrl, setIframeUrl] = useState(null);

  useEffect(() => {
    // Запрос к вашему бэкенду, который проксирует вызов к WazzaBee API
    fetch("/api/wazzabee/iframe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        phone: contactPhone,
        scope: "card"
      })
    })
      .then(res => res.json())
      .then(data => setIframeUrl(data.url));
  }, [contactPhone]);

  if (!iframeUrl) return <div>Загрузка чата...</div>;

  return (
    <iframe
      src={iframeUrl}
      style={{ width: "100%", height: "600px", border: "none" }}
      allow="clipboard-write"
    />
  );
}

События postMessage

iframe отправляет события в родительское окно через window.postMessage. Вы можете слушать их для интеграции с вашей CRM.

Доступные события

Пример обработки событий

window.addEventListener("message", (event) => {
  // Проверяем источник
  if (event.origin !== "https://app.wazzabee.com") return;

  const { type, ...data } = event.data;

  switch (type) {
    case "WZ_READY":
      console.log("Чат WazzaBee загружен");
      break;

    case "WZ_CHAT_OPENED":
      console.log("Открыт диалог:", data.conversationId);
      // Можно обновить карточку клиента в CRM
      break;

    case "WZ_MESSAGE_SENT":
      console.log("Отправлено сообщение:", data.text);
      // Можно добавить запись в историю CRM
      break;

    case "WZ_CREATE_CONTACT":
      console.log("Запрос на создание контакта:", data.phone);
      // Можно автоматически создать контакт в вашей CRM
      break;
  }
});

Возможные ошибки

Время жизни сессии

• Сессия действует 24 часа с момента создания
• После истечения iframe покажет ошибку — нужно запросить новый токен
• Рекомендуем обновлять токен заранее (например, каждые 12 часов)
• Для каждого пользователя CRM создаётся отдельная сессия