Table of Contents

Webhook Block: Simplify API Integrations in Landbot

Prefer watching to reading? No problem, we've got you covered 👇

There may come a time when you need your chatbot to go outside the bot builder's scope and connect it to a third-party service. Maybe you have a CRM you want to synchronize with your chatbot, or you want to pull data from an existing Google Spreadsheet document or update the records on a database.Landbot has a number of native integrations that let you do just that with a number of services such as AirTable, MailChimp, Zapier and many more. For everything else there's Webhooks!

Landbot has several native integrations that allow you to do that with multiple platforms such as AirTable, MailChimp, Zapier, and many more. And for everything else, there are Webhooks!

What is the Webhook Block?

First, we need to understand what webhooks are and how they work. Basically, a webhook is a way for one system to send real-time data to another system when a specific event occurs. Thanks to the Webhook block, we can send data collected in a bot to external apps or servers, or bring data from outside sources (e.g. API, CRM, etc.) to the bot.

Webhooks allow your bots to interact with external services (such as APIs or servers) by performing different actions known as RESTful operations. These operations let you retrieve, update, add, or delete data using specific HTTP methods:

  • POST
  • GET
  • PUT
  • PATCH
  • DELETE
Landbot Webhook blocks do not accept XML, only JSON

Setting Up the Webhook Block

URL & Method
Screenshot that shows how to type the URL for a Webhook block

In this section, you can set:

  1. The HTTP method used (GET, POST, PUT...)
    Screenshot that shows how to choose the HTTP method used in the Webhook block
  2. And the URL (endpoint) of the external API:
Screenshot that shows how to set up the URL of the external API in the Webhook API
Warning: the URL must be HTTPS://, otherwise you will get an error and you won’t be able to save changes.

If you want some parts of your URL to be dynamic based on user attributes or inputs, you can insert fields from the picker:

  • Fields will only work in the URL path, not base URL ⟶ domain.com/@{field} ✅ , @{field}.domain.com ❌
  • Custom fields will be formatted as @{field} and system fields as ¿·@fields·?. See below for an example:
Screenshot that shows how fields are formatted in the Webhook block

If you want to attach parameters to the end of the URL, we recommend setting them up in the Send Params section.

It's important to double-check that the system you are working with uses proper SSL Certifications. Otherwise, the Webhook won't work and you will not be able to see why because no error message will be displayed. If you have doubts about the other system you want to connect, you can check the SSL Certifications on this site. 
Send Params

If you want to attach parameters (e.g.?user=Elon) to the end of a request URL, you can set them up in this section as Key-Value pairs.

Screenshot that shows how to attach parameters to the request URL in the webhook block

The Added parameters will appear in the Preview URL in green:

Screenshot that shows an example of added parameters in the URL

Customize Headers

Headers in HTTP requests are commonly used for authorization, specifying the content type, etc.

By default, headers are disabled. If you want to send headers as well, just switch this section on:

Screenshot that shows how to add headers to the request URL in the webhook block

You can set headers as key-value pairs too. Once set up, they will be sent in JSON format in an actual request.

The specific headers you need will depend on the API you are connecting. Here are some common examples:

  • Specify content type as JSON format ⟶ Content-Type: application/json
The Content-Type depends on the external service you are making your request to. Sometimes, the most common error is that the Content-Type is a different one.
Bear in mind that for this type, all the fields in the body of the requests must have a value.
  • Authenticate API key ⟶ Authorization: Bearer 1234567ABC
  • Specify user agent ⟶ User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1
Landbot doesn't send User-Agent as a header by default. You can add it if needed.

Customize the body

If you need to send information in the request body instead of the URL, you can add it to the ‘Customize Body’ section:

Screenshot that shows how to customize the body section of a webhook block
Warning: The request body must be written in JSON format, or you'll get a validation error.Here is an example of a body formatted correctly in JSON:

Here is an example of a body formatted correctly in JSON:

{
"email": "@email",
"name": "@name", 
"custom-field":"@customfield"
}
Screenshot of a JSON custom body request in the webhook block
Fields must be wrapped in quotes ⟶ "@fields"
Test Your Request

You can test if a request works properly in this section:

Screenshot that shows how to test a request in your webhooks block setup
  1. Click on Test the request
  2. It will trigger a real request to your desired API
  3. Response Status Code and Body will appear below the test button

Manually set values for test variables (OPTIONAL)

If your request contains fields, you might want to manually set their values for testing purposes. You can do so in this section before going through the test request.

Screenshot that shows how to manually set values for test fields in your webhook block

Save Response

You might want to save the response of a request as fields every time it's triggered to:

  • Split bot flow ⟶ For example, check a user's record in your CRM to know if he is an existing customer.
  • Display certain data as options in the next step using a Dynamic Data block ⟶ For example, Get up-to-date inventory data from the external database and display it as products for purchase.
  • Store a record ⟶ For example, you can get users’ data from a third-party API and save it in your own database.

You can do that in the ‘Save Responses as Fields section:

Screenshot that shows how to save your responses as fields using the webhook block

By default, the entire response body will be saved. If you want to save a specific part of the response, you need to:

  1. Test Your Request in the previous step first to identify the JSON keys.
  2. Select the specific value you want to save from the dropdown
  1. Save it as a field. You can break down the response into however many fields as you want. Keep in mind, though, that it’s not possible to save fields in the Webhook block as Date types because it will break the block.

Advanced Webhook Configurations

As you will see in the builder, the webhook block has a green and red output. The green output is for successful calls and the red output means that the call failed due to an unreachable server. 

Something to keep in mind is that responses such as 'Forbidden', or 'Not Found' will go through the green output. For these cases, we’ll need to use the response routing.

Response Routing

This section allows you to split the flow based on the response status code.

Once you have specified all the paths, go again to the builder and set up the subsequent flows.

We currently don't support range routing (this feature will be available soon). You can only trigger a path by having the exact same status code instead of an entire range, such as 4XX. Responses with no specified path will follow the Default flow.

Remember you will have to reconnect the options in the builder every time you change them in the block editor.

Do you need a more practical description of how to use this feature? Check out our guide on how to POST, GET, and more with your bots.

Domain Variables
Screenshot that explains what are domain fields in the webhook block

Domain variables allow developers to switch predefined base URLs in a simple manner. Instead of typing a specific URL for each Webhook block in a static manner, Domain Fields can be selected from the Domain Fields button below the URL:

Screenshot that shows how to select domain fields in the webhook block

Once a Domain Field is set, you can continue the edit adding the rest of the path, and even add more Landbot Fields by clicking on the Fields button:

Screenshot that shows how to select domain fields in the dropdown menu of the webhook block

Or if needed, you can always delete the current Domain Field and path by clicking on the X next to the URL:

Screenshot that shows how to remove the domain fields in the webhook block

Domain Variables (Headers)

Domain Fields can also be set up with specific Headers. Click on ‘Domain Fields and select the one you want, and automatically you will see below how the Custom Header changes accordingly.

Screenshot that shows the URL and customize headers in the webhook block

How to Set Domain Variables

From the Webhook dashboard section, you can add, edit, and delete Domain Fields. Go to the ‘URL & Method’ section, click on ‘Set Domain Fields’ and you will be redirected to the Dashboard:

Access the webhook dashboard section
Webhook dashboard section

From there, if you want to create a new Domain Field, click on ‘Add New Domain Field’ and fill out the required information (name, domain URL, and headers, if needed). 

Screenshot that shows how to add a new domain field

Change environment (edit a Domain Field)

If at some point you need to change the values of a Domain Field because you are changing from development to production, for example, instead of changing every Webhook, you only need to edit the Domain Field that is being used. The changes will be applied automatically in all your current bots where you are using such Domain Field.

Landbot Public IP

Find here Landbot’s IPs in case you need to whitelist them:

  • 34.77.31.159
  • 23.251.142.192

Channel Type compatibility

for Web

This feature is fully compatible.

for WhatsApp

This feature is fully compatible with WhatsApp.

for Messenger

This feature is fully compatible with Messenger.

Was this article helpful?

Webhook Block Dashboard

How to TEST your Http Request (Webhook block)

Contact