Installation · Developer Docs

Overview

Kommunicate is live-chat and chatbots powered customer support software. Kommunicate allows you to add live chat on your website that enables you to chat with your website visitors and customers using a beautiful chat widget.

Installing Kommunicate is fast and easy. Just add a few lines of code in your website and you can start answering your support queries within a few minutes. Kommunicate can also be used with any of Website Builder.

Web chat icon

Web installation

Step 1: Get the customized plugin script from Kommunicate dashboard

Create your account by signing up for Kommunicate. You can signup for free in Kommunicate. If you already have a Kommunicate account, log in to your account and go to the Install section and copy the script.

You can copy the below script and replace required parameters manually.

caution

Use web server to view HTML files as real-time updates will not work if you directly open the HTML file in the browser.

Script

Copy the Javascript code from below and paste it just above the closing of body tag (</body>) on every page you want the chat widget to appear.

<script type="text/javascript">
    (function(d, m){

    /*---------------- Kommunicate settings start ----------------*/

     var kommunicateSettings = {
      "appId": "<APP_ID>",
      "automaticChatOpenOnNavigation": true,
      "popupWidget": true
      /*
      "onInit": function (){
        // paste your code here
      }
      */
      };

    /*----------------- Kommunicate settings end ------------------*/

     var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
      var h = document.getElementsByTagName("head")[0];
      h.appendChild(s);
      window.kommunicate = m;
      m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});
</script>

Step 2: Add the customized Kommunicate plugin to your website

You can customize the plugin by passing below parameters in the kommunicateSettings object. Visit Settings -> Install section in Kommunicate dashboard to get default values for your account.

Parameters	Type	Descriptions
appId	String	A unique application ID assigned to your Kommunicate account.
conversationTitle	String	All conversations will have this title until the conversation gets assigned to the bot/agent. After conversation assignment, the conversation title will be the name of bot/agent whom the conversation is assigned.
preLeadCollection	Array of objects	This will enable lead collection in chat. Users will be asked to enter the name, email and phone number when they start a conversation.
userId	String	This is your user’s/visitor's user ID. Kommunicate will generate a random ID if this is not defined.
userName	String	This is the display name of the user. Agents will identify users by this display name.
email	String	Email ID of the user. If not online, the user will be notified by fallback emails sent to this email ID.
onInit	Function	This function will be called after the chat plugin is initialized. Here, you can define the actions to be done after the plugin is initialized.
attachment	Boolean	Default: true if you want to disable the attachment option in the chat widget, set this parameter to ‘false’.
emojilibrary	Boolean	Default: false Emoticons library will be available in the chat widget if this parameter is set to true.
locShare	Boolean	Default: false If you want to enable location sharing in the chat widget, set this parameter to true.
openConversationOnNewMessage	Boolean	Default: false If this parameter is set to true, the chat window will be opened whenever a new message comes in the chat widget. For more detail check openConversationOnNewMessage.
automaticChatOpenOnNavigation	Boolean	Default: false If the chat widget is open and the user navigates to some other section in the website or to some other tab, then keep the chat widget open with the current active conversation Note: Kommunicate.startConversation() method and msgTriggerTimeout option won't be compatible with this option.
popupWidget	Boolean	Default: false Setting this parameter to true will change the position of the “chat widget close button” which will now appear on the launcher icon itself, such that your users can open and close the chat widget from the same button. By default, when it is false, the close button appears at the top right corner of the chat widget. Note: The custom launcher icon is not supported if this option is set to true.
voiceInput	Boolean	Default: false set it true to enable the voice input. This feature is only supported in Google chrome versions >= 33.0
voiceOutput	Boolean	Default: false set it true to enable the voice output. Voice output supports the file attachments and location. Also, you have an option to change the default voice output message for the attachment and location here. This feature is only supported in Google chrome versions >= 33.0, Edge, Firefox, Safari, Mozilla, and Opera.
appSettings	Object	This `appSettings` object can be used to override the values set from the dashboard's chat widget section. The values that can be overridden are explained here.
imageLink	String	Default: null - This will add the user's avatar image on the dashboard, pass the image link as a string that can be accessible on the internet (if the image is present in your local system then broken image will be displayed)
contactNumber	String	Default: null - Here you can pass the user's phone number which will be displayed on the dashboard-rightside user details panel, pass the phone number as a string.
quickReplies	String	You need to add the quick replies that need to be shown when clicked on the chat widget.
capturePhoto	Boolean	Default: false set it true to enable the Camera icon. Camera icon appears when you enable, and it will open the camera for mobile devices as soon as you click on the icon. NOTE: Camera of a laptop will not open, the feature will work only for mobile devices.
hidePostFormSubmit	Boolean	Default: false set it true to enable the feature. The form will hide itself post submission.
timeFormat24Hours	Boolean	Default: false set it true to enable the feature. Message timestamp will be shown in 24 Hours format.

Trigger buttons in Chat widget

Add the parameter “quickReplies” along with the respective quick replies inside the kommunicateSettings. An example script is mentioned below.

(function(d, m){
        var kommunicateSettings =
            {"appId":"APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true,"quickReplies":["Speak with an Agent","Book a Demo","Sample Bots"]};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});

Trigger buttons in Chat widget

Change Bot Voice & Bot Rate

Kommunicate provides parameters to change the chatbot rate and the chatbot voice to different languages and based on gender (male/female).

Below is the sample code to change the bot voice & the bot rate:

(function(d, m){
        var kommunicateSettings = {
             "appId":"APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true,
             "voiceOutput":true,
             "voiceName":"Google Deutsch", // Replace Google Deutsch with the voiceName or an array of voiceNames from the below mentioned table list
             "voiceRate":1};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});

Below are the details about the supported parameters:

Parameters	Type	Description
appId	String	A unique application ID assigned to your Kommunicate account. You will get the appId from Install section
voiceOutput	Boolean	Default: false Set it true to enable the voice output
voiceName	String OR Array	To set the voiceName to different languages and as a Male/Female voice. Use any of the "voiceName" from the below table list. Please choose the voiceName based on the browser.
voiceRate	Number	Default value - 1. Any number between 0 to 10

Windows & Google Chrome

Language	voiceName
en-US	Microsoft David Desktop - English (United States)
en-US	Microsoft Zira Desktop - English (United States)
de-DE	Google Deutsch
en-US	Google US English
en-GB	Google UK English Female
en-GB	Google UK English Male
es-ES	Google español
es-US	Google español de Estados Unidos
fr-FR	Google français
hi-IN	Google हिन्दी
id-ID	Google Bahasa Indonesia
it-IT	Google italiano

Windows & Mozilla Firefox

Language	voiceName
en-US	Microsoft David Desktop - English (United States)
en-US	Microsoft Zira Desktop - English (United States)
en-US	Microsoft David Desktop - English (United States)
en-US	Microsoft Zira Desktop - English (United States)

Mac & Google Chrome, Mozilla Firefox, Safari

Language	voiceName
ar-SA	Maged
cs-CZ	Zuzana
da-DK	Sara
de-DE	Anna , Google Deutsch
el-GR	Melina
en-AU	Karen
en-GB	Daniel , Google UK English Female , Google UK English Male
en-IE	Moira
en-IN	Rishi , Veena
en-US	Alex , Fred , Samantha , Victoria , Google US English
en-ZA	Tessa
en-scotland	Fiona
es-AR	Diego
es-ES	Jorge , Monica , Google español
es-MX	Juan , Paulina
es-US	Google español de Estados Unidos
fi-FI	Satu
fr-CA	Amelie
fr-FR	Thomas , Google français
he-IL	Carmit
hi-IN	Lekha , Google हिन्दी
hu-HU	Mariska
id-ID	Damayanti , Google Bahasa Indonesia
it-IT	Alice , Luca , Google italiano
ja-JP	Kyoko , Google 日本語
ko-KR	Yuna , Google 한국의
nb-NO	Nora
nl-BE	Ellen
nl-NL	Xander , Google Nederlands
pl-PL	Zosia , Google polski
pt-BR	Luciana , Google português do Brasil
pt-PT	Joana
ro-RO	Ioana
ru-RU	Milena , Yuri , Google русский
sk-SK	Laura
sv-SE	Alva
th-TH	Kanya
tr-TR	Yelda
zh-CN	Ting-Ting , Google 普通话（中国大陆）
zh-HK	Sin-ji , Google 粤語（香港）
zh-TW	Mei-Jia , Google 國語（臺灣）

Installation with Frameworks

React JS

There are two ways to integrate the Kommunicate chat widget into React website or project.

Install the Kommunicate chat widget plugin as a package in the React project with the following npm command.

npm i @kommunicate/kommunicate-chatbot-plugin

Further more in the index.js file, import the widget as Kommunicate.
Add Kommunicate.init("YOUR_APP_ID" ,"popupWidget":true,"automaticChatOpenOnNavigation":true)
Replace YOUR_APP_ID with APP_ID provided to you by Kommunicate. You can get your APP_ID from here

import Kommunicate from '@kommunicate/kommunicate-chatbot-plugin';

Kommunicate.init("YOUR_APP_ID" , {...optionalSettings})

ReactDOM.render(
  ...
    <App />
  ...
  document.getElementById('root')
);

Creating a component in your React project to install the Kommunicate chat widget.

Step 1: Create new file chat.js inside src folder

Once you create the chat.js, add the below code in componentDidMount. The below code will launch a chat widget on your website with the integrated Dialogflow bot. Make sure to replace <YOUR_APP_ID> with your Kommunicate Application ID

You can get this code in the Install section of Kommunicate dashboard.

(function(d, m){
        var kommunicateSettings = {"appId":"<YOUR APP_ID>","popupWidget":true,"automaticChatOpenOnNavigation":true};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
      })(document, window.kommunicate || {});

Here’s an example screenshot for the same:

ReactJS

Step 2: Import KommunicateChat component in App.js

Import the KommunicateChat component in your App.js file. Here’s an example screenshot.

ReactJS

Dialogflow Chatbot integration with React JS

Note: If any Kommunicate functions need to be executed, the 'window' object must be declared before the function. Because the 'window' is a global object in the browser environment and allows the Kommunicate script file to be accessed from the react component.

Example: To launch conversation after the chat widget is loaded, use window.Kommunicate.launchConversation();

Angular JS

Install chatbot in the Angular component

Install chatbot on the angular component. The CLI will create the first Angular component. It is the root component and is named app-root.

Run any code editor and open workspace folder (my-app).

Note: Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "My First Angular App!";
}

To install the chatbot, open the Kommunicate Dashboard and navigate to Settings -> Install -> Web section. Copy the JavaScript code to be added either in your website or your application.

Paste the javascript code into the app.component.ts file. The code of the component should look like this

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "my first app";
  ngOnInit() {
    (function (d, m) {
      var kommunicateSettings = {
        appId: "<YOUR APP-ID>",
        popupWidget: true,
        automaticChatOpenOnNavigation: true,
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
      var h = document.getElementsByTagName("head")[0];
      h.appendChild(s);
      window.kommunicate = m;
      m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});
  }
}

Note: Declare the variable as (window as any).kommunicate if a TypeScript error occurs due to the variable not being declared as global variable.

The ng serve command launches the server, watches your files and rebuilds the app as you make changes to those files.

The –open (or just -o) option automatically opens your browser to http://localhost:4200/

AngularJS

If you run the browser, you should see a chat widget screen pop up and that means your chatbot is ready.

Example Angular project

Dialogflow Chatbot integration with Angular JS

Vue JS

To install the chat widget in the Vue.js component, either create a new component file or add the Kommunicate install code in your existing component file. A simple and effective way to solve this is by adding your external script into the ‘Vue mounted()’ section of your component.

Run any code editor and open your workspace folder to further navigate to the component file.

Note: Vue Components are one of the important features of Vue.js that create custom elements, which can be reused in HTML.

To install the chatbot, open Kommunicate and navigate to Dashboard →Settings. Click on Install under the Configuration section. Copy the code and add it to your website or application.

Paste the javascript code into the component file inside the script tag. The code of the component should look like this:

<script>
export default {
    methods: {
    },
    mounted (){
      (function(d, m){
        var kommunicateSettings = {"appId":"YOUR_APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
      })(document, window.kommunicate || {});
    },
    data: function(){
    }
}
</script>

Note: Make sure you replace “YOUR_APP_ID” with your APP Id provided in the install section.

Example Vue.js project

Dialogflow Chatbot integration with Vue JS

Install Chat widget in iFrame

Add the following iframe in the HTML body of your application

<iframe
            style="border: none;"
            height="600px"
            width="400px"
            src="https://widget.kommunicate.io/chat?appId=YOUR_APP_ID"
            allow="microphone; geolocation;"
        >
</iframe>

Note: Make sure you replace “YOUR_APP_ID” with your APP Id provided in the install section - https://dashboard.kommunicate.io/settings/install

An example is provided below.

Chatwidget iFrame

Install on website builders or Content Management Systems (CMS)

We have written step by step instructions if you are using website builder tools or CMS for your website: