Окно чатов

В статье рассказываем, как внедрить окно чатов Wazzup в свою CRM и настроить работу раскрывающегося списка «Сделки» по событиям.

Список «Сделки» — инструмент в окне чата с контактом, который:

• позволяет пользователю просматривать список открытых и закрытых сделок с выбранным контактом, в которых он ответственный и переходить на их страницы в CRM;
• дает возможность пользователю быстро перейти на страницу создания сделки в CRM.

Мы рекомендуем работать со списком «Сделки» с помощью вебхуков. А если вебхуки не подходят — по событиям.

Сейчас через окно чатов по API нельзя создать диалог MAX, Telegram по номеру телефона. Чтобы создать чат MAX, воспользуйтесь методом отправки сообщений, чтобы создать чат Telegram — методом отправки сообщений или юзернеймом. После вы получите id чата, с помощью которого сможете открывать диалоги MAX, Telegram в iframe.

Как внедрить окно чатов Wazzup в свою CRM

POST /v2/iframe-links/chats
│
├── user
│ └── id *
├── author_name
├── scope *
├── chats[]
│ ├── contact_name
│ ├── chat_type *
│ ├── chat_id *
│ ├── username *
│ └── profile_id
├── active_chat
│ ├── channel_id
│ ├── chat_type *
│ ├── chat_id *
│ └── username *
├── use_events
│ ├── deals
│ └── messages
└── client_type

user (объект)

chats (объект)

active_chat (объект)

use_events (объект)

Если контакта с указанными chat_type и chat_id нет в базе данных Wazzup — при открытии его в карточке контакта CRM-системы он будет создан. В качестве имени будет использовано значение contact_name или id, если первое отсутствует.

Пример запроса для iframe в карточке

{
"user_id": "crm-user-id-123",
"author_name": "Иван Петров",
"scope": "card",
"chats": [
{
"contact_name": "Петр Сидоров",
"chat_type": "whatsapp",
"chat_id": "79111234567"
},
{
"contact_name": "Петр Сидоров",
"chat_type": "telegram",
"username": "my_tg_user"
},
{
"contact_name": "Петр Сидоров",
"chat_type": "telegram",
"chat_id": "1670185"
}
],
"active_chat": {
"channel_id": "string",
"chat_type": "whatsapp",
"chat_id": "79111234567"
},
"use_events": {
"deals": false,
"messages": false
},
}

Пример минимального запроса для iframe со всеми чатами пользователя

{
"user_id": "crm-user-1",
"scope": "global"
}

Пример запроса для создания чата в Telegram по username

{
"user": {
"id": "crm-user-id-123",
"name": "Иван Петров"
},
"scope": "card",
"filter": [
{
"chatType": "telegram",
"username": "best_client"
}]

}

Успешный ответ

200

В ответе придет json со ссылкой для открытия окна чатов.

{
"data": {
"link": "https://app.wazzup24.com/1234-1234/chat/telegram/1670185301/123?token=token"
},
"meta": {
"timestamp": 1764849838
}
}

Если открываете ссылку в iframe, добавьте в тег атрибут allow="microphone *; clipboard-write *".

Указать microphone нужно, чтобы из окна с чатами можно было записывать голосовые сообщения. Если этого не сделать, пользователь увидит ошибку при нажатии на значок микрофона для записи.

Передавать clipboard-write необходимо, чтобы в нашем iframe правильно работало копирование в буфер обмена. Например, пользователь мог по кнопке скопировать код ошибки из уведомления.

<iframe src="ссылка" allow="microphone *; clipboard-write *" ></iframe>

Ошибки

Параметры ответа в ошибках

Пример ошибки

{
"code": "VALIDATION_FAILED",
"title": "Validation Failed",
"status": 400,
"detail": "One or more fields did not pass validation.",
"instance": "/v2/iframe-links/chats",
"method": "POST",
"errors": [
"user_id should not be empty",
"scope must be a valid enum value"
]
}

400

Возможные коды ошибок для статуса 400

401

Возможные коды ошибок для статуса 401

403

Возможные коды ошибок для статуса 403

500

Возможные коды ошибок для статуса 500

Как настроить работу со списком «Сделки» по событиям

События сигнализируют о том, что нужно:

• создать новую сделку,
• показать сущность, которую пользователь хочет открыть,
• создать новый контакт.

Пользователь нажимает на + в списке «Сделки», чтобы создать сделку

Что значит: нужно создать новую сделку с теми параметрами, которые передал iframe.

Название события: WZ_CREATE_ENTITY

Что содержит:

{body}
├── type
└── data
    ├── chatType
    ├── chatId
    ├── channelId
    ├── userId
    └── integrationId

data (объект)

Пример события:

{
type: 'WZ_CREATE_ENTITY',
data: {
chatType: whatsapp,
chatId: 79998887766,
channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
userId: test_id,
integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222
}

После создания сделки нужно передать данные о новой сделке из CRM в Wazzup.

Пользователь открывает сделку, контакт или другую сущность в списке «Сделки»

Что значит: пользователю нужно показать сделку, контакт или другую сущность, с параметрами, которые передает iframe.

Название события: WZ_OPEN_ENTITY

Что содержит:

WZ_OPEN_ENTITY
├── type
└── data
    ├── chatType
    ├── chatId
    ├── channelId
    ├── userId
    ├── integrationId
    └── entity
        ├── closed
        ├── id
        ├── link
        ├── name
        └── responsibleUserName

data (объект)

entity (объект)

Пример события

{
type: 'WZ_OPEN_ENTITY',
data: {
chatType: whatsapp,
chatId: 79998887766,
channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
userId: test_id,
integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222,
entity: {
closed: false,
id: clientId3,
link: #,
name: ТестоваяСделка,
responsibleUserName: ТестовыйПользователь
}
}
}

Сделали html-страницу, которая служит примером того, как можно отлавливать события iframe. Как пользоваться:

1. Сгенерируйте ссылку на iframe методом API.
2. Вставить эту ссылку в поле ввода на html-странице.
3. Отобразится интерфейс чатов. Вы сможете потыкать на нужные кнопки чтобы вызвать событие — над iframe появятся данные, которые в этом событии пришли.

*Запрещены и признаны экстремистскими на территории РФ