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.

Upload your Dialogflow provided client keys. In case you are using Dialogflow V1, you can copy paste your client and dev tokens. Though, we recommend using Dialogflow V2 for the latest capabilities.

Click on Next and setup Bot Profile by giving it a name and profile picture(optional). You can check your newly created bot in two places:

DashboardBot Integration Integrated Bots: You can check all your integrated bots here
Dashboard → Bot Integration: Your Dialogflow icon should be green with the number of bots are you have successfully integrated.

Step 2: Install Dialogflow integrated Ionic/Cordova/PhoneGap Chatbot SDK into your app

Requirements:

    • Xcode 10.0+
    • Swift 3.0+
    • iOS 9.0+

Now, install Kommunicate SDK in your app.

For PhoneGap, You can add the plugin using the below command:

cordova plugin add kommunicate-cordova-plugin

For Ionic, You can add the plugin using the below command:

ionic cordova plugin add kommunicate-cordova-plugin

Declare the variable before calling any function on it. Write the below line at the end of the file.

declare var kommunicate: any;

Step 3: Exchange data with Dialogflow

Now, you can send the payload data to Dialogflow through chat screen and get a text response from the Dialogflow Agent. Kommunicate provides a ready to use Chat UI so only launching the chat screen is required in this step and you need to pass required details:  

a) First, you need to create a JSON object as shown below and pass the userId and displayName of the user.

     let user = {

                          'userId' : '<YOUR-USERID-ID>',   //Replace it with the userId of that you want to login with

                          'displayName' : '<YOUR_DISPLAY_NAME>',  //Pass Display name 

                    }

b) Next, You need to create a JSON object for conversation and pass the user JSON object with appId, agentsIds and botIds.

                    let conversationObject = {

                         'appId' : '<Your-app-Id>', //Pass your app Id you can get it from the Install section in Kommunicate Dashboard

                         'kmUser' : JSON.stringify(user), //You need to pass the above user JSON here

                         'agentIds' : ['agent@yourdomain.com'], // Pass your Agent ID here. Agnet ID is the email ID of the agent

                         'botIds' : ['bot'] // Pass your integrated bot Id. You will get it from the Integrated bot section.

                    }

c) This is the method for login and  starting a support chat with bot and agent :

             kommunicate.startSingleChat(conversationObject, (response) => {

                           console.log(" Success response : " + response);

                      }, (response) =>{

                           console.log(" Failure response : " + response);

                      });

Run the Ionic/Cordova project and chat with the Dialogflow bot. You can easily integrate Dialogflow in Ionic/Cordova apps in a few simple steps. In case you need more information, you can check out the Kommunicate Ionic/Cordova documentation.

Note: This is only for Android and iOS applications not a website for the website you can check our web install section install

Here are some sample chat screens of the Android and iOS app with Dialogflow and Kommunicate. 

Android chat screens :

IOS chat screens :

Building ionic/cordova chatbot

Sample Application

Download the sample app from here which includes ready to use Kommunicate Ionic/Cordova plugin. 

Well, that’s all from our side. It is really this simple to build chatbot in Ionic/Cordova. Also, our Bot Samples make your life much easier by giving you a ready to use chatbot in Dialogflow. If you have any doubts/suggestion on integrating a bot with your app, let us know in the comments below.


Subscribe here to get the good stuff — we solemnly swear to deliver top of the line, out of the box and super beneficial content to you once a week.

At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup for free and start delighting your customers right away.

Author