Dialogflow tutorial Kommunicate

Table of content

  1. What is Dialogflow?
  2. Why do you need a chatbot?
  3. Required tools and technologies
  4. Our sample chatbot project
  5. Steps to create your Dialogflow chatbot
  6. Creating an agent
  7. Creating intents
  8. Creating entities
  9. Training the agent
  10. Fulfillment
  11. Knowledge
  12. Integrating Dialogflow chatbot
  13. Dialogflow integrations
  14. Use the Kommunicate chat widget
  15. Build your own system
  16. Tutorial video

What is Dialogflow?

Dialogflow (previously API.ai) is one of the leading chatbot builder platforms. It uses NLP, which enables us to build and implement an interactive conversational interface for website and mobile apps. This Dialogflow tutorial is dedicated to getting you started with creating AI chatbots.

In this article, I will show you how to create a simple chatbot using Dialogflow. You will find details about the tools and the technology used while building a chatbot.

The article also has a walkthrough of the Dialogflow tutorial. It outlines the chronological flow so that you will have a basic idea of how to create a chatbot by the time you finish reading. Moreover, I will also guide you on deploying your newly created Dialoglfow chatbot in websites and apps.

Let us now dwell on the question that why do you need chatbots.

Why do you need a chatbot?

In 2021, as I update this article, chatbots have become a must-have aspect of every business’s customer service suite. You can safely bet on the future and the future of customer service is very closely tied up with chatbots and automation.

Google also declared an imminent shift from a mobile-first world to an AI-first world. Companies across various industries are riding the wave and have deployed AI-powered chatbots for their businesses.

Chatbots, if they can fulfill their potential will be much more sophisticated than traditional apps. They can understand natural human language, by virtue of which, chatbots will be much more interactive and engaging.

As AI improves in the future, talking to a chatbot will be like talking to someone who has the empathy of an actual human being and a brain reminiscent of Google. If you think this is far-fetched, think about your Google Assistant, Siri, and Alexa. Or perhaps watch a couple of episodes of Black Mirror on Netflix 🙂

Now let’s dive deep into this Google Dialogflow tutorial.

Bonus: How to build chatbots without any coding?

Dialogflow Tutorial: How to create chatbots using Dialogflow?

Required tools and technologies

You will be needing these tools to create a Dialogflow chatbot and deploy it on your platforms:

  • Dialogflow: Bot framework to create intelligent chatbots, which you can then integrate with your apps. It is free to use for basic features.
  • Node.js: You need working knowledge of Node.js to define the fulfillment logic, which eventually processes the data.
  • Kommunicate: Once you build your chatbot with Dialogflow, you can easily add it to your website or apps using Kommunicate. If you don’t have a/c, please signup here for free.

Please note that Dialogflow has two options; the good old Dialogflow ES & the new and more interactive Dialogflow CX. Dialogflow CX is a good product, as it supports features like visualization builder, flow, and condition controlling, which is very much needed for building a good chatbot.

But it’s still in beta and lacks some of the standard version’s features like multilingual language support, Knowledge Connectors, doesn’t support many integrations, or any option to import data. Also, Dialogflow CX’s price is somewhat high compared to ES and might be a crucial part of any project.

Source: Dialogflow ES vs. CX

We will be using Dialogflow ES as the base of this tutorial for the reasons mentioned earlier.

Now let me help you get familiar with Dialogflow chatbot, but first, a little about the project as I will be drawing inferences from it in the course of this article.

Our sample chatbot project

RepoFinder (Project Name) – RepoFinder helps you find open source development libraries from Github, based on your input.

You can find the source code and more information on the project on my Github.

Now let’s get started.

Steps to create your Dialogflow chatbot

Dialogflow boasts of a great user experience. Creating chatbots in Dialogflow is simple. You can leverage advanced features along the way. Let’s see how we can do that.

Creating an agent

Sign up for Dialogflow and open your dashboard. The first step is creating an agent, which essentially is the bot you are building.

You can create one through the console by following these instructions:

  1. Go to the Dialogflow ES Console.
  2. Click Create Agent in the left menu.
  3. Enter your agent’s name, default language, default time zone, and GCP project, then click the Create button.

In our case, we’ve named it RepoFinder.

Intents

Next, you will have to create a few intents.

Intents basically help the bot perceive the user’s input and decide the subsequent action. You can create intents both from the console or by calling APIs.

DialogFlow, by default, gives two intents: Default Fallback Intent, Default Welcome Intent. The Default Welcome Intent is triggered whenever any user starts a new conversation with your bot.

On the other hand, Default Fallback Intent is triggered when the bot is unable to match the user’s input with any intent in your agent.

Let’s see how we can make intents. Click the + icon from the left-hand menu and give your intent a name. Let’s name it pricing.

Next, you will have to add training phrases. Training phrases are the possible text inputs your users can ask. For pricing, users can ask in multiple ways. Hence adding a couple of training phrases improves the accuracy of the bot.

Dialogflow tutorial: training phrases

Now, we need to add the Responses (answers) for this particular user input.

You can add responses in the form of text, rich messaging, or custom payload. You can find more information on creating intents here.

Here are a few intents we have create for our RepoFinder bot.

Entities

After creating intents, you need to define entities.

Entities are powerful tools used to extract parameter values from the user’s query. Any actionable data you want to get from a user’s request should have a corresponding entity.

Many preset system entities are available in Dialogflow, such as Given names, dates, units, country names, etc.

But for more specified use cases, you need to create custom entities and train your bot.

Consider our agent RepoFinder. The user says, “Tell me the best Chat SDK on GitHub” — this should tell the agent that the user needs some info on Chat SDK.

So how do you configure the agent to do it?

Well, for each user expression mapped to an intent, the agent needs to figure out the respective input that the user wants info about. This, the agent does with the help of Entities.

For each intent that you create, every user expression should contain a corresponding entity, which your bot agent needs to figure out. By default, the agent can’t do that — you need to train it to do so.

To create entities, you need to list down reference values and their synonyms. Whenever these parameters are mentioned in user inputs, you will be able to extract these parameters and use them further in responses or perform other actions.

Here’s an example of a Chat SDK entity I created.

To use Entities in the conversations, first, define the Training Phrases. If the expressions defined in entities are present in the training phrases, the system will automatically pick up the defined entity values.

  1. The parameter name is used to identify the entities
  2. ‘Value’ of the entity can be used to map entity values in the responses.

To use it in the response, add a ‘$’ sign with parameter name ($chatsdk).

Training the agent

Dialogflow provides a training tool that allows you to add annotated examples to relevant Intents in bulk (see screenshot below).

It helps to improve the classification accuracy of the agent. Here, you will also see all the questions that users have asked your agent and what the agent responded in return.

This is very useful if you tell your agent something and it responds with an output you don’t like. You can easily identify and correct to increase the accuracy of your agent.

It can also be helpful if you realize later that you forgot a synonym of an entity and users are using that a lot, then you can tell your agent what to do in that case.

Dialogflow tutorial: training

Advanced actions: Fulfillment

Answering your users’ questions is good, but what truly makes a bot powerful is the ability to perform custom actions.

For example, a meeting booking chatbot should be able to fetch available time slots and book the meeting; a food ordering bot must be able to convey the available items in the menu and order food for you

In our case, the RepoFinder bot should be able to fetch data from Github whenever someone mentions it.

Every time the bot receives a query, it will first capture the intent and then extract the entity. The next step is to generate a response, which the user is ideally seeking.

You can do this by leveraging webhooks to fetch data from external sources (GitHub API server in our case). You can do this in the Fulfillment Section by specifying the webhook URL.

The penultimate step is to tell the intent to use this Webhook to respond with the data returned from it.

Advanced actions: Connect your knowledge base

If you already have a knowledge base or a set of FAQs, connecting them with your bot can improve its accuracy and range. Additionally, it can reduce the manual work of adding intents and responses, which can be taxing.

Steps to use knowledge base with Dialogflow agents:

  1. Click on the ⚙️  (Gear icon) on the left side panel near the Agent name.
  2. Under the “BETA FEATURES” section, enable the “Enable beta features and APIs” option.
  3. On the left-hand side panel, click on the “Knowledge” option and select the “CREATE KNOWLEDGE BASE“ and give it a name.
  4. Click on the “Create the first one” option to create a knowledge document.
  5. Customize the Document fields according to your requirements.
  6. Give a ‘Data Source’ to the document. This data source could be a URL or a cloud-hosted CSV file.
  7. Verify your data by clicking ‘View Details’.
  8. Lastly, click on the newly created Knowledge base and enable it.

Here’s a more detailed video about connecting your knowledge base to Dialogflow.

Now, your bot is ready to be deployed to websites or apps. Let’s look at a few ways to do this.

Integrating Dialogflow bot in websites or mobile apps

Let’s look at a few ways to deploy your bot to websites, apps, or other platforms.

Dialogflow integrations

Dialogflow provides a range of integrations you can use, such as Facebook Messenger, Slack, Kik Messenger, Telegram, Twilio, etc. You can see all the available integrations by clicking Integration from the left side menu.

Use the Kommunicate chat widget (Recommended)

Kommunicate provides a no-code integration with Dialogflow. You can easily deploy your bot on websites, mobile apps, Facebook, or WhatsApp using Kommunicate.

Here are the instructions to integrate Dialogflow with Kommunicate:

  1. Open Dialogflow agent settings (gear icon on the left panel).
  2. Click on the Google Cloud link, which is mentioned in the Google project bar.
  3. On the Google Cloud page, navigate to the Credentials section by clicking on APIs & services.
  4. Under the Credentials section, find the service account and click on edit for Dialogflow integrations.
  5. At the bottom of the screen, click on ADD key button and create a key option. Download the JSON key
  6. Now, open the Kommunicate dashboard and navigate to the Bot Integrations section.
  7. Choose Dialogflow ES.
  8. Now, give your bot a name and choose an avatar.
  9. In the next section, upload your JSON key, knowledge-base ID (optional), and choose the default language.
  10. In the next step, select whether to enable chatbot to human hand-off or not.
  11. Now, move to the Install section, and follow the instruction to integrate the Kommunicate chat widget into your website, mobile apps, and other platforms.

Here’s a video to help your integration Dialogflow with Kommunicate and further deploying on your chosen platforms:

Now let’s quickly look into why Kommunicate is the recommended way to deploy bots on websites:

  1. Kommunicate comes with a customizable chat widget that gives you complete control over the look, feels, and aesthetics of your chat.
  2. There is a dashboard to add human agents and manage conversations.
  3. In-built bot to human hand-off functionality.
  4. Omni-channel customer communication.
  5. Powerful analytics.
  6. Advanced automation and customer support features.

Build your own system

If you want to do it on the code level, follow the below instructions.

The image below demonstrates the integration architecture and the sequence of information flow:

Dialogflow tutorial - information flow diagram
  1. The user comes to the website and asks for the required library.
  2. The website uses Kommunicate APIs to send messages to the application server.
  3. The application server sends the query to the Dialogflow agent.
  4. The agent uses machine learning algorithms to match the user’s requests to specific intents and uses entities to extract relevant data from them → , thereby processing natural language to convert it into actionable data.
  5. RepoFinder returns the actionable result to the application server. A part of the response of RepoFinder looks like this:

    {
    “parameters”: {
    “keyword.original”: “chat”,
    “keyword”: [“chat”]
    }
    }

    Dialogflow agent’s response with all the details is available here.
  6. The application server calls Github search APIs/internal database to get the list of libraries related to the keyword.
  7. The application server then sends the list of libraries back to the user again by calling Applozic APIs.

Wrapping Up

That is pretty much all you need to do in order to build a simple bot in Dialogflow. I hope this Dialogflow tutorial can give you the initial spark to go on and build chatbots.

You can get the entire project with the source code on Github.

Just play around with Intent, Entities, and Action to build your own flow and chatbot. We can’t deny the fact that chatbots are going to handle most of our customer interactions; starting now would definitely set you on pace with your competitors. Here is a video tutorial for you:

Related Reads:

  1. Dialogflow vs Rasa: Which one to choose for building chatbots
  2. Integrate Dialogflow bot into your apps and websites
  3. What is a chatbot and how to use it for your business?
  4. How to Trigger Different Dialogflow Intents on Different pages

Kommunicate is a modern customer messaging suite to add live chat and chatbot to your websites and social media pages. You can signup for free here and start delighting your customers right away.

1 Comment

  1. I think this is one of the most vital information for
    me. And i’m glad reading your article. But should remark on some
    general things, The website style is great, the articles is really great :
    D. Good job, cheers

Write A Comment