Creating A Chatbot Agent With Dialogflow And Kommunicate

19th April 2020

Having a chat feature on your website (commonly called 'live chat') is useful when helping your users overcome any difficulties they are having. You can pop up a little chat window in the page and ask if they need any help finding what they need. This can be especially useful on large commerce sites where users might get stuck looking for things.

The addition of a chatbot also allows you to automatically answer some of more common questions. For example, if a user asks where they can find the delivery and returns policy then a chatbot can automatically respond with a response. These rules can get more complicated, but it depends on what you instruct the bot to answer to.

I was doing some research into chatbots and live chat applications the other day and realised that there are two SaaS platforms that exist that allow a chatbot to be easily integrated into any site. You don't even need to integrate with complex APIs on the site. I thought I would put together a quick overview on how to plug the parts together.

Chatbot integration on a site via a live chat system is possible by using a couple of different services. These are Kommunicate, Dialogflow with Google Cloud Platform Console glueing the two together.

Disclaimer: I have not been paid to promote any of these services. This is simply the result of some research that culminated in putting these services together and produced a nice widget and good natural language rules.

Kommunicate (https://www.kommunicate.io/): This is a chatbot service that allows the integration of a chat widget into a website. It also has the ability to take over chat sessions and help users out personally.

Dialogflow (https://dialogflow.com/): This is a Google product that allows natural language processing. This means that it can be trained to respond to users with a selection of responses.

Google Cloud Platform Console (GCP) (https://console.cloud.google.com/): This is part of the Google ecosystem, but is required in order to use Dialogflow and Kommunicate together. It essentially creates a bridge between the two platforms.

This can all be tied together with a single Google account.

Step 1: Create a Project / Agent in Dialogflow

The first step is to log in to Dialogflow with your Google account and use the Dialogflow product to create a chat agent in DialogFlow. This will start you off with a blank Dialogflow application.

From here you need to setup an Agent, so click on "Create Agent" on the left and create an agent. The agent name can be anything you want, but can't contain spaces or other special characters.

Dialogflow create agent

Note that you can create pre-built agents that contain rules for lots of rules for certain situations. Picking one of these pre-built agents can give you a head start in configuring things.

Dialogflow is where the training of the bot will take place, but it doesn't have its own chat interface (it's just an API). I'll revisit Dialogflow later on, but this is the minimum configuration needed.

Step 2: Setup Google Cloud Platform Console

In order to integrate the Dialogflow chat agent with Kommunicate we need to create a service key. In the Dialogflow admin area select the chat agent created in the previous step, then click on settings button.

Inside the "General" area look under "GOOGLE PROJECT". You should see the project ID and a service account fields. By clicking on the "Service Accounts" link you will create a link between Dialogflow and the Google Cloud Platform.

You should then see a screen that looks like this.

Google Cloud Platform

Click on the menu item to the right hand side of the service account link you just created and select Create Key. This will download a JSON file to your machine. This json file is how you will connect Dialogflow to Kommunicate. First though, we need to set up a Kommunicate account.

Step 3: Kommunicate Integration

With the Dialogflow chat agent in place we now need to setup Kommunicate.

Log into Kommunicate (again using your Google Account) and select Bot Integrations. Select Dialogflow as the integration and you will be presented with a screen allowing you to integrate your Dialogflow bot. On this screen you will then upload the JSON file created in the previous step.

Kommunicate account setup

With that in place you can now copy the integration widget code from Kommunicate. This code needs to be placed into you codebase in order to allow the chat widget to appear on the page.

 Kommunicate code

Before doing that, however, we first need to train the chatbot, so just keep the code handy for now.

Step 4: Chatbot Training

This is the most complex and time consuming part of this process, but it's important to get it right.

Go into the "Intents" area in the Dialogflow agent you created earlier. Here is where much of the initial configuration will happen.

To create a new Intent click on Intents on the left hand menu and click (Create Intent). You can also click on the + symbol next to Intent in the left hand menu.

Dialogflow Chatbot Training

The dialog on the next page is split into sections.

  • Context - This can be used to 'remember' parameters and values that can be passed to other intents.
  • Events - This is an optional section that allows the chatbot to respond to certain events. There are numerous built in Google events, but you can also trigger based on slack messages or Facebook messenger events (assuming you have those systems plugged in).
  • Training phrases - These are the phrases that your chatbot is listening for. If it encounters one of these phrases then the chatbot will react to them. You can enter multiple phrases to allow users to talk to the chatbot in a variety of ways.
  • Action and parameters - An optional section that allows you to set up variables that can be used in the response. This allows the chatbot to feel more human as it responds back to the user. It can also answer questions that the user has posed regarding values.
  • Responses - These are the responses that the chatbot will send back to the user. You can enter multiple options so that the chatbot can respond in a number of different ways. This, again, makes the response seem more human.
  • Fulfilment - An optional section that gives you the ability to trigger events based on how the user interacted with your chatbot. Fulfilment is handled in another area of Dialogflow.

As an example, here is an intent that responds to the question "What is the answer to life, the universe, and everything?" with the answer "42".

Dialogflow Intent Detail

There is quite a bit more to understand here and I have only scratched the surface. I suggest that you read through the Dialogflow documentation in order to understand all of the different parts of the system.

My recommendation is not to jump into this section without a detailed plan of what you want the bot to respond with. Put together a spreadsheet with inputs and outputs and have a plan that includes linking responses together. Once you have a plan you can get started implementing your rules. Remember that in order to flow through the conversation you need to flow from one intent to another. For this reason it is important to understand sub intents and the conversation flow of the system.

You also need to make sure that you have fallback intents so that the chatbot can respond to users when it can't figure out what they mean. By default Dialogflow comes with a default fallback intent, so you should keep that in place. You can also add a few responses so that the chatbot can respond in a variety of different ways.

Step 5: Site Integration

The final step in this process is to integrate the chat bot onto your site.

Drop the Kommunicate code we were given earlier into the page. When you refresh the page you should see something like this in the bottom right hand corner.

Kommunicate widget.

When the user clicks on this logo they will open the chat window and start a session with the chatbot.

Kommunicate widget open

The Kommunicate widget itself has quite a few options available, all of which area easily configurable. This includes the style of the chat widget, controlling the color and logo of the widget itself. Feel free to experiment to see what suits your needs.

There are also options to configure other settings, for example an automatic pop up message, which can be triggered after a certain time delay. This allows you to annoy users easily by popping up a message asking if they need any help.

With this in place you now have a live chat system on your site. When a user sends a message to the chat interface it will go to Kommunicate, then to Dialogflow for parsing, the resulting communication will then be sent back to Kommunicate and forwarded onto the user. It all fits together quite nicely.

That's not the end of the story though.

Step 6: After Go Live

Once you have gone live with you chatbot you should keep an eye on the interactions that your users are having with it. Using these user interactions allows you to plug any gaps you have in your bot responses. This can be done directly through Kommunicate, but you can also see some statistics in Dialogflow regarding how users have interacted with you chatbot. Look out for situations where the chatbot doesn't know what to do and plug those holes by creating new intents or adding new phrases to existing intents.

The great thing about using Kommunicate is that you can see all of the chat sessions that have been started with your chat window, including those that the bot has chatted to. This allows you (or your agents) to jump in and sort out a user's problem when the chat bot isn't quite able to handle their responses.

Jump into the Conversations section (seen in the left hand menu) and you should be able to see the current open chat windows.

Kommunicate chat area

Feel free to experiment with the setup to become familiar with how things work.

Pricing

Both Kommunicate and Dialogflow have pricing models. They do, however, have free tiers that allow you to get started on this without breaking the bank. The basic Kommunicate tier starts at $20 a month, which is very reasonable. Note that you will need this tier in order to use the chatbot integration, but you do get a 30 trial that will allow you to configure everything.

As for Dialogflow, if the chatbot exceeds 180 requests per minute then the next tier up will be needed. Which is around $0.002 per request.

Add new comment

The content of this field is kept private and will not be shown publicly.