CMS, Featured

Create a Chatbot using Dialogflow and Drupal8

Introduction

Dialogflow (formerly api.ai) is an HCI(Human-Computer Interaction) technology which can be used for building voice and text-based conversational interfaces powered by AI.  This can also be integrated with Google Assistant, Amazon Alexa, Facebook Messenger and other popular platforms and devices.

In this blog, we will create a simple chatbot by integrating our Drupal website with Dialogflow API.

Configuring Dialogflow

1. Creating an Agent

To begin, we need to login into the Dialogflow console using a Google account and create an agent.  A Dialogflow agent represents the conversational interface of your application, device, or bot. To create a new agent Click on Create Agent button in your Dialogflow console to create a new agent.

2. Creating an Intent

After we have created the agent, we need an Intent. An Intent is an interface between the end user and our agent. It is responsible for taking the input from the user and decides what response to be delivered back to the user.

From the left sidebar menu Click on the  + icon next to Intents to create a new intent, give it a name(CurrentTime) and save.

 3. Adding Training Phrases and Responses

After creating the intent, we need to add some Training Phrases into it, which are inputs which we expect from the user.

For the training phrases, we can set the corresponding responses/answers also. In the Response section of the intent add some responses and click save.

To check our intent is working or not, let’s type one of the testing phases in the intent and see what response we get.

As you can see, we are getting one of the responses we have provided in the response section of our intent, which means our intent is working well.  That good but what if we want to display some real-time response?  Webhook is the answer to this. Webhook is nothing but a web callback to fetch some real-time information. Below architectural diagram will give you a better idea how webhooks actually works.

4. Webhooks

4.1 Installing required modules and packages

In order to create a webhook in Drupal, we need to install Chatbot API and Dialogflow (Api.AI) Webhook modules. Using these two modules we can write our custom integration logic with Dialogflow.

Chatbot API module tries to create common layer serving Drupal content to various bot frameworks e.g Dialogflow, Alexa etc. Using this we can write our integration driver for various bot frameworks.

We will use Dialog flow (Api.AI) Webhook module to integrate our Drupal website with Dialogflow Webooks, so that we can respond to intent requests.

Apart from these two modules, we need to install iboldurev/dialogflow package which is a PHP SDK for Dialogflow API. It can be installed using composer command.

$ composer require iboldurev/dialogflow

4.2 Configuring webhook in Dialogflow Agent

After successfully installing the modules above, our website can respond to our Dialogflow intent requests. All the intent response will be served from the path “api.ai/webhook” from our website. But prior that, we need to configure this path in our Dialogflow agent.

Open the Dialogflow agent and In the Fulfilment section, enable the webhook option, provide the webhook URL and click save.

Now, whenever we provide a user input to our agent it will try to get the response from the webhook call first. If no response received, it will provide a response from the static phrases those we have configured in the response section of our intent.

Note: replace your example.com with your website domain name.

4.3 Generating webhook response from Drupal

To serve an intent response from our Drupal website we need to create a Chatbot Intent Plugin with its Id as the same name of the intent we have created in our Dialogflow agent. In this case, the intent plugin id will be CurrentTime.

Let’s create a module say chatbot_intent and create add our chatbot intent plugin class into it. This class needs to be placed inside src/Plugin/chatbot/Intent directory of our module.

The class should extend Drupal\chatbot_api\Plugin\IntentPluginBase and should implement the abstract method process(). The response set inside this method will be served to the Dialogflow intent. The class should look like the following.

<?php

namespace Drupal\chatbot_intent\Plugin\Chatbot\Intent;

use Drupal\chatbot_api\Plugin\IntentPluginBase;

/**
 * Intent Plugin for CurrentTime Dialogflow.
 *
 * @Intent(
 * id = "CurrentTime",
 * label = @Translation("Get current time")
 * )
 */
class CurrentTimeIntent extends IntentPluginBase {

 /**
 * {@inheritdoc}
 */
 public function process() {
 $speech = "It's ".date('h:i A'). " Now!";
 $this->response->setIntentResponse($speech);
 }

}

We are almost done. One last step is to enable the webhook for our Intent. This can be done from the Fulfilment section of the intent.

To confirm whether the webhook call is working let’s type one of the training phrases and see what is response we are getting.

As you can see, we are getting the response what we have sent from our Drupal website. Hence we have successfully integrated our Drupal website with Dialogflow.

Conclusion

This is a very simple example of how Dialogflow works. Dialogflow is much more powerful indeed and can be useful in creating complex AI applications.

About The Author

Malay Nayak

Acquia Certified Drupal8 Developer

Leave a Reply

*