Incoming webhooks
Incoming webhooks are useful when you want to integrate a third-party API that has a fixed structure. They allow you to define your own structure for the incoming data.
The workflow to integrate a third-party API typically looks like this:
- Define an incoming webhook and its attributes.
- Provide the created webhook URL to the third-party service.
- Define a webhook and create a bot and trigger that will call the REST API.
- Define the REST API call itself.
It's not necessary to perform these steps in the exact order shown above. This is just a basic workflow.
How to find the chat_id
when sending a webhook request
Just append ?output=json
to your webhook URL.
Sample request simulating a Telegram
request:
curl -X POST 'https://demo.livehelperchat.com/index.php/webhooks/incoming/xxxxxxxxxxxxxxxxxx?output=json' --header 'accept: application/json' --header 'content-type: application/json' -d '{ "update_id": 532262132, "message": { "message_id": 2383, "from": { "id": 441347276, "is_bot": false, "first_name": "Remigijus", "last_na, "language_code": "en" }, "chat": { "id": 441347276, "first_name": "Remigijus", "last_name": "Kiminas", "username": "remdex", "type": "private" }, "date": 1706693999, "text": "new chat visitor" }}'
Response sample:
{"error":false,"result":{"chat_id":1647601504}}
Fields definition
Name
- This will be visible within the chat, so the operator will know where the chat originated.Identifier
- This is used as part of the webhook URL. Set it to any random string.Messages attribute location
- This defines the location where the message data is located (only at the first level).Nick
,Phone
,E-mail
- Defines the location of these attributes within the message itself. It also supports syntax likechatId||@||0
, which means:- Take the
chatId
attribute, split it by the@
character, and take the0
(first) element. To take the last element instead of0
, writelast
.
- Take the
Chat ID field location
- The field location within the message itself. We set this attribute aschat_external_id
.General conditions for messages being processed (these are first-level attributes)
- This is useful if you want to have some protection against unknown requests. We will check that the first-level attributes match these requirements.- Supported structure:
type=chat,image||fromMe=false
. This expects thetype
to be eitherchat
orimage
, andfromMe
should befalse
.
- Supported structure:
Text messages
,Attachments
,Images
- We support three types of messages. We can define what conditions each message body should meet to be considered one of them.Chat options
- You can choose the required logic for when a chat from the same visitor arrives, but the previous chat was already closed.
How to define Text messages
, Attachments
, Images
body message?
You should use the special placeholder {{msg.<attribute>}}
. You can access any message attribute, no matter how deeply nested it is. You can have more than one placeholder in it.
How do I send a message back to the third-party API once an incoming chat has been created?
Set up a webhook
You should set up a Webhook
and listen to the chat.web_add_msg_admin
event. In the conditions, you should have:
If your created webhook ID is 1
, the condition should look like this:
{args.chat.chat_variables_array.iwh_id} = 1
You can also use a condition like:
{args.chat.incoming_chat.incoming.scope} = whatsapp
After that, you should set up a bot and trigger with a REST API call.
Read more about possible chat variables under {args.chat
.
Set up a REST API call
A REST API call can look like this. We access the external Chat ID so the third-party API knows the chat.
{
"chatId": {{args.chat.incoming_chat.chat_external_id}},
"body": {{msg_url}}
}
See the WhatsApp integration using open https://github.com/open-wa.
How is the incoming webhook icon/image determined?
For example, in the fbmessenger extension, webhook images are defined like social/instagram-ico.png
, but the real path is extension/fbmessenger/design/fbmessengertheme/images/social/instagram-ico.png
. The image prefix is not required!
Live Helper Chat determines those itself. You can also put an icon identifier from Google Fonts. For example, webhook.
If an image does not load for you, it means your image path is incorrect in the incoming webhook, and we could not find the full path.
How to debug if something does not work
- Disable cache.
- In the incoming webhook configuration, enable
Log request. All requests will be logged
. You will find the problematic request payload in the Audit log. - Modify
modules/lhwebhooks/incoming.php
. At the top, you will find$dummyPayload = null;
. Replace it with$dummyPayload = json_decode('{"msg":"data"}',true);
and save the file. - In a browser, type
https://example.com/webhooks/incoming/4654654654?output=json
. You will see the output of the request. Replace the URL with yours. - Now you can just modify
lib/core/lhchat/lhchatwebhookincomming.php
and see the output just by refreshing the page. - If files are not uploaded correctly, make sure you have the
fileinfo
extension installed. It's used to detect file types.