How to create a chatbot with Builder

The documentation below presents a step-by-step guide on how to create a simple bot in the Builder. The example bot, ClimaBot, provides weather information based on the user's location.

To retrieve the weather information, the OpenWeather API was used. Check it out:

To create a chatbot in Builder, you need to select the “Create chatbot” option on the home page of your contract:

In this example, we will build a chatbot from scratch, so we can select that option, choose a name, and continue:

Once the chatbot is created, we can access the Builder and will see that the flow appears like this:

To add a new block, we can select the “add block” icon on the left corner of the Builder. Since this is a simple flow, we will create only four additional blocks. In this example, I named the blocks: “1 - Location,” “2 - Forecast,” “3 - Region,” and “End”:

The welcome block will only be used for presentation purposes, so we can add a text using the variable {{contact.name}} to get the user's name, along with a quick reply option to direct the user to the next block, which will be “1 - Location.” In this block, we will only keep the output condition: if the user's response exists, then redirect to “1 - Location”:

In the “1 - Location” block, we will receive the user's location. So, we can select the “request location” option, and in the user input, we will define the variable “location” to store the user’s location. Also, the only output condition will be to direct the user to the next state in the flow, which is the “2 - Region” block:

In the Region block, we will execute HTTP request and script actions sequentially, using their results to validate the user’s region. In this case, I also configured a content with a quick reply and the result of the request, with two options: if “yes,” the user is directed to the next state (Block “3 - Forecast”); if “no,” the user is redirected to the beginning of the flow:

The HTTP request configuration looks like this:

And the script is configured to format the response from that request. We use the script in the following format:

javascript

CopiarEditar

function run(responseclima) {

   // Converts the JSON string into a JavaScript object (if not already an object)

   var data = JSON.parse(responseclima);

 

   // Access values

   var mainWeather = data.weather[0].main;

   var description = data.weather[0].description;

   var temperature = data.main.temp;

   var humidity = data.main.humidity;

   var windSpeed = data.wind.speed;

 

   // Return values as an object

   return {

       mainWeather: mainWeather,

       description: description,

       temperature: temperature,

       humidity: humidity,

       windSpeed: windSpeed

   };

}

 

Next is the “Forecast” block, the penultimate state in the flow, where we will present the weather data retrieved from the request. This block won’t have any actions, and its output conditions will redirect the user either back to the “1 - Location” block if they want to make another query or to the “End” block if they don’t. To display the weather information, we’ll use the output from the script configured in the previous block. It will look like this:

Finally, we have the “End” block, whose sole purpose is to present a farewell message to the user and redirect them back to the beginning of the flow. Therefore, this block will also have no actions or output conditions. We’ll just use the default output to automatically redirect the user to the beginning of the flow:

ClimaBot Flow – File containing the bot flow created in this example. To use it, just download the file and import it into Blip:
https://blipmediastore.blob.core.windows.net/public-medias/Media_744410e6-e083-42bf-aeba-538e788e1a5a

Here’s the link if you want to test the ClimaBot:
https://takeblip-acessogeneral.chat.blip.ai/?appKey=Y2xpbWFib3QxOTA6NDcyMWUxODctZWRhMi00YTkwLWI0N2QtMjc0Njk4MzJmMzE4

 

For more information, visit the discussion on the subject in our community or the videos on our channel. 😊