DialogFlow — Create your succeeding chatbot

Hi folks,

This is likely to be my second story on this platform, so I’m learning how to do things slowly 👀

What I’m hearing lately is “chatbot is the new trend & companies focusing on how to build nicer ones that can interact with customers and make them feel they’re talking to real person”.

Although I’m against it, people seem so emotional while talking with a customer support or attempting to get feedback on their actions. So, creating humanlike chatbots or interfaces should be the focal point of this story.

I will try to introduce what is DialogFlow and how can it fulfill this request of ours, let’s start nice and easy.

Note: Since their API v2 still in beta, my examples and expressions will be from v1

Agents

We can simply say agents are the projects that operate the all conversation process by using components it contains.

In this example, I will build a basic flight searching case that provides built-in responses to user’s requests.

Note: Every agent you create must have a Google Cloud Project associated with it. If you have an existing Google Cloud Project you can select it from the drop down list. Leaving the default option will create a new Google Cloud Project using the name of the agent. You’ll use this in the next section of the guide.

After creating the agent, we’ll be directed to “create an intent” page.

Intents

An intent maps everything a user states with what your agent does. This first intent will cover when the user asks for the flights to Istanbul today.

Before creating an intent, you can check out what are the “Default” intents provided by DialogFlow to have an idea on what should we follow

After naming our intent (I gave “flight” as an original name 👌) the following page will appear and we are going to start filling User says section with the possible questions that may user ask. Since I’m creating flight searching (only Istanbul in my example) agent, I’m going to include some related questions like destination information.

Interesting and neat feature I’ve observed, after adding “Istanbul” as User says DialogFlow automatically added the parts in yellow.

Next, We’re preparing some of the responses for the User says scenarios. By using “$” We can easily call the parameters defined.

We can also use “Try it now” action to see how my preparations works:

Fulfillment

Until here, we have described a flight agent that can recognize requests from users and response has failed to complete it. 👍

In order to respond correctly via a service or calling an API, we’ll set up fulfillment or webhook we can say.

First, we need to create a JS file to start with,

  • Linux / Mac:

    mkdir ~/my_flights ("my_flights" as project name)
    cd ~/my_flights
    
  • Windows:

    mkdir %HOMEPATH%my_flights ("my_flights" as project name)
    cd %HOMEPATH%my_flights
    

Then we’ll create an “index.js” file in this directory, with following code:

/*
* HTTP Cloud Function.
*
* @param {Object} req Cloud Function request context.
* @param {Object} res Cloud Function response context.
*/
exports.helloHttp = function helloHttp (req, res) {
  response = "This is a sample response from your webhook!" //Default response from the webhook to show it's working


  res.setHeader('Content-Type', 'application/json'); //Requires application/json MIME type
  res.send(JSON.stringify({ "speech": response, "displayText": response 
  //"speech" is the spoken version of the response, "displayText" is the visual version
  }));
};

After this part, we need to give some permissions and billing account information for our google cloud project that corresponds to DialogFlow project, so if you have managed to come to this step check this link.

Bonus: There are also Prebuilt Agents (ie. weather, local services, hotel booking) that you can simply import to your own agent! Thanks for reading,

Cheers!