В статье рассказываем, как внедрить окно чатов Wazzup в свою CRM и настроить работу раскрывающегося списка «Сделки» по событиям.
Мы рекомендуем работать со списком «Сделки» с помощью вебхуков. А если вебхуки не подходят — по событиям.
Чтобы получить ссылку, по которой откроется окно чатов, необходимо вызвать:
POST https://api.wazzup24.com/v3/iframePOST /v3/iframe
├── user *
│ ├── id *
│ └── name
├── scope *
├── filter[]
│ ├── chatType
│ ├── chatId
│ └── name
├── activeChat
│ ├── channelId
│ ├── chatType
│ └── chatId
└── options
├── clientType
├── useDealsEvents
└── useMessageEvents
| Параметр. Обязательные отмечены * | Тип | Описание |
| user* | object user |
Объект, который содержит информацию о пользователе |
| scope* | String | Контекст, в котором открывается окно, где:
|
| filter | array of objects filter |
Массив объектов с чатами, которые нужно показать. Обязателен, когда scope = card |
| activeChat | object activeChat |
Чат, активный при открытии iFrame |
| options | object options |
Настройки по событиям в iFrame.
Обязателен, если решили создавать контакты и сделки по событиям |
| Параметр. Обязательные отмечены * | Тип | Описание |
| id* | String | ID пользователя в CRM, который открывает окно с чатами |
| name | String |
Если не указано, используется имя CRM-пользователя, id которого передано в user.id |
| Параметр | Тип | Описание |
| chatType | String | Тип чата. Доступные значения:
|
| chatId | String | ID чата (аккаунт контакта в мессенджере):
|
| name | String | Имя контакта |
| Параметр | Тип | Описание |
| channelId | String | Идентификатор канала, c которым нужно открыть активный чат |
| chatType | String | Тип чата. Доступные значения:
|
| chatId | String | Id чата (аккаунт контакта в мессенджере):
|
| Параметр | Тип | Описание |
| clientType | String | Тип CRM. Можно ничего не указывать |
| useDealsEvents | Boolean | Укажите true, если хотите узнавать от iFrame, что надо создать или показать пользователю сделку.
Событие приходит, когда пользователь кликает:
|
| useMessageEvents | Boolean | Укажите true, если хотите узнавать от iFrame, что надо создать новый контакт.
Событие приходит, когда пользователь отвечает на входящее сообщение из нашего iFrame |
Если контакта с указанными chatType и chatId нет в базе данных Wazzup — при открытии его в карточке контакта CRM-системы он будет создан. В качестве имени будет использовано значение name или chatId, если первое отсутствует.
curl --location --request POST 'https://api.wazzup24.com/v3/iframe' \
--header 'Authorization: Bearer c8cf90554027882f912520f454468d27' \
--header 'Content-Type: application/json' \
--data-raw '
{
"user": {
"id": "222555",
"name": "User Name"
},
"scope": "card",
"filter": [
{
"chatType": "whatsapp",
"chatId": "79998887766"
}
],
"activeChat": {
"chatType": "whatsapp",
"chatId": "79998887766"
}
}
'
В ответе придет json со ссылкой для открытия окна чатов.
Если открываете ссылку в iFrame, добавьте в тег атрибут allow="microphone *; clipboard-write *".
Указать "microphone" нужно, чтобы из окна с чатами можно было записывать голосовые сообщения. Если этого не сделать, пользователь увидит ошибку при нажатии на значок микрофона для записи.
Передавать "clipboard-write" необходимо, чтобы в нашем iFrame правильно работало копирование в буфер обмена. Например, пользователь мог по кнопке скопировать код ошибки из уведомления.
<iframe src="ссылка" allow="microphone *; clipboard-write *" ></iframe>
{
"url": "https://12345678.wazzup24.com/chat/0e812899-e25b-4a18-a3e4-d1f5890f9de7?token=${token}"
}
В случае ошибки в ответе поступит json, который содержит свойство error или http-код 500.
{ "error": { "code": "NO_SUCH_ACCOUNT" } }
Мы рекомендуем работать с помощью вебхуков. Но если вебхуки не подходят, используйте события
События сигнализируют о том, что нужно:
Что значит: нужно создать новую сделку с теми параметрами, которые передал iframe.
Название события: WZ_CREATE_ENTITY
Как получать: при генерации ссылки на iframe передайте нам options.useDealsEvents: true
Что содержит:
| Поле | Тип | Описание |
| type | String | Название события WZ_CREATE_ENTITY |
| data | object data |
Объект, который содержит данные о событии |
| Поле | Тип | Описание |
| chatType | String | Тип чата мессенджера: whatsapp, instagram*, telegram, vk, avito |
| chatId | String | ID чата (аккаунт контакта в мессенджере) |
| channelId | String | Идентификатор канала |
| userId | Number | ID пользователя в CRM |
| integrationId | String | ID интеграции |
{
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
Как получать: при генерации ссылки на iframe передайте нам options.useDealsEvents: true
Что содержит:
| Поле | Тип | Описание |
| type | String | Название события WZ_CREATE_ENTITY |
| data | object data |
Объект, который содержит данные о событии |
| Поле | Тип | Описание |
| chatType | String | Тип чата мессенджера: whatsapp, instagram*, telegram, vk, avito |
| chatId | String | ID чата (аккаунт контакта в мессенджере) |
| channelId | String | Идентификатор канала |
| userId | Number | ID пользователя в CRM |
| integrationId | String | ID интеграции |
| entity | object entity |
Объект, который содержит данные о сущности |
| Поле | Тип | Описание |
| closed | Boolean | Флаг. Показывает, закрыта или открыта сделка |
| id | Number | Идентификатор сущности, которую открывает пользователь |
| link | String | Ссылка на сущность. Может не быть |
| name | String | Имя сущности |
| responsibleUserName | String | Имя пользователя, отвественного за сущность |
Пример события
{
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 появятся данные, которые в этом событии пришли.
*Запрещены и признаны экстремистскими на территории РФ