Wazzup База знаний по сервису

wz-help-logo-part

База знаний

Окно чатов (iFrame)

В этом разделе мы рассмотрим, как вы сможете внедрить окно чатов Wazzup свою CRM или иную стороннюю систему.

Чтобы открыть окно чатов, необходимо вызвать

 POST https://api.wazzup24.com/v3/iframe
Параметры запроса
Параметр Тип Описание
user Object Объект, который содержит информацию о пользователе
user.id String Id пользователя в crm-системе, открывающего окно с чатом
user.name String Имя пользователя. В дальнейшем используется в качестве имени отправителя
scope String Контекст, в котором открывается окно, где:

«global» для общего чата

«card» для чата в карточке сущности

filter Object (Array) Массив объектов с чатами, которые нужно показать. Обязателен, когда scope = card
filter.chatType String Тип чата мессенджера. Доступные значения «whatsapp», «instagram», «telegram», «vk»
filter.chatId String Id чата (аккаунт контакта в мессенджере):

для whatsapp — только цифры, без пробелов и спец. символов

для instagram — аккаунт без «@» вначале

filter.name String Необязательный параметр, который содержит имя контакта
activeChat Object Чат, активный при открытии Iframe
activeChat.chatType String Тип чата мессенджера. Доступные значения “whatsapp”, “instagram”, «telegram», «vk»
activeChat.chatId String Id чата (аккаунт контакта в мессенджере):

для whatsapp только цифры, без пробелов и спец. символов)

для instagram аккаунт без “@” вначале

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

Пример запроса
 curl --location --request POST 'https://api.wazzup24.com/v3/iframe' \
--header 'Authorization: Basic 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 с ссылкой для открытия окна чатов.

Пример ответа
 {
"url": "https://12345678.wazzup24.com/chat/0e812899-e25b-4a18-a3e4-d1f5890f9de7?token=${token}"
}

В случае ошибки в ответе поступит json, содержащий свойство error, или http-код 500.
​​Пример ответа с ошибкой
 { "error": { "code": "NO_SUCH_ACCOUNT" } }

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

 <iframe src="ссылка" allow="microphone *" ></iframe>

Счетчик неотвеченных

Для использования счетчика неотвеченных нужно подключиться к веб-сокетам по url, который необходимо получить, вызвав

 GET https://integrations.wazzup24.com/counters/ws_host/api_v3/:apiKey

где apiKey — API ключ вашей интеграции.

В ответ придет json, в котором в поле host будет указан адрес для подключения.

Пример
 ```
{

"host": "ws-counters2.wazzup24.com"

}
```
Для подключения используйте библиотеку socket.io версии 4.1.3.
Пример подключения:
 // Адрес, полученный при обращении к  `https://integrations.wazzup24.com/counters/ws_host/api_v3/:apiKey`

const wsHost = 'ws-counters2.wazzup24.com';

// Опции подключения

const connectOptions = {

path: '/ws-counters/',

transports: ['websocket', 'polling']

};

// Подключение

const client = io(`https://${wsHost}`, connectOptions);

Далее для завершения подключения необходимо сгенерировать событие counterConnecting и отправить объект, содержащий поля type, apiKey и userId:

 {

"type": "api_v3", // Константное значение

"apiKey": "32a817cbc1594bd5885574d8f0290cd3", // API ключ интеграции

"userId": "2e0df379" // Id пользователя в ЦРМ

}

После успешного подключения при изменениях в количестве неотвеченных сообщений данные будут приходить в событии counterUpdate в виде объекта { counter: number}.

Обратите внимание, если для сотрудника не выбрана роль в п. 1 настроек интеграции, то counter будет приходить 0 и счетчик неотвеченных ничего не покажет. Если у сотрудника в п.1 настроек интеграции выбрана роль «Менеджер», то счетчик отобразит неотвеченные только по тем сделкам и контактам, за которые менеджер назначен ответственным в CRM. Соответственно, чтобы Wazzup отобразил неотвеченные корректно, необходима информация о сделке, контакте и ответственном.

Чтобы счетчик показывал неотвеченные по всем сделкам, выберите сотруднику в п. 1 настроек интеграции роль «Руководитель».

Полный пример подключения к сервису нотификаций и получения счетчика неотвеченных:
 <!-- index.html -->
<!-- Поключаем библиотеку socket.io версии 4.1.3 -->
<script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>

<div id="counter"></div>
// apiKey интеграции, полученный из личного кабинета Wazzup

const apiKey = '420dadbdd4570844bf3b22629е71';

// id менеджера из вашей ЦРМ

const userId = 'user1';

// Опции подключения к сервису нотификаций

const connectOptions = {

path: '/ws-counters/',

transports: ['websocket', 'polling']

};

// Получаем url для подключения к сервису нотификаций

fetch(`https://integrations.wazzup24.com/counters/ws_host/api_v3/${apiKey}`)

.then((response) => response.json())

.then((data) => {

const { host } = data;

// Подключаемся при помощи socket.io

const client = io(`https://${host}`, connectOptions);

// Слушаем событие 'connect'

client.on('connect', () => {

// Завершаем подключение: транслируем событие 'counterConnecting',

// в котором передаем данные клиента

client.emit('counterConnecting', {

type: 'api_v3',

apiKey,

userId

});

});

// Подтверждение подключения

client.on('counterConnected', () => console.log('Connected to Wazzup notifications!'));

// Обновление счетчика неотвеченных

client.on('counterUpdate', (data) => {

const { counter } = data;

document.getElementById('counter').innerHTML = counter;

});

})

.catch((error) => {

console.log('Connection error', error);

});