In this section, we’ll look at how you can implement the Wazzup chat window in your CRM or other third-party system.
To get the link that will open the chat window, you need to call
POST https://api.wazzup24.com/v3/iframe
Request parameters
Parameter | Necessity | Type | Description |
user | Required | Object | The object that contains information about the user |
user.id | Required | String | Id of the user in the CRM system that opens the chat window |
user.name | Required | String | User name. Further used as the sender’s name |
scope | Required | String | The context in which the window opens where:
“global” for general chat “card” for the chat in the entity card |
filter | Required when scope = card | Object (Array) | An array of objects with chats to show. Obligatory when scope = card |
filter.chatType | Optional | String | The chat type of the messenger. Available values “whatsapp”, “instagram”, “telegram”, “vk” |
filter.username | Optional | 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 | Optional | 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 | Optional | String | Optional parameter that contains the name of the contact |
activeChat | Optional | Object | Chat, active on opening Iframe |
activeChat.channelId | Optional | String | Identifier of the channel in which you want to open an active chat when you open iFrame |
activeChat.chatType | Optional | String | The chat type of the messenger. Available values “whatsapp”, “instagram”, “telegram”, “vk” |
activeChat.chatId | Optional | String | Chat Id (contact’s messenger account):
for whatsapp — only numbers, no spaces or special characters) for instagram — account without “@” in the beginning |
options | Optional | Object | Settings for iframe events.
Required if you decide to create contacts and deals by events. |
options.clientType | Optional | String | CRM type |
options.useDealsEvents | Optional | Boolean | Specify “true” if you want to be notified by iframe to create or show a deal to the user.
The event comes when the user clicks on the + in the “suitcase” to create a deal from our iframe, or on an entity in the “suitcase”. |
options.useMessageEvents | Optional | Boolean | Specify “true” if you want to be notified by iframe to create a new contact.
The event comes when the user responds to an incoming message from our iframe. |
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.
If you open the link in the iframe, add the allow=”microphone *; clipboard-write *” attribute to the tag.
You need to specify “microphone” so that users can record voice messages from the chat window. If not, the user will see an error when clicking on the microphone icon to record.
Passing “clipboard-write” is necessary to make clipboard copying work properly in our iframe. For example, the user could copy the error code from the notification on the button.
<iframe src="link" allow="microphone *; clipboard-write *"></iframe>
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" }
Events sent by iframe
This section describes how to set up the “suitcase” operation in iframe by events. An alternative way to set up the “suitcase” is with webhooks.
Events signal the need to:
- create a new deal,
- show the entity the user wants to open from the “suitcase”,
- create a new contact.
What events can be reported by an iframe
User clicks on the "+" from "suitcase" to create a deal
What means: you have to create a new deal with the parameters that were passed to the iframe in the event.
Name: WZ_CREATE_ENTITY
How to get: send us options.useDealsEvents: true when generating the iframe link.
What it contains:
Field | Type | Description |
type | String | Event name WZ_CREATE_ENTITY |
data | Object | The object that contains the event data |
data.chatType | String | Chat messenger type: whatsapp, instagram, telegram, vk, avito |
data.chatId | String | Chat ID (contact's messenger account) |
data.channelId | String | Channel ID |
data.userId | Number | CRM user ID |
data.integrationId | String | Integration ID |
Example of an event:
{ type: 'WZ_CREATE_ENTITY', data: { chatType: whatsapp, chatId: 79998887766, channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888, userId: test_id, integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222 } }
User tries to open a deal, contact or other entity from "suitcase"
What means: the user wants to open a deal, contact, or other entity, with the parameters passed from the iframe.
Name: WZ_OPEN_ENTITY
How to get: send us options.useDealsEvents: true when generating the iframe link.
What it contains:
Field | Type | Description |
type | String | Event name WZ_CREATE_ENTITY |
data | Object | The object that contains the event data |
data.chatType | String | Chat messenger type: whatsapp, instagram, telegram, vk, avito |
data.chatId | String | Chat ID (contact's messenger account) |
data.channelId | String | Channel ID |
data.userId | Number | CRM user ID |
data.integrationId | String | Integration ID |
data.entity | Object | The object that contains the entity data |
data.entity.closed | Boolean | Flag. Indicates whether a deal is closed or opened |
data.entity.id | Number | Identifier of the entity which is opened by the user |
data.entity.link | String | Link to the entity. There can be nothing |
data.entity.name | String | Entity name |
data.entity.responsibleUserName | String | Name of the user responsible for the entity |
Example of an event:
{ 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: TestDeal, responsibleUserName: TestUser } } }
User sent message from the iframe and it was displayed in the iframe
What means: you have to create a contact with the parameters that were passed from the iframe.
Name: WZ_OUTPUT_MESSAGE
How to get: send us options.useMessageEvents: true when generating the iframe link.
What it contains:
Field | Type | Description |
type | String | Event name WZ_CREATE_ENTITY |
data | Object | The object that contains the event data |
data.chatType | String | Chat messenger type: whatsapp, instagram, telegram, vk, avito |
data.chatId | String | Chat ID (contact's messenger account) |
data.channelId | String | Channel ID |
data.userId | Number | CRM user ID |
data.integrationId | String | Integration ID |
data.messageId | String | Sent Message ID |
Example of an event:
{ type: 'WZ_OUTPUT_MESSAGE', data: { chatType: whatsapp, chatId: 79998887766, channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888, userId: test_id, integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222, messageId: 7886о490-49df-8hj3-3jkj-wes4xc54fwd } }
- Generate a link to the iframe using the API method.
- Insert that link into the input field of the HTML page.
- The chat interface will be displayed. You will be able to tap on the necessary buttons to trigger an event — the data that came in this event will appear above the iframe.