Installation
Last updated
Was this helpful?
Last updated
Was this helpful?
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 .
Create your account by up for Kommunicate. You can signup for free in Kommunicate. If you already have a Kommunicate account, to your account and go to the section and copy the script.
Or
You can copy the below script and replace required parameters manually.
Use web server to view HTML files as real-time updates will not work if you directly open the HTML file in the browser.
Copy the Javascript code from below and paste it just above the closing of body tag () on every page you want the chat widget to appear.
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
String
A unique application ID assigned to your Kommunicate account.
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.
Array of objects
String
This is your user’s/visitor's user ID. Kommunicate will generate a random ID if this is not defined.
String
This is the display name of the user. Agents will identify users by this display name.
String
Email ID of the user. If not online, the user will be notified by fallback emails sent to this email ID.
Function
Boolean
Default: true if you want to disable the attachment option in the chat widget, set this parameter to ‘false’.
Boolean
Default: false Emoticons library will be available in the chat widget if this parameter is set to true.
Boolean
Default: false If you want to enable location sharing in the chat widget, set this parameter to true.
Boolean
Boolean
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.
Boolean
Default: false set it true to enable the voice input. This feature is only supported in Google chrome versions >= 33.0
Boolean
Object
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)
String
Default: null - Here you can pass the user's phone number which will be diaplayed on the dashboard-rightside user details panel, pass the phone number as a string.
Here’s an example screenshot for the same:
Import the KommunicateChat component in your App.js file. Here’s an example screenshot.
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();
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.
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
The ng serve command launches the server, watches your files and rebuilds the app as you make changes to those files.
If you run the browser, you should see a chat widget screen pop up and that means your chatbot is ready.
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.
Paste the javascript code into the component file inside the script tag. The code of the component should look like this:
Note: Make sure you replace “YOUR_APP_ID” with your APP Id provided in the install section.
We have written step by step instructions if you are using website builder tools or CMS for your website:
This will enable in chat. Users will be asked to enter the name, email and phone number when they start a conversation.
This function will be called after the chat plugin is . Here, you can define the actions to be done after the plugin is initialized.
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 .
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: method and msgTriggerTimeout option won't be compatible with this option.
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 . This feature is only supported in Google chrome versions >= 33.0, Edge, Firefox, Safari, Mozilla, and Opera.
This appSettings
object can be used to override the values set from the dashboard's . The values that can be overridden are explained .
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 with your
You can get this code in the section of Kommunicate dashboard.
The –open (or just -o) option automatically opens your browser to
To install the chatbot, open Kommunicate and navigate to Dashboard →Settings. Click on under the Configuration section. Copy the code and add it to your website or application.