How to POST, GET (and more) with Landbot (v3)

Sometimes we need to send the data collected through the bot to an external app or to server; some other times we want to pipe in the bot data from external sources (API's, CRM's, database, etc). In both cases, we can achieve this by using HTTP Methods like POST and GET.

The block we need is the Webhook one. As the name says, it can be use to connect with external webhooks like Zapier.

You can therefore use the Webhook block to contact an external server and make the most of RESTful operations with the following HTTP Methods: POST, GET, PUT, PATCH and DELETE.

In this article we will show how to do POSTs and GETs with the Webhook block, the most frequently used.

Anatomy of the Webhook Block

1. URL & Method

In the above field we write the url (endpoint) we need to contact the external service. Sometimes, the url will need to be modified based on user's variables; below you can see how to implement the variables as a parameters and avoid to send them through the body (Send data from variables input):

https://api.test.com/something/@name

https://api.test.com/something?name=@name

https://api.openweathermap.org/data/2.5/weather?q=@city&APPID=f24f40b1c24505685fce3b8acd0fcffc&units=metric

On the right side of the URL and Method field there is a drop-down menu from where selecting the method you need:

• POST
• GET
• PUT
• DELETE
• PATCH
• HEAD
• CONNECT
• OPTIONS
• TRACE

2. Send Params

Depending on the API you are building the request for, you can add params directly to the url: https://api.openweathermap.org/data/2.5/weather?q=@city&APPID=f24f40b1c24505685fce3b8acd0fcffc&units=metric

or add these with their values or variables, in this case the URL will appear like: https://api.openweathermap.org/data/2.5/weather and add the params as below:

3. Customize Headers

By default, headers are disabled, if you want to use them, just switch them on. Like the body they need to be properly formatted, otherwise we will get an error. When we need to specify the "Content-Type", the most common one is JSON, so it will be like the one displayed in the placeholder:

Headers section is also the place where, if needed, you can add an Authorisation token: {    "Authorization": "Token 1234567890ASDFGHJKL",    "Content-Type": "application/json"}

4. Customize Body

Sometimes we need to send information to the body of the request instead of the URL. It is very important to use JSON standard otherwise we will have an alert error saying: JSON Parse error! and the border of the input area will be red, like in here:

Here the word email is not correctly formatted and missing " at the beginning of the word

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

{"email": "@email", "name": "@name", "custom-variable":"@customvariable"}

How to TEST the Webhook setup (to Save Response in Landbot variables)

Normally you will use the Webhook block to get data from the response of the API you are requesting to and to store part of all the responses in Landbot variables for later use. To Save the Response, we need to the following:

1. Use "dummy data": The testing has to be done with "real data", for the testing we cannot use landbot variables at this stage. Note the url cannot be a variable

1. Press button TEST, and below it will display the Status and body of the Response:

1. Go to the the Save Response section, and select from the drop-down menu the path to the value you want to save. Note that if the path changes, the value won't be stored. Once the path is selected, we need to select the variable or create a variable where we want to store the values, that will come from this path.
   

   

2. Once we have all the variables set in Save Response, change the "dummy data" for the Landbot variables. Remember to do it not only in the body like in the example but also in the other inputs as the url (params) and headers.
   

   

Demo of a bot using the POST method to send information outside with the Webhook block

In the below example, we show a bot that using the Webhook block with the POST method sends the information collected to an outside service (for this example we used myjson.com):

LINK TO POST DEMO: https://landbot.io/u/H-177172-F1S1CD1NI6LULC16/index.html

As you have seen in the demo, we use the webhook to send the variables @name, @email to an external app. Here, how we set up the Webhook block:

1. URL & METHOD

In this case the URL is: http://api.myjson.com/bins/ and the method is POST

1. CUSTOMIZE BODY

The body is built to send the values stored in the variables @name, @address and @email. When we add the " ", to the variables is because these are Strings (texts).

Demo of a bot using the GET method to receive information from an external service with the Webhook block

In this example, we have collected users inputs and pipe into the bot information from an outside service based on these inputs. Once we have a response, we will use the callback to store the information from the response and display:

LINK TO GET DEMO: https://landbot.io/u/H-180723-Z6Y7H1APB5S6DQIF/index.html

Like in the other bot demo, we capture information from the user, store them in Landbot variables and use them in the webhook as you can see below:

1. URL & METHOD

The full URL is : https://api.openweathermap.org/data/2.5/weather

1. CUSTOMIZE HEADERS

Some APIs need to have this information in the headers, in this case is Content-Type : application/json

1. CUSTOMIZE BODY

The body:

{"q":"@city","units":"metric","APPID":"f24f40b1c24505685fce3b8acd0fcffc"}

As you can see here, we have more information that we need to send according to the documentation:

• "q" for query, it will be the location, the city
• "units", as which type of value we want the temperature
• "APPID", this is a unique identifier that we need to sign up first to the platform of the API to have. Every API is different, and their way to be recognised too. Some might call it API key.

1. SAVE RESPONSE

Now we Test the Request and how we select and store the Temperature: