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 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

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
    }
  } 
}

What means: you have to create a contact with the parameters that were passed from the iframe.

The event will come every time the salesperson sends a message, not just when he writes to the customer for the first time. Therefore, the event can come when the contact has already been created in the CRM.

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
  } 
}
After creating a contact, you must send data about the contact from CRM to Wazzup.

We made an HTML page that serves as an example of how you can catch iframe events. How to use:

  1. Generate a link to the iframe using the API method.
  2. Insert that link into the input field of the HTML page.
  3. 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.