Advance flow builder: Webhook

Jitesh Dugar Updated by Jitesh Dugar

When can use Webhook in Flow Builder?

Advanced Flow Builder features are an add-on to the regular plan and are charged separately.

By default, this icon is shown with the "PRO" logo as below.

This icon can be set up in flow using the normal plan and the flow can be saved successfully. But when we set up to use in Keyword or in Default Action, the system will prompt out popup asking the user to upgrade in order to use these advanced flow builder features

After upgrading WATI to the PRO plan, the user can use these advanced flows in Keyword or Default Action.

Meaning and Usage

Webhooks: By webhooks, you can retrieve (GET) or send (POST) data from one place to another. Supposedly you having your own database.

To Use This: Simply drag and drop the webhook icon or when you extend the flow select the webhook feature.

Features

  1. URL & Method

This is where you can choose:

  • GET Method
  • POST Method

And your URL endpoint of the external API.

you can also make your URL Dynamic by inserting variables from the variables button shown in the image above.

To add variables, you should always do it in the URL Path.

Example: URL ⟶ https://webhook-wa-testing.clare.ai/16d6942a-64cb-43f3-8e8a-2bddace647f3?name={{name}}

  1. Customize Headers

Headers in HTTP webhook requests are generally used to specify the purpose of this webhook or the content type it contains.

It is completely optional to use headers, and it is by default set as off.

As shown in the above picture, you can set headers as key-value pairs, and then later when you set the request it will be sent in Headers.

Example: key = Content-Type , value = application/x-www-form-urlencoded

so it will be sent as

Content-Type : application/x-www-form-urlencoded

  1. Customize the body

In this you can send information in the body of the webhook request, this is also completely optional and set as off by default.

This is written in JSON format, or else there will be an error.

An example of how the body request should look like:

{

"name" : "@name",

"address" : "@address"

}

  1. Set your test variable

Manually setting your test variables here.

  1. Test the Request

You can test the API request by clicking on the 'Test The Request' button.

  1. Save Responses as Variables

You can also save the response of a request as variables whenever you trigger the webhook method.

Now you can either choose to make it a custom attribute or save it as a variable.

If your API response is a JSON with key-value paid, you can store each of the values by passing the key name.

For example, if you want to store "Hello from Webhook" from this response

You need to store it as below -

Once you do that, you can type in your variable or custom attribute and save the entire response.

Storing Responses Inside Object

If you want to store the response value that is inside an object, you need to use the objectkey.keyname

Example -

{ 
    "Result": { 
        "MobileClientInfoStatus": "OpenQuote", 
        "PolicyId": "00000000-0000-0000-0000-000000000000", 
        "QuoteId": "xxxxx", 
        "CustomerId": "xxxxxx", 
        "QuoteNumber": "xxxxxx", 
        "PolicyNumber": null, 
        "LmsStatus": false, 
        "BucketKey": null, 
        "Quote": null 
    }, 
    "MessageValidation": null, 
    "QuoteReferrals": null
}

If your response is like above, and you want to store the QuoteId, just use Result.QuoteId

Storing Responses Inside Object

If your response is inside an array of any object like below -

[
    {
        "tracking_data": {
            "track_status":1,
            "shipment_track" : [
                {
                    "id":1278937320,
                    "current_status":"Delivered"
                }
            ]
        }
    }
]

You can use this to store - $.[0].tracking_data.shipment_track[0].current_status

  1. Response Routing

You can use response routing in your flow so that whenever a request status matches the expected status it follows the flow according to that.

Example:

200 - Okay Request

400 - Bad Request

Here you can split your flow according to response status codes.

It will show like this in the flow:

Now, you can set up messages following them. Suppose for status = 200, I will send a message saying HTTP Request Succesful.

This is all about your webhook flow feature.

Thanks.

How did we do?

Advance flow builder: Setup Subscribe or Unsubscribe

How to build a flow

Contact