Kommunicate Cordova (Ionic/PhoneGap) Chat SDK for Customer Support https://www.kommunicate.io/

Open Source Cordova Live Chat SDK for Ionic and PhoneGap apps

Overview

Kommunicate provides open source live chat sdk in cordova which works with both Ionic and PhoneGap apps. Kommunicate lets you add real time live chat, in-app messaging and bot integration in your mobile applications and website for customer support. Refer to the official docs here: https://docs.kommunicate.io/docs/cordova-installation

Signup at https://dashboard.kommunicate.io/signup to get the Application ID.

Installation

You can add the plugin using the below command:

cordova plugin add kommunicate-cordova-plugin

For ionic, use the below command:

ionic cordova plugin add kommunicate-cordova-plugin

Declare Kommunicate

Declare kommunicate at the bottom of your .ts file as below to access the functions:

 declare var kommunicate: any;

Launch conversation

Kommunicate provides conversationBuilder function to create and launch chat directly saving you the extra steps of authentication, creation, initialization and launch. You can customize the process by building the conversationObject according to your requirements. To launch the chat you need to create a conversation object. This object is passed to the conversationBuilder function and based on the parameters of the object the chat is created/launched.

Below are some examples to launch chat in different scenarios:

Launching conversation for visitor:

If you would like to launch the conversation directly without the visiting user entering any details, then use the method as below:

 let conversationObject = {
     'appId': '<APP_ID>' // The [APP_ID](https://dashboard.kommunicate.io/settings/install) obtained from kommunicate dashboard.
 }

 kommunicate.conversationBuilder(conversationObject, (conversationId) => {
     //The response will be a conversationId.
     console.log("Kommunicate create conversation successful the conversationId is : " + conversationId);
  }, (error) =>{
      console.log("Kommunicate create conversation failed : " + error);
  });

Launching conversation for visitor with lead collection:

If you need the user to fill in details like phone number, emailId and name before starting the support chat then launch the chat with withPreChat flag as true. In this case you wouldn't need to pass the kmUser. A screen would open up for the user asking for details like emailId, phone number and name. Once the user fills the valid details (atleast emailId or phone number is required), the conversation would be launched. Use the function as below:

 let conversationObject = {
     'appId': '<APP_ID>', // The [APP_ID](https://dashboard.kommunicate.io/settings/install) obtained from kommunicate dashboard.
     'withPreChat': true
 }

 kommunicate.conversationBuilder(conversationObject, (conversationId) => {
     //The response will be a conversationId.
     console.log("Kommunicate create conversation successful the conversationId is : " + conversationId);
  }, (error) =>{
      console.log("Kommunicate create conversation failed : " + error);
  });

Launching conversation with existing user:

If you already have the user details then create a KMUser object using the details and launch the conversation. Use the method as below to create KMUser with already existing details:

  let user = {
      'userId' : '<USER_ID>',   //Replace it with the userId of the logged in user
      'password' : '<PASSWORD>',  //Optional. Put password here if user has password, ignore otherwise
      'displayName': '<DISPLAY_NAME>' //Optional. The name that will be displayed to the agent on dashboard
      'imageLink': '<IMAGE_URL>' //Optional. The display picture for the user.
  }

  let conversationObject = {
     'appId': '<APP_ID>', // The [APP_ID](https://dashboard.kommunicate.io/settings/install) obtained from kommunicate dashboard.
     'kmUser': JSON.stringify(user)
  }

 kommunicate.conversationBuilder(conversationObject, (conversationId) => {
     //The response will be a conversationId.
     console.log("Kommunicate create conversation successful the conversationId is : " + conversationId);
  }, (error) =>{
      console.log("Kommunicate create conversation failed : " + error);
  });

If you have a different use-case and would like to customize the chat creation, user creation and chat launch, you can use more parameters in the conversationObject.

Below are all the parameters you can use to customize the conversation according to your requirements:

Send data to bot platform

You can set the data you want to send to the bot platform by calling the updateChatContext method as below:

  let chatContext = {
          'key': 'value',
          'objKey': {
            'objKey1' : 'objValue1',
            'objKey2' : 'objValue2'
          }
        };

  kommunicate.updateChatContext(chatContext);

Logging out the user

You can logout the user from Kommunicate using the below function:

kommunicate.logout(function(response){
       //logout successfull
    }, function(response){
      //logout failed
    });

For sample code you can refer to our sample app made in ionic3 https://github.com/Kommunicate-io/Kommunicate-Ionic-Cordova-Sample-App

Build a BOT on Kommunicate and integrate it in your mobile apps

Kompose

Kompose is a Kommunicate’s bot builder that help you in building your own bot, a techie, non-techie, or a person who doesn’t have any idea about chatbots can also build the bot. Anyone can create a chatbot with the Kompose without any assistance.

Following is the UI to create the BOT

Dialogflow chatbot integration in your Cordova (Ionic/PhoneGap) SDK

Dialogflow is a Google-owned NLP platform to facilitate human-computer interactions such as chatbots, voice bots, etc.

Kommunicate's Dialogflow integration provides a more versatile, customizable and better chatting experience. Kommunicate Cordova (Ionic/PhoneGap) Live Chat SDK supports all of Dialogflow's features such as Google Assistant, Rich Messaging, etc. On top of that, it is equipped with advanced features such as bot-human handoff, conversation managing dashboard, reporting, and others.

You can connect your Dialogflow chatbot with Kommunicate in the following 4 simple steps.

Step 1: Get your API credentials from Dialogflow

• Login to Dialogflow console and select your agent from the dropdown in the left panel.
• Click on the settings button. It will open a setting page for the agent.
• Inside the general tab search for GOOGLE PROJECTS and click on your service account.
• 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.

Step 2: Create a free Kommunicate account

Create a free account on Kommunicate and navigate to the Bots section.

Step 3: Integrate your Dialogflow chatbot with Kommunicate

• In the Bot integrations section, choose Dialogflow. A popup window will open.
• Upload your Key file here and proceed.
• Give a name and image to your chatbot. It will be visible to the users chatting with your chatbot.
• Enable/Disable chatbot to human handoff. If enabled, it will automatically assign conversations to humans in case the chatbot is not able to answer.

Step 4: Install the Kommunicate Cordova (Ionic/PhoneGap) Chat SDK to your app

You can add the Kommunicate SDK in your Cordova (Ionic/PhoneGap) app easily. More information on how to integrate with your Cordova (Ionic/PhoneGap) app [https://docs.kommunicate.io/docs/cordova-installation).

Note: Here's a sample chatbot for you to get started with Dialogflow.