In this article, we will tell you how to embed the Wazzup chat window into your CRM and set up the work of the "Deals" dropdown based on events.

We recommend working with the "Deals" dropdown using webhooks. And if webhooks can not be used — by events.

How to embed a Wazzup chat window into your CRM

To get the link that will open the chat window, you need to call

POST https://api.wazzup24.com/v3/iframe
├── user *
│   ├── id *
│   └── name
├── scope *
├── filter[]
│   ├── chatType
│   ├── chatId
│   └── name
├── activeChat
│   ├── channelId
│   ├── chatType
│   └── chatId
└── options
    ├── clientType
    ├── useDealsEvents
    └── useMessageEvents

Request parameters

user (объект)

filter (объект)

activeChat (объект)

options (объект)

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 "Deals" dropdown operation in iFrame by events. A recommended way to set up it is with webhooks.

Events signal the need to:

• create a new deal,
• show the entity the user wants to open,
• create a new contact.

What events can be reported by an iFrame

WZ_CREATE_ENTITY
├── type
└── data
    ├── chatType
    ├── chatId
    ├── channelId
    ├── userId
    └── integrationId

{
  type: 'WZ_CREATE_ENTITY',
  data: {
    chatType: whatsapp,
    chatId: 79998887766,
    channelId: c16tc1c-9f20-4rda-46jd-q92ty4j6s36888,
    userId: test_id,
    integrationId: 608df5ye-45hj-j6k7-l77k-qe5t88j4h1222
  }
}

WZ_OPEN_ENTITY
├── type
└── data
    ├── chatType
    ├── chatId
    ├── channelId
    ├── userId
    ├── integrationId
    └── entity
        ├── closed
        ├── id
        ├── link
        ├── name
        └── responsibleUserName

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

WZ_OUTPUT_MESSAGE
├── type
└── data
    ├── chatType
    ├── chatId
    ├── channelId
    ├── userId
    ├── integrationId
    ├── messageId
    ├── name
    ├── username
    └── telephone

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

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.