BGL Tech
Published in

BGL Tech

Create a chatbot to handle your social media

BGL Tech’s Phil Johnson gives a step-by-step guide to creating a simple chatbot using Google Dialogflow and Facebook Messenger:

Photo by Tim Bennett on Unsplash

In this blog I’m going to show you how to create a simple chatbot agent using Google Dialogflow and then wiring it up to Facebook Messenger to provide an easily accessible interface for a user. Once the chatbot agent is implemented you could integrate it with other types of applications or services.

What is Dialogflow?

Dialogflow is a natural language understanding platform provided by Google that enables you to create digital conversation scripts that can be integrated into your own applications and services… https://cloud.google.com/dialogflow/

Generally an automated chatbot agent will be created in Dialogflow which you then use behind your websites, applications or social media pages and accounts.

A single chatbot agent implemented in Dialogflow can be integrated into multiple different applications accessible on different types of devices. For instance, one chatbot agent could be integrated into a Facebook Messenger App, a Slack Channel, Telegram, etc handling all the messages coming in from all those different channels.

Examples of what we can create

At BGL, we use Google Dialogflow as a chatbot agent at some stages of our calls with customers, for instance gathering information before handing over to a real agent who can deal with the call more quickly having all the information to hand. We also use it for some simple queries from customers about their insurance policies.

In this article, I’m going to talk you through creating a simple chatbot agent that gathers some information from a user about what type of technical meetups they are interested in, responding with the types of meetups that the organisation runs allowing the user to select from a range. The chatbot agent then gathers contact details from the user so they can be contacted when the organisation runs a meetup that the user is interested in.

…once the chatbot agent is implemented you could integrate it with other types of applications or services.

We will wire up the chatbot agent to Facebook Messenger here to demonstrate integration to a medium a user can easily use to interact with the chatbot agent but, as previously mentioned, once the chatbot agent is implemented you could integrate it with other types of applications or services.

Create Facebook Page and App

First steps are to create a Facebook Page and a Facebook App, if you already have these then feel free to use your existing ones. This will give the user an accessible way to interact with your Dialogflow chatbot agent in a way they are hopefully already familiar with.

First step is to register as a Facebook Developer here https://developers.facebook.com/

Create a page by going to https://www.facebook.com/pages/create/

Create a business or brand page​. The name can only contain URL-friendly characters (eg AutoPhil)​. Select a category of ‘Entertainment Website’​ and you can skip adding a profile picture or cover photograph unless you really want to.

Create a Facebook App by going to https://developers.facebook.com/

In the top right menu click on My Apps then click Add a New App. ​Select Manage Business Interactions.

Give the app a display name (eg AutoPhil)​, click Just me… for “who can use your app?​” then click ‘Create App ID​’.

NOTE: Leave the next page open as we will need it to wire up our Dialogflow agent when we create it.

Create a Dialogflow Agent

Go to https://dialogflow.com/

Click on the link to Dialogflow ES. This will take you to the Dialogflow Essentials console. This is the standard version of the Dialogflow service and the version used in these instructions. Google recently released Dialogflow CX in Beta which provides a more complex state machine approach more suitable to large and very complex agents.

Sign in with an existing account or create a new one. At the Dialogflow welcome screen click ‘Create Agent’​, give the agent a name (eg AutoPhil) and click ‘Create’.

Wire up the Dialogflow agent to the Facebook App

Open the agent in the Dialogflow console​ and click Integrations in the left menu (If you can’t see a menu click the hamburger icon in the top left of the console)​. Click on the Facebook Messenger Integration.

Note the other out-the-box integrations that you can pick from at this screen including Google Assistant for voice automation rather than typed messages from and to the user. If you don’t see an out-the-box integration, don’t worry as you can integrate your applications and websites with Dialogflow directly using the Dialogflow API.

Dialogflow Facebook Messenger Integration

Go back to the app page in the Facebook developers’ console​, ensure your app is selected in the dropdown in the top left​ then click the setup button inside the Messenger tile.

Set up Messenger in the Facebook App

Scroll down to the Access Tokens section and click to ‘Add or Remove Pages’ then confirm to continue as yourself​. Select the page you created earlier and click ‘Next’​. If you get a warning about permissions, just click ‘Done’ which will assign the necessary permissions.

Adding the page to the Facebook App

Back in the Access Token section, you should now have a button to ‘Generate Token’ next to your page, click on it.​ Check ‘I Understand’ then click the copy button to copy the token to your clipboard.

Back in the Dialogflow Facebook Messenger Integration dialog, toggle the enable button in the top right of the dialog​. Create a ‘Verify Token’ and enter it into the field - this can be any string that you make up​.

Paste the Facebook Page Messenger Token you copied to the clipboard into the ‘Page Access Token’ field​ then click the start button​.

NOTE: Leave the dialog open as we will need to copy the ‘Verify Token’ and the ‘Callback URL’ values into Facebook.

Dialogflow Facebook Messenger Integration setup

Back in Facebook, go the webhooks section and click the ‘Add Callback URL’ button​. Copy the ‘Verify Token’ from Dialogflow and paste it into the Facebook dialog​.

Copy the ‘Callback URL’ from Dialogflow and paste it into the Facebook dialog (note that there is an icon in this field in the Dialogflow dialog as it may be too long to be visible so use that to copy it)​.

Click the ‘Verify and Save’ button in the Facebook dialog.

Facebook — add callback URL

Still in the webhooks section of the Facebook app page, you should now see your page.​ Click the ‘Add Subscriptions’ button next to it. ​

Check the following ​messages​:

  • messages​:
  • messaging_postbacks​

Click ‘Save’.

Facebook — add subscriptions

We can now test that the Facebook Messenger app is wired up correctly to the Google Dialogflow agent.

Go into Facebook Messenger logged in as the Facebook user that you registered as a developer and created the Facebook page with​. Send the Facebook page a “hello” message and see the automated response​

Testing the integration between Facebook Messenger App and Google Dialogflow

How does Dialogflow know how to respond?

In Dialogflow console, click the ‘Training’ menu item then click on a “Hello” message to see the Intent routed to.​

Dialogflow Training

Click the ‘Intents’ menu item then click on the ‘Default Welcome Intent’ to see more details. In Dialgflow, intents are things used to identify what the intent of the user was, given the phrase they spoke or typed.

Find the Default Welcome Intent

In the Training Phrases section we can see “hello” is one of the training phrases, this is why Dialogflow routes to this intent.

Training Phrases

In the responses section we can see “Good day! What can I do for you today?” is one of the responses that Dialogflow will respond with from the Default Welcome Intent. You may have got any other one of the responses in the list.​

Responses

Although we have wired up a Facebook Page Messenger App to this Dialogflow agent, we can test intents by typing test inputs into the field in the top right of the Dialogflow Console and pressing ‘Return’.

Note Dialogflow tells us:​

  • What the user said.​
  • The response.​
  • The intent that was routed to.​
  • The action used by the intent (we’ll go into actions soon!).​
Testing Intents in Dialogflow

Training the Dialogflow Agent

As your Facebook App is not published yet, only you will be able to talk to it via Facebook Messenger. You really need to train you agent for the different types of ways people will ask the same questions. To do this before you publish the app you can set up people you know as testers and ask them to talk to your agent via Facebook Messenger in a way that feels normal to them.

Go to the app in the Facebook developer portal​ and click on ‘Roles’ then ‘Add Testers’. Enter the trainer’s name, fbid or the username then click ‘Submit’. They can then ask your chatbot questions and you can start building up training data.

Let’s try training up our new chatbot agent to handle queries about meetups.

Go into Facebook Messenger logged in as the Facebook user that you registered as a developer and created the Facebook page with, or an account that has been set up as a tester role​.

Type in “What meetups do you run?”​

Notice the response of: “Sorry, I didn’t get that. Can you rephrase?”

Asking the chatbot agent a new question

Go back to Dialogflow Training and see which intent handled the question. You can see it is the “Default Fallback Intent”.

View in Dialgflow Training

Go into ‘History’- notice there is a warning sign next to the question to indicate that no intent was identified to answer the question.

View in Dialgflow History

Let’s add a new intent to handle this question.

Click + to add an intent​ and enter a name of ‘Meetup Types’. Under the Default tab of the Responses section, enter a Text Response of ‘Data and Tech’​ then click ‘Save’.

Adding a new Intent

Click back on Training​ and click on the “What meetups do you run?” question. Click on ‘Default Fallback Intent’​ and select our new Meetup Types Intent then click ‘Approve’.

Set the Intent in Training to handle the new question

Go back to the Meetup Types intent — the question has been added to the training phrases.

Training Phrase added to Intent

Ask the same question in Facebook Messenger now…​

New question in Facebook Messenger App handled by Dialogflow Agent

Adding some intelligence

To begin adding intelligence we can add a range of meetup types that the user can then select from. In Dialogflow we define a range as an entity. For any software developers, an entity is similar to an Enum.

Click + to add an entity​ and enter a name of ‘Meetup’.

Enter two rows, one for Tech with the following synonyms:​

  • Tech​
  • Coding​
  • Developer​

and a second row for Data with the following synonyms:

  • Data​
  • Database​
  • Storage​

Click ‘Save’.

Adding an Entity

On the Meetup Types Intent, under ‘Respones’ click the ‘Facebook Messenger’ tab​ then click ‘Add Responses’​. Click ‘Quick Replies’.

Add a Quick Reply

Add the following quick replies (the second and third match the meetup entity we previously created)​.

  • meetups​
  • Tech​
  • Data​
  • Other​

Also add a ‘Text Response’ asking the user to select a meetup type and move the ‘Quick Replies’ underneath it.​ Click ‘Save’.

Quick Replies

Also add an output context of meetup then click ‘Save’. Contexts are how we pass information between Intents in the digital conversation workflow. We will be able to access the user’s selection of meetup type for the next five Intents in this flow (note the default number five on the output context).

Output Context

Let’s create the next intent in this flow and see how we can handle the incoming context of the users choice and gather some contact details for the user.

Create a new intent called ‘Interested in Meetup Type’​ and enter the input context ‘meetup’​. Enter the output context ‘meetup’​

Enter the Training phrases:​

  • I’m interested in your meetups​
  • Data​
  • Tech​
  • I’m interested in your Tech meetup​
  • I’m interested in your Data meetup​

Click ‘Save’.

Note the first training phrase, if somebody enters that they will come in to this intent without have selected ‘Data’ or ‘Tech’. If somebody enters ‘Data’ or ‘Tech’ into Messenger, or if they select them as a response to the previous intent asking the user to select from our quick replies, they will arrive at this intent. If the user enters the final two training phrases they will also arrive at this intent. Notice from the screenshot that in every training phrase but the first one, Dialogflow has detected that the training phrase contains a value from our entity.

Adding an Intent to ask for user’s contact details

There should have been a meetup parameter created automatically when you entered the training phrases. Ensure it has the following details:​

  • Required: should be checked​
  • Name: meetup​
  • Entity: @Meetup​
  • Prompt: “Which meetup type are you interested in?”​

Also set the action name to ‘meetup-type-interested-in’​ then click ‘Save’.

Update the Meetup Parameter

Add a Facebook Messenger Text Response of: “Thanks for your interest, I’ll need to take your details. Message me with ‘OK’ when you are ready.” Then click ‘Save’.

Add a Text Response

Set the action name to ‘gather-user-info’​ and add two parameters:​

Name: user-name​

  • Required: Yes​
  • Entity: @sys.any​
  • Value: $user-name​
  • Prompt: What is your name?​

Name: user-email​

  • Required: Yes​
  • Entity: @sys.email​
  • Value: $user-email​
  • Prompt: What is your email?​
  • Click Save
Add user contact detail parameters

Set the Default Text Response to be: “Thank you $user-name for your interest in our #meetup.meetup meetups. We will email you at $user-email when we announce the details of our next one.”​ Click ‘Save’.

Note we have included two types of gathered information in the response - the user contact detail parameters gathered in this intent, and also the meetup type gathered in a previous intent and passed through the conversation to this intent via output and input contexts.

Include details captured earlier in conversation in response

That concludes our digital conversation. Let’s see what that looks like in Facebook Messenger now:

Final digital conversation flow

Enhancing with code

The example above shows how to gather information from a user and include customised responses based on information provided but we aren’t actually storing the user’s contact details or meetup preference.

To do that we need to enable a webhook in Dialogflow so we can handle an event on each intent that the webhook is enabled for. This will allow us to access the context in code, pull out the information gathered and store it in any data store we want. In fact, you can do anything here that is possible in code. You can create a web service in any language you want and host it where-ever you want as long as it is publicly accessible and implements the signature specified by Dialogflow for webhooks. The easiest way to implement a webhook is to use the inline editor within Dialogflow which will create a webhook implementation for you hosted in Google Cloud Functions. We won’t implement this for our example but to do this you would do this by clicking on ‘Fulfillment’ then configure and enable the webhook.

Creating a webhook

Once you have a webhook enabled in the agent you can enable it on any Intent you want. Note that there is only one webhook per agent so if you do enable the webhook on more than one intent you are probably going to have to implement conditional logic in the webhook to see which Intent has triggered the webhook to decide which processing should occur in the webhook.

Webhooks are where you can do things like:

  • Look up data​ based on data gathered from a user, for instance the end date on a user’s subscription based on a membership number they have provided.
  • Store data​ gathered from a user. You could enable renewing or cancelling of memberships based on a membership number and some security validation gathered from the user.
  • Anything programmable, such as start tasks. This can be used to do things like start builds and deployments of applications and websites from your company’s Slack channels.

To enable the webhook on an intent, click ‘Intents’, select the intent you want to enable the webhook on and toggle the ‘Enable webhook for this intent’ under the fulfillment section.

Enable the Webhook on an Intent

Debugging and Troubleshooting

If your Dialogflow agent isn’t working as you planned, or you want to see exactly what the context looks like at a certain point in a digital conversation, you can see what’s happening by going through the conversation in Dialogflow’s Try it now functionality described previously and clicking the ‘Diagnostic Info’ button in the bottom right corner.

Diagnostic Info

Further Learning

For further information a good place to start is the documentation for Dialogflow Essentials located here… https://cloud.google.com/dialogflow/es/docs

Why not try adding an intent to the agent created above to deal with the customer selecting ‘Other’ to gather details of what other type of meetup they are interested in, or implement a webhook to store the data gathered?

Summary

  • Use intents to handle incoming messages from the user.
  • Use context to store data for use further down the conversation​.
  • Use entities to limit the range of inputs​.
  • Use action parameters to gather user input data​, identify parameters in training phrases​ and customise responses by including context and parameter values​.
  • Train your agent with multiple people to identify and configure a variety of training phrases that your intents can handle, or create new intents to handle training phrases you hadn’t expected.
  • Use diagnostic info to debug and troubleshoot.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Phillip Johnson

Phillip Johnson

337 Followers

Over 20 years experience in software engineering, mostly in Tech Lead and Lead Dev positions. Passionate about software craftsmanship.