Connecting Directual and Chatbot.com

Creating a chatbot on ChatBot.com

You will need to use a webhook integration. This means that the chatbot service sends an object to the webhook, and then a synchronous scenario in Directual processes that object and returns a response.

Step 1. Create a new chatbot and give it a name

Step 2. Create a chat widget

Create a chat widget, connect it to the bot, and copy the code to add the widget to the marketplace app. To do this, open Directual, go to the Web Pages tab → Web Portal settings → Custom Code tab. Paste the code here and save the changes. Great, now your marketplace has the widget.

Setting up message authentication

Step 1. Creating a new webhook in Directual

It’s time to configure the logic behind the chatbot in Directual. Go to the API builder tab → Webhooks, and create a new one.

Copy the webhook’s URL, then go back to the chatbot platform and select the Webhook tile in the Integrations tab. Create a new webhook and select the bot. Then configure it by assigning a name and pasting the URL you just copied. You can use any string as the verification token. For this example, we’ll use, directual_token.

Step 2. Configuring validation

When you created the webhook, you automatically created a scenario to handle all incoming objects. Take a quick look at the object that was created. Pay attention to the URL data field, it has two important values - Challenge and Token.

To pass validation successfully, you must return the value of Challenge. To achieve that, you need to use the API response step.

You should also remove the New Objects trigger because this scenario will run synchronously. Next, go to the webhook’s configuration and specify that the scenario is synchronous.

Important! Don’t forget to remove triggrest in Start step (otherwise, the scenario will process two times: synchronically and asynchronically).

Configuring scenarios for different nodes

Next, configure the processing of different chatbot nodes, meaning that the webhook can be called on from different places in the chatbot tree, and each node must be processed separately. 

Step 1. Adding branching

Give the first node a name: Webhook Node 1. Now add branching, for example, the chatbot will ask what the user needs → help (a help desk ticket), or to search the goods catalog.

There will be two nodes: one for the help desk and one for providing information about goods. This means you need to create two response options for the chatbot. One for help and another to search for a specific item in the catalog.

To do that, you will need keywords. The first is - Help - which tells that the user needs help or a help desk ticket. The second keyword is - Good -  which means that the user wants to check the catalog.

For this, you need another webhook node, call it Webhook Node 2. The name of the node is used within the webhook processing scenario for filtering.

Step 2. Configuring a scenario

Now, configure the scenario to send a response when the user searches for a specific item. This will be a different node. First, let's look at incoming webhook objects and the information about the node. You need to pull the information from the JSON field, so you need to create a new, string-type context variable called Node.

In the first step, called Edit object, add another action for writing the name value from the body field to the node’s context variable. To do that, call the JSON field again, turn off Smart Inputs, and add a node name because the JSON is nested.

Add a condition to the context variable’s value and, as usual, don't forget to add comments to make the scenario easier to follow. If we are in Node 1, then the response is - Help desk is here! And if we’re in Node 2, then we get the response - Goods catalog is here. 

Don't forget to configure the conditions. The value of the node's context variable is equal to Webhook node 1 or Webhook node 2, respectively.

Publish the scenario and review it. If the user needs help, he will get this message - Helpdesk is here! If the user needs a specific item, he will get this message - Goods catalog is here. Everything worked correctly, both nodes were processed separately.

Configuring complex responses

Step 1. Configuring a scenario

Use the second branch of the dialog, where the user needs the goods catalog. Add a request for details - the bot asks what the user needs or is looking for, and the user answers something.

For that, you will need to configure the scenario in Directual. Check the last object processed by the API response step in the Scenario. There, in the message field, you can see the search query. You need to use this query to search the goods database and return the relevant results to the user.

You will need a new context variable for this search query. Let's use the already familiar Edit Object step and store the Property value from the JSON field in the context variable.

Next, add the Find Objects step which will search the objects in the Goods structure for anything that matches. You will need to save the result in an array link. Add this field - array link - to the scenario object, that is, the Webhook object.

Update the scenario to include these fields. We store the search result in the Goods field and search in the Goods structure.

Step 2. Configuring a true response with JSON

Now you have to prepare a true response, to be formed from the array link. Add the Edit object step to the scenario, that’s where we’ll assemble the response, which we’ll partially prepare using a context variable. Let's call it. Elements. Create context variable - Elements. Go through the array link, add the iterator for arrayLinks ({{#goods}} here), and then the name of the item inside that expression.

We go through all the elements of the array and for each one, we create a JSON object with a comma behind it. This JSON object’s fields are filled from the fields of the objects to which our array refers.

We need to remove last comma in {{elements}}. Use Lodash _.trim for removing spaces and .slice(0,-1) (a standard JS-method for removing last character). Don't forget to turn on coding mode in the input:

Then, we compose the whole response for ChatBot API:

And finally:

Afterword

The combination of Directual and ChatBot.com opens up unlimited possibilities for creating customized user experiences for your applications. Go ahead, experiment! If you get stuck, don't hesitate to ask for help in our No-code Community. Also, check out our 101 crash course to learn more about Directual and its features.