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

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

 POST https://api.wazzup24.com/v3/iframe

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

Если контакта с указанными 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"

}
```

Пример подключения:

 // Адрес, полученный при обращении к  `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);

});