Build iconic/cordova chatbot with dialogflow

In the previous post, we presented you with simple and effective guides to integrating Dialogflow bot in a website, Android and iOS apps.

In this article, we will be sharing steps to do the same in an Ionic/Cordova app. All you need to build a sample chatbot using  Dialogflow and Kommunicate for an Ionic/Cordova app. 

Both Kommunicate and Dialogflow have free accounts so you can get started right away.

Below is an example of Kommunicate Support Bot (a customer support qualifying bot) developed in Ionic/Cordova/PhoneGap using Dialogflow and Kommunicate. You can check out the functionality of the Kommunicate Support  Bot on Kommunicate website.

In Kommunicate’s Ionic/Cordova/PhoneGap plugin, we support both Android and iOS and we made it simple using npm package install.

The actionable rich messaging powered bot can reply based on whether users are on chat for general queries, technical queries, checking out or scheduling a demo. Check the image below:

Kommunicate Support Bot with Actionable Rich Messaging

You can use your existing Dialogflow bot or checkout bot samples to build a qualifying bot of your own. Download the Kommunicate Support Bot from here and import into your Dialogflow account.

Now, let’s jump into the crux of the post.

Building Ionic Cordova chatbot

Step 1: Setup an account in Kommunicate

This is fairly simple. You can get a free account in Kommunicate. Signup and navigate to the Bot section. Click on Settings in Dialogflow block.


integrate Dialogflow with angular JS upload key file

Now, navigate to your Dialogflow console and download the service account key file. Here are the steps to locate the file:

  1. Select your Agent from the dropdown in the left panel.
  2. Click on setting button. It will open a setting page for the agent.
  3. Inside general tab search for GOOGLE PROJECTS and click on your service account.
  4. After getting redirected to your SERVICE ACCOUNT, create a key in JSON format for your project from the actions section and it will get automatically downloaded.
  5. Now upload the key file.

If you are using V1 APIs, just copy your client and developer token from Dialogflow console and paste in the fields provided. Click on Save and Proceed.

Setup your bot’s name and profile picture and choose whether to allow the bot to human handoff for your newly created bot. Click Finish bot integration setup and voila, your bot is now integrated.

Building Ionic/Cordova Chatbot Kommunicate

You can check/edit your integrated bot using the below path:


Write A Comment