7 min read

Dialogflow (previously called API.AI) is a conversational agent building platform from Google. It is a web-based platform that can be accessed from any web browser. The tool has evolved over time from what was built as an answer to Apple Siri for the Android platform. It was called SpeakToIt, an Android app that created Siri-like conversational experiences on any Android smartphone. The AI and natural language technology that powered the SpeakToIt app was opened up to developers as API.AI in 2015.

This tutorial is an excerpt from a book written by Srini Janarthanam titled Hands-On Chatbots and Conversational UI Development

In this article, we will create a basic chatbot using Dialogflow, add user intents, and finally, we will see how to integrate the chatbot with a website and Facebook.

Setting up Dialogflow

First, let us create a developer account on API.AI (now called as Dialogflow).

  1. Go to Dialogflow:
  1. Click GO TO CONSOLE on the top-right corner.
  2. Sign in. You may need to use your Google account to sign in.

Creating a basic agent

Let us create our first agent on Dialogflow:

  1. To create a new agent, click the drop-down menu on the left on the home page and click Create new agent.
  2. Fill in the form on the right. Give it a name and description. Choose a time zone and click CREATE.
  3. This will take you to the page with the intents listing. You will notice that there are two intents already: Default Fallback Intent and Default Welcome Intent.
  4. Let’s add your first intent. Intent is what the user or bot wants to convey using utterances or button presses. An intent is a symbolic representation of an utterance. We need intents because there are many ways to ask for the same thing. The process of identifying intents is to map the many ways unambiguously to an intent. For instance, the user could ask to know the weather in their city using the following utterances:
"hows the weather in london"
"whats the weather like in london"
"weather in london"
"is it sunny outside just now"

In the preceding utterances, the user is asking for a weather report in the city of London. In some of these utterances, they also mention time (that is, now). In others, it is implicit. The first step of our algorithm is to map these many utterances into a single intent: request_weather_report.

The Intent name corresponds to users’ intents. So name them from the user’s perspective. Let’s add a user_greet intent that corresponds to the act of greeting the chatbot by the user.  To add an intent, click the CREATE INTENT button.

  1. You will see the following page where you can create a new intent:

Give the intent a name (for example, user_greet).

  1. Add sample user utterances in the User says text field. These are sample utterances that will help the agent identify the user’s intent. Let’s add a few greeting utterances that the user might say to our chatbot:
hello
hello there
Hi there Albert
hello doctor
good day doctor
  1. Ignore the Events tab for the moment and move on to the Action tab. Add a name to identify the system intent here (for example, bot_greet to represent chatbot’s greeting to the user).
  2. In the Response tab, add the bot’s response to the user. This is the actual utterance that the bot will send to the user. Let’s add the following utterance in the Text response field. You can add more responses so that the agent can randomly pick one to make it less repetitive and boring:
Hi there. I am Albert. Nice to meet you!

You can also add up to 10 additional responses by clicking the ADD MESSAGE CONTENT.

  1. Click SAVE button in the top-right corner to save the intent. You have created your very first intent for the agent.
  2. Test it by using the simulator on the right side of the page. In the Try it now box, type hello and press Enter:

You will see the chatbot recognizing your typed utterance and responding appropriately.

  1. Now go on and add a few more intents by repeating steps 5 through 10. To create a new intent, click the + sign beside the Intents option in the menu on the left:

Think about what kind of information users will ask the chatbot and make a list. These will become user intents. The following is a sample list to get you started:

request_name
request_birth_info
request_parents_names
request_first_job_experience
request_info_on_hobbies
request_info_patent_job
request_info_lecturer_job_bern

Of course, this list can be endless. So go on and have fun.

Once you have put in the sufficient number of facts in the mentioned format, you can test the chatbot on the simulator as explained in step 10.

Deploying the chatbot

Now that we have a chatbot, let us get it published on a platform where users can actually use it. Dialogflow enables you to integrate the chatbot (that is, agent) with many platforms. Click Integrations to see all the platforms that are available:

In this section, we will explore two platform integrations: website and Facebook:

Website integration

Website integration allows you to put that chatbot on a website. The user can interact with the chatbot on the website just as they would with a live chat agent.

  1. On the Integrations page, find the Web Demo platform and slide the switch from off to on.
  1. Click Web Demo to open the following settings dialog box:
  1. Click the bot.dialogflow.com URL to open the sample webpage where you can find the bot on a chat widget embedded on the page. Try having a chat with it:

You can share the bot privately by email or on social media by clicking the Email and Share option.

  1. The chat widget can also be embedded in any website by using the iframe embed code found in the settings dialog box. Copy and paste the code into an HTML page and try it out in a web browser:
<iframe
    width="350"
    height="430"
    src="https://console.api.ai/api-client/demo/embedded/
         2d55ca53-1a4c-4241-8852-a7ed4f48d266">
</iframe>

Facebook integration

In order to publish the API.AI chatbot on Facebook Messenger, we need a Facebook page to start with. We also need a Facebook Messenger app that subscribes to the page. To perform the following steps you need to first create a Facebook page and a Facebook Messenger app. Let’s discuss the further steps here:

  1. Having created a Facebook Messenger app, get its Page Access Token. You can get this on the app’s Messenger Settings tab:
  1. In the same tab, click Set up Webhooks. A dialog box called New Page Subscription will open. Keep it open in one browser tab.
  1. In another browser tab, from the Integrations page of API.AI, click Facebook Messenger:
  1. Copy the URL in the Callback URL text field. This is the URL of the API.AI agent to call from the Messenger app. Paste this in the Callback URL text field of the New Page Subscription dialog box on the Facebook Messenger app.
  2. Type in a verification token. It can be anything as long as it matches the one on the other side. Let’s type in iam-einstein-bot.
  3. Subscribe to messages and messaging_postbacks in the Subscription Fields section. And wait! Don’t click Verify and Save just yet:
  1. In the API.AI browser tab, you will have the integrations settings open. Slide the switch to on from the off position on the top-right corner.
  2. This will allow you to edit the settings. Type the Verify Token. This has to be the same as the one used in the Facebook Messenger App settings in step 5.
  3. Paste the Page Access Token and click START.
  4. Now go back to the Facebook Messenger app and click Verify and Save. This will connect the app to the agent (chatbot).
  5. Now on the Facebook Messenger settings page, under Webhooks, select the correct Facebook page that the app needs to subscribe to and hit Subscribe:

You should now be able to open the Facebook page, click Send Message, and have a chat with the chatbot:

Brilliant! Now you have successfully created a chatbot in API.AI and deployed it on two platforms: web and Facebook Messenger. In addition to these platforms, API.AI enables integration of your agent with several popular messaging platforms such as Slack, Skype, Cisco Spark, Viber, Kik, Telegram, and even Twitter.

If you found this post useful, do check out the book, Hands-On Chatbots and Conversational UI Development, which will help you explore the world of conversational user interfaces.

Read Next

Build and train an RNN chatbot using TensorFlow [Tutorial]

Facebook’s Wit.ai: Why we need yet another chatbot development framework?

Voice, natural language, and conversations: Are they the next web UI?

LEAVE A REPLY

Please enter your comment!
Please enter your name here