Chat window (iFrame)

In this section, we’ll look at how you can implement the Wazzup chat window in your CRM or other third-party system.

To open the chat window, you need to call

 POST https://api.wazzup24.com/v3/iframe
Request parameters
Parameter Type Description
user Object The object that contains information about the user
user.id String Id of the user in the CRM system that opens the chat window
user.name String User name. Further used as the sender’s name
scope String The context in which the window opens where:

“global” for general chat

“card” for the chat in the entity card

filter Object (Array) An array of objects with chats to show. Obligatory when scope = card
filter.chatType String The chat type of the messenger. Available values “whatsapp”, “instagram”, “telegram”, “vk”
filter.username String For Telegram only.
The username of a Telegram contact, without the “@” at the beginning. Can be used for Telegram if no chatId is known
filter.chatId String Chat Id (contact’s messenger account):

for whatsapp — only numbers, no spaces or special characters

for instagram — account without “@” in the beginning

filter.name String Optional parameter that contains the name of the contact
activeChat Object Chat, active on opening Iframe
activeChat.channelId String Identifier of the channel in which you want to open an active chat when you open iFrame
activeChat.chatType String The chat type of the messenger. Available values “whatsapp”, “instagram”, “telegram”, “vk”
activeChat.chatId String Chat Id (contact’s messenger account):

for whatsapp — only numbers, no spaces or special characters)

for instagram — account without “@” in the beginning

If a contact with the specified chatType and chatId is not in the Wazzup database, when you open it in the contact card of the CRM system, it will be created. The name will be used as the name, or the chatId if the former is missing.

Request example
 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"

}

}

'
Response

The response will come with a json with a link to open the chat window.

Response example
{

"url": "https://12345678.wazzup24.com/chat/0e812899-e25b-4a18-a3e4-d1f5890f9de7?token=${token}"

}

 

In case of an error, the response will receive a json containing the error property, or an http code 500.

Error response example
 { "error": { "code": "NO_SUCH_ACCOUNT" }

If you open the link in an iframe, add the allow=”microphone *” attribute to the tag so you can record voice messages from the chat window. If the attribute is not added, the user will see an error when clicking on the microphone icon to record.

 <iframe src="link" allow="microphone *"></iframe>
Unanswered counter

To use the unanswered counter, you must connect to the web socket by url, which must be obtained by calling

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

where apiKey is the API key of your integration.

In response you will receive a json, where the host field will contain the address to connect to.

Example
 ```

{

 

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

 

}

```
Use the socket.io library, version 4.1.3 to connect.
Connection example
  // The address obtained by accessing `https://integrations.wazzup24.com/counters/ws_host/api_v3/:apiKey`

 

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

 

// Connection options

 

const connectOptions = {

 

path: '/ws-counters/',

 

transports: ['websocket', 'polling']

 

};

 

// Connection

 

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

Next, generate a counterConnecting event and send an object containing the type, apiKey, and userId fields to complete the connection:

{

 

"type": "api_v3", // Constant value

 

"apiKey": "32a817cbc1594bd5885574d8f0290cd3", // API integration key

 

"userId": "2e0df379" // User Id in CRM

 

}

After successful connection in case of changes in the number of unanswered messages the data will arrive in the counterUpdate event as a { counter: number} object.

Please note that if no role is selected for an employee in point 1 of the integration settings, the counter will come with 0 and the unanswered counter will show nothing. If the employee in step 1 of integration settings has the “Sales rep” role selected, the counter will display unanswered only for those deals and contacts for which the manager was assigned responsible in the CRM. Accordingly, for Wazzup to display unanswered correctly, you need information about the deal, contact and person responsible.

For the counter to show unanswered for all deals, select the “Manager” role for the employee in step 1 of the integration settings.

Full example of connecting to the notification service and getting the unanswered counter:
 <!-- index.html -->

<!-- Connecting library socket.io version 4.1.3 -->

<script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>

 

<div id="counter"></div>

// apiKey of integration obtained from the Wazzup personal account

 

const apiKey = '420dadbdd4570844bf3b22629е71';

 

// id of the sales rep from your CRM

 

const userId = 'user1';

 

// Options for connecting to the notification service

 

const connectOptions = {

 

path: '/ws-counters/',

 

transports: ['websocket', 'polling']

 

};

 

// Getting the url to connect to the notification service

 

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

 

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

 

.then((data) => {

 

const { host } = data;

 

// Connecting with socket.io

 

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

 

// Listening to the event 'connect'

 

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

 

// Completing the connection: broadcasting the event 'counterConnecting',

 

// in which we send the customer data

 

client.emit('counterConnecting', {

 

type: 'api_v3',

 

apiKey,

 

userId

 

});

 

});

 

// Connection confirmation

 

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

 

// Updating the unanswered counter

 

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

 

const { counter } = data;

 

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

 

});

 

})

 

.catch((error) => {

 

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

 

});