Чатты кыстаруу (iframe)

Колдонуунун эки варианты

POST /v1/iframe: WazzaBee чатын кыстаруу

Бул эндпоинт WazzaBee чатын CRM системаңызга же каалаган веб-тиркемеге <iframe> аркылуу кыстарууга мүмкүндүк берет. React, Vue, Angular же башка каалаган фреймворкто жазылган өзүңүздүн CRM үчүн эң ылайыктуу.

URL

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

Аталыштар

Authorization: Bearer API_АЧКЫЧЫҢЫЗ
Content-Type: application/json

Сурамдын денесинин параметрлери

Көрсөтүү режимдери (scope)

global: бардык чаттар

WazzaBee негизги интерфейсиндегидей маектердин толук тизмесин көрсөтөт. CRM системаңыздагы «Чаттар» деген өзүнчө барак үчүн ылайыктуу.

card: белгилүү бир контакттын чаты

Маектерди контакттын телефону боюнча чыпкалайт. Кардардын карточкасына кыстаруу үчүн эң ылайыктуу: менеджер ушул кардар менен болгон кат алышууну гана көрөт.

Маектер тизмесинин жогору жагындагы UI-аракеттер

iframe ичинде чаттар тизмесинин үстүндө башкаруу баскычтарынын орнотулган топтому бар. Алардын көрүнүшү тандалган scope маанисине жараша болот: UI CRM'деги менеджердин иш сценарийине өзү ыңгайлашат:

Сурамдардын мисалдары

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"
}

Чаттын тили

Кыстарылган чат төрт тилдин биринде көрсөтүлөт: орус (ru), англис (en), казак (kk) же кыргыз (ky). Тил төмөнкү тартипте тандалат:

1. чаттын дарегиндеги lang параметри, мисалы https://app.wazzabee.com/chat/embed/ТОКЕН?lang=en;
2. POST /v1/iframe аркылуу сессия түзүүдө берилүүчү options.lang талаасы;
3. API ачкычынын ээсинин WazzaBee кабинетиндеги тил;
4. булардын бири да берилбесе, чат орус тилинде ачылат.

Колдонуучуңуздун тилин options.lang талаасында берүү эң ыңгайлуу: анда жооптогу шилтемени <iframe> ичине өзгөртпөстөн коё бересиз.

{
  "user": { "id": "manager-42", "name": "Alex" },
  "scope": "global",
  "options": { "lang": "en" }
}

Фронтендге кыстаруу

Жөнөкөй 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;
  if (event.data?.source !== "wazzabee") return;

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

  switch (type) {
    case "WZ_READY":
      console.log("WazzaBee чаты жүктөлдү, user:", data.userId, "scope:", data.scope);
      break;

    case "WZ_CHAT_OPENED":
      // Сунушталат: data.phone, data.name
      console.log("Маек ачылды:", data.conversationId, "телефон:", data.phone);
      // CRM'деги кардардын карточкасын жаңыртса болот
      break;

    case "WZ_CHAT_CLOSED":
      console.log("Маек жабылды");
      break;

    case "WZ_MESSAGE_SENT":
      console.log("Менеджер чатка билдирүү жөнөттү:", data.chatId, data.phone);
      // CRM тарыхына жазуу кошсо болот
      break;

    case "WZ_MESSAGE_RECEIVED":
      console.log("Жаңы билдирүү:", data.content);
      console.log("Багыты:", data.direction);
      break;

    case "WZ_MESSAGES_READ":
      console.log("Менеджер чатты окуду:", data.conversationId);
      break;

    case "WZ_CREATE_CONTACT":
      console.log("Контакт түзүү сурамы:", data.phone, data.name);
      // CRM системаңызда контактты автоматтык түрдө түзсө болот
      break;

    case "WZ_CHAT_NOT_FOUND":
      console.warn("Чат табылган жок:", data.phone, "себеби:", data.reason);
      // Мисалы, контакт түзүүнү сунуштаса болот
      break;

    case "WZ_ACTION_NOT_SUPPORTED":
      console.warn("Аракет жеткиликсиз:", data.action, "себеби:", data.reason);
      break;
  }
});

Чатты CRM системаңыздан башкаруу

Алмашуу эки тараптуу: iframe болуп жаткан окуялар тууралуу кабарлап гана тим болбостон, сиз да аны башкара аласыз. iframe'ге source: "crm" талаасы бар postMessage жөнөтүңүз.

Номер сандары боюнча нормалдаштырылат, ошондуктан формат каалагандай болушу мүмкүн: +7 (700) 123-45-67, 77001234567, 87001234567 бирдей иштейт.

iframeRef.current?.contentWindow?.postMessage({
  source: "crm",
  action: "OPEN_CHAT_BY_PHONE",
  phone: "+77001234567",
}, "*");

Сценарий: кардардын карточкасы сол жакта, чат оң жакта

CRM'ге кыстарууда көп кездешкен маселе: оң жакта менеджер кат алышат, сол жакта кардардын карточкасы, товарлардын каталогу, аракет баскычтары турат. Менеджер башка чатка которулганда сол жактагы бөлүк жаңы маектештин маалыматтарын өзү жүктөп алышы керек.

const [activeChat, setActiveChat] = useState(null);

useEffect(() => {
  const handler = (event) => {
    if (event.origin !== "https://app.wazzabee.com") return;
    if (event.data?.source !== "wazzabee") return;

    // Менеджер башка чатка которулду
    if (event.data.event === "WZ_CHAT_OPENED") {
      setActiveChat({
        chatId: event.data.chatId,
        phone: event.data.phone,
        name: event.data.name,
      });
      // Кардардын карточкасын номер боюнча өз CRM системабыздан жүктөйбүз
      loadCustomerCard(event.data.phone);
    }
  };

  window.addEventListener("message", handler);
  return () => window.removeEventListener("message", handler);
}, []);

Тескери багыт: менеджер CRM'де келишимди ачып, дароо кат алышууга өткүсү келет. iframe'ге OPEN_CHAT_BY_PHONE жөнөтүңүз, ошондо чат керектүү маекке өзү которулат.

Мүмкүн болгон каталар

Сессиянын жарактуулук мөөнөтү

• Сессия түзүлгөн учурдан тартып 24 саат жарактуу
• Мөөнөтү бүткөндөн кийин iframe ката көрсөтөт: жаңы токен суроо керек
• Токенди алдын ала жаңыртып турууну сунуштайбыз (мисалы, ар 12 саат сайын)
• CRM'дин ар бир колдонуучусу үчүн өзүнчө сессия түзүлөт

Кардарга кайсы менеджер жооп берди

Сессия түзүүдө user.name талаасында берген атыңыз билдирүүлөрдүн автору болуп эсептелет. Чат лентасындагы ар бир чыгуучу билдирүүнүн астында «WazzaBee'ден · Назерке А.» түрүндөгү кол тамга көрүнөт: ушундайча кат алышуудан кайсы менеджер жооп бергени түшүнүктүү болот. Фамилия баш тамгага чейин кыскартылат.

Кол тамга оператор кыстарылган чаттан жөнөткөндүн баарына коюлат: текстке, файлдарга, үн билдирүүлөрүнө жана WABA үлгүлөрүнө.

Эмнени берүү керек