Kompose GUI Bot Builder
Overview
Kompose is a GUI bot builder based on natural language conversations for Human-Computer interaction. You don’t need any coding skills to master Kompose. It has a simple, intuitive, and easy-to-use interface.
Bot Integration with the Kompose
- Login to your Kommunicate dashboard.
- Navigate to the
Bot Integrationsection >> SelectKompose - Bot Builder>> Select your bot
Tutorial Blog: Create a chatbot using Kompose bot builder
Video tutorial: Create a chatbot using Kompose bot builder in 5 minutes
Configure Intents in Kompose
- Enter the 'Answer' section in Kompose-bot builder.
- Setup questions and answers for your bot in this section.
- Add training phrases for your intent like this:
To achieve good results, make sure that insignificant(non-contextual) words are not repeated in every training phrase. Also, try to have at least 3 to 4 training phrases for each intent. For example, 'Why', 'I', 'constantly' etc. are insignificant words in the above shown example and therefore should not be repeated in every training phrase for good accuracy. This is to make sure that the correct intent only gets triggered with the right context.
Case 1. Correct intent gets triggered.
Case 2. Response for unknown user input gets triggered.
Bot to Human handoff in Kompose
Bot to human handoff is useful when the bot is unable to answer the customer question or is unable to understand what the customer is saying and if the user needs to talk to a human agent directly.
1. Fallback Intent
- In Kompose, there's an intent "Default Fallback". In this intent, you have to setup fallback message when bot is not able to answer. You have to set the bot message that should be shown to user, if it's unable to answer. When none of the intents are matched, the fallback intent is triggered, the bot response associated with it is shown to the user. Go to Bot Says Section then Click on more and then select Handover
2. To Assign a conversation to a specific support agent
- Go to Bot Says Section then Click on more and then select Handover and then click on "Assign to a Teammate"
- If you do not want to use the Handover method then you can also add the JSON code below (as a custom payload) to the bot response of the Intent. Specify the agent's email ID (same email ID which an agent uses to log into the Kommunicate dashboard) in
KM_ASSIGN_TOparameter. IfKM_ASSIGN_TOparameter is left empty, the conversation routing rules will be applied and the conversation will be assigned to a human agent based on the routing rules.
{
"platform": "kommunicate",
"message": "our agents will get back to you",
"metadata": {
"KM_ASSIGN_TO": ""
}
}
Set
"KM_ASSIGN_TO": "<AGENT'S USER_ID>"if you want to assign the conversation to specific agent.
Disable Small Talk option in Kompose
- Login to your Kommunicate dashboard.
- Navigate to the
Bot Integrationsection >> SelectKompose - Bot Builder>> Select your Bot >> Click on Small Talk >>Click Setting ⚙️ >> Disable Small Talk
Extract Entities
Entities are used to identify and extract useful data from user inputs. Kompose supports extracting the user's entities like email, phone number etc.
To add the entities
- Login to your Kommunicate dashboard.
- Navigate to the
Bot Integrationsection >> SelectKompose - Bot Builder>> Select the bot >> Select Answer >> Type your training messages >> Then in Bot Says section
Custom Entity
Custom entities help us to identify and extract the useful data from the inputs given by the end user.
There are 2 ways to create the custom entity in the Kompose bot builder
- via the Extract entities dropdown that is available on the Bot Says section of the Answers page.
- via the Entities tab on the Kompose Settings page.
1. Create entities from the Kompose Answer page
Step: 1
Click on the Extract Entities >> Create Custom Entity >> Fill the entity details as shown in the following images.
Provide the Entity name, Variable name, and the Values(entity type name and synonyms)
Entity name: A name given to the custom entity. Eg. Shirt Size
Variable name: It's automatically generated by the system using the Entity name filled. Eg. ShirtSize
Add values:
Entity type: Entity type for ShirtSize is small, medium, large, extra-large.
Enter synonyms: Synonyms for the entity type ShirtSize is M and Medium can be synonyms for the medium entity type.
Click on the +Add row link to add more entity types.
Step: 2
After creating the entity, go to Extract Entities and select the created entity as shown below;
After selecting the entity, extract it using variable name as shown below
You have successfully created the entity and extracted it from the user input, now you will have to add the training phrases in the User says section of the same intent as shown below;
Entity extraction is enabled now, check out the following test page
2 Creating entities via the Entities tab on the Kompose Settings page
There is another way to create the entity, this will allow us to EDIT and DELETE the entity. Also, we can create entities and save them priorly.
Step 1: Go to Settings⚙️ available on the top right corner of the Kompose Bot builder
Step 2: Click on Create Entity >> Fill all the required fields and create the entity
Step 3: You can manage the created entities. Edit, Delete, and Disable entities options are available in this section.
Webhooks in Kompose
Webhook feature in Kompose allows you to send responses to your user from your own custom webhook server. This is helpful when you need to return some data from your data base or need to send some responses based on your own custom logic.
Integrate your webhook with Kompose
Navigate to the
Bot Integrationsection >> SelectKompose>> Select Bot >> Click Setting ⚙️ >> WebhookThis section will ask you a webhook URL and request header for the webhook. Webhook URL is required at your backend server so that messages sent to bot can be forwarded to your server. You can use same webhook for multiple bots or can configure different webhook. Kommunicate will send the data to your webhook in below format:
{
"botId": "bot id who has received the message. This id is same as shown in dashboard.",
"key": "unique id for every message",
"from": "user id who has sent the message",
"message": "message sent by user to the bot",
"nlpResponse": [ { "message": "Greetings!" } ],
"matchedIntent":"greetings.hello",
"groupId": "conversation id",
"metadata": "extra information with message",
"contentType": "content type of the message (text, html, location, etc)",
"applicationKey": "your APP_ID shown in Dashboard Install section",
"source": "identifies if message is sent from web or mobile",
"eventName": "events ie. WELCOME , KOMMUNICATE_MEDIA_EVENT etc",
"createdAt": "message sent time"
}
- Kompose sends the message to your webhook and waits for the response. The timeout limit for the webhook URL is set to the 30 seconds. Your webhook should return the array of message in response in below format:
[{
"message": "A message can be simple as a plain text"
}, {
"message": "A message can be a rich message containing metadata",
"metadata": {
"contentType": "300",
"templateId": "6",
"payload": [{
"title": "Suggested Reply button 1",
"message": "Suggested Reply button 1"
}, {
"title": "Suggested Reply button 2",
"message": "Suggested Reply button 2"
}]
}
}]
Each object in message array is rendered as separate message in Kommunicate chat widget.
Welcome message from bots
Kommunicate sends some specific events to your webhook in eventName property. When a user creates a new conversation Kommunicate sends eventName: WELCOME to your webhook. You can check for this property in payload and reply with a welcome message.
Skip bot welcome message
Skip the 'WELCOME' event from dialogflow by setting
"skipBotEvent":'["WELCOME_EVENT"]'
Skip bot welcome message through Settings
var defaultSettings = {
"skipBotEvent": '["WELCOME_EVENT"]',
};
Kommunicate.updateSettings(defaultSettings);
Skip bot welcome message for a specific conversation
var conversationDetail = {
"skipBotEvent":'["WELCOME_EVENT"]'
};
Kommunicate.startConversation(conversationDetail, function (response) { });
Send attachments to bot
When a user attaches a file or shares location, Kommunicate sends eventName: KOMMUNICATE_MEDIA_EVENT to your bot along with the attached file information. You can find the file information in KM_CHAT_CONTEXT object in metadata.
Below is the sample of webhook payload with attachment detail:
This is sample JSON for file attachment:
{
"eventName": "KOMMUNICATE_MEDIA_EVENT",
"metadata": {
"KM_CHAT_CONTEXT": {
"attachments": [{
"type": "image/png", // media type (in form of type/subtype) . Use the regex 'type/*' to get the generic type
"payload": {
"name": "file name",
"url": "file url",
"size": "size in bytes"
}
}]
}
},
"createdAt": 1552638706610,
}
Attachment object for location message
{
"attachments": [{
"payload": {
"lat": "Latitude",
"lon": "Longitude"
},
"type": "location"
}]
}
Bot Events
Bot Events signify communication that can't be captured easily through text or voice. Examples include clicking a 'Buy' button, and adding an item to the shopping cart.
Trigger event on Kompose platform
Call the following function to trigger an event for the Kompose bot.
var messagePxy = {
"type": 5,
"contentType": 10,
"message": "Event: " + <EVENT_NAME>,
"groupId": KommunicateGlobal.CURRENT_GROUP_DATA.tabId,
"metadata": {
"category": "HIDDEN",
"KM_TRIGGER_EVENT": <EVENT_NAME> // Name of the intent
},
"source": 1
};
Kommunicate.sendMessage(messagePxy);
For example, if we want to trigger the welcome event, this is what we can do.
var messagePxy = {
"type": 5,
"contentType": 10,
"message": "Event: " + "WELCOME",
"groupId": KommunicateGlobal.CURRENT_GROUP_DATA.tabId,
"metadata": {
"category": "HIDDEN",
"KM_TRIGGER_EVENT": "WELCOME"
},
"source": 1
};
Kommunicate.sendMessage(messagePxy);
Replace: <GROUP_ID> with the group id of the conversation in which you want to trigger the message.
GroupId value will be available in ’response’ of Kommunicate.startConversation call.
Click here to check all supported Events.
Extract WhatsApp Number in Kompose
How to get WhatsApp user’s number in Kompose webhook?
We need to setup a webhook in Kompose Intent first.
In webhook call, the user id is sent to your server.You can use that and get user’s phone number, and then do whatever you want to do e.g. storing it in your database, passing it to some CRM as leads or anything else.
Step 1. Setup the webhook
To setup the webhook, you need to log in into your Kommunicate dashboard then go to “Kompose - Bot Builder” ( https://dashboard.kommunicate.io/bots/bot-builder-list ). Here select the bot for which you want to add webhook, then open any intent scroll to the end and select “Webhook” check box, then either select any of the already created webhook or create a new one.
Step 2. Get user phone in your code
Now, whenever that particular intent will be triggered, the whole payload consisting of multiple details will come to your server as request body. Here is how it looks:
{
"botId": "meet-greet-inb71",
"key": "5-69234790-1662023652048",
"from": "whatsapp:+919872409999",
"matchedIntent": "631077918f0d142ade8ea4ad",
"matchedIntentName": "whatsappChat Intent",
"parameters": {},
"nlpResponse": [],
"message": "whatsapp chat",
"groupId": 69234790,
"metadata": {
"INTEGRATION_CHANNEL_MESSAGE_ID": "ABEGkZhyQFGIAgo6xNGrMtJa8P2_",
"KM_CHAT_CONTEXT": {
"groupId": "69234790",
"botId": "meet-greet-inb71",
"messageSource": "12",
"applicationId": "a546470a05536fa2e39da333fb2c8ea9",
"from": "whatsapp:+919872409999",
"attachments": []
}
},
"contentType": 0,
"applicationId": "a546470a05536fa2e39da333fb2c8ea9",
"source": 12,
"createdAt": 1662023652051,
"eventName": ""
}
Inline Code
If you don't have servers to host your custom functions and calls in the form of Webhooks don’t worry. Now one can use Inline code, where you can write the code within the Kompose bot builder and it gets executed when the corresponding message is triggered. We call the Inline code a Dynamic message.
- Let’s start by creating Inline code. You can find create inline code option right on the bot builder page. Firstly delete any static message from the “Bot Says” like in the below screenshot.
- Enable the “Dynamic Message” and select “Inline Code” and from the below drop-down click on the “Create an Inline Code” button.
- A modal will be opened, there enter a name for Code and desired script. Please don’t change the function name or arguments.
Click on Deploy to make the inline code live for use.
- Now select the created inline code to the bot answers & click on the Train bot.
Alternatively, you can create an Inline Code by setting the Kompose Setting page. One can edit, disable/enable or delete from this page.
Inline Code Example
Doctor's Appointment Booking Chatbot using Inline Code:
We have created a Bot with pre-chat lead collection enabled and collecting the Email of the user. In Welcome Message, we have added two Buttons named "Appointment" and "Register". To handle Appointment Button, we have created an Intent with "Appointment" as a Training phrase and asking patient to select their illness. Below is the payload used for illness selection.
{
"message": "Submit your details",
"metadata": {
"payload": [
{
"data": {
"title": "Choose your Symptoms",
"name": "Associated Symptoms",
"options": [
{
"value": "Headache",
"label": "Headache"
},
{
"value": "Cough",
"label": "Cough"
},
{
"value": "Breathlessness",
"label": "Breathlessness"
}
]
},
"type": "checkbox"
},
{
"data": {
"name": "Submit",
"action": {
"postFormDataAsMessage": "true",
"postBackToKommunicate": "false",
"requestType": "json",
"formAction": ""
},
"type": "submit"
},
"type": "submit"
}
],
"templateId": "12",
"contentType": "300"
},
"platform": "kommunicate"
}
To handle "Submit" Button we have created another Intent named Submit and given Training phease as "Submit" and "Associated Symptoms". To schedule an appointment, we have created an Inline Code by clicking on Settings option present at the top right corner of the Bot builder page and navigating to Inline Code option and clicking on "Create Inline Code" Button. We have named this Inline Code "Submit". The same Inline Code named "Submit" was selcted by enabling Dynamic Message under Bot Says section of "Submit" Intent. Below is Inline Code used.
exports.responseHandler = async (input, callback) => {
try {
let resp = {
"appointment": {
"comment": {
"body": "This is Body",
"public": false
},
"book": "Your appointment is booked with ",
"time": " at 12 PM tommorow"
}
};
if (input.message.includes("Headache")) {
callback([{
"message":resp.appointment.book + "Dr. Vipin" + resp.appointment.time
}]);
}else if (input.message.includes("Cough")) {
callback([{
"message":resp.appointment.book + "Dr. Mukesh"+ resp.appointment.time
}]);
} else if (input.message.includes("Breathlessness")) {
callback([{
"message":resp.appointment.book + "Dr. Rajeev"+ resp.appointment.time
}]);
}
}
catch {
callback([{
"message": "inline code failed"
}]);
}
}
"input" contains all the information regarding that particular Intent. "callback" is used to send the message back to your Bot. Here, we have used input message and replied using callback with appropriate Doctor name scheduled as per the selcted ilness .
Result:
Extract Entities Through Inline Code
Before extracting entities we need to consider few things here.
"1. Response Handler". It is a function which has two parameters. The first parameter is an object which contains the details of the message which triggers a particular intent, and the second parameter is a function which is responsible for generating the response from bot’s end.
Input
The input parameter is an object. It contains all the information which may be required to generate a response.
Such as, we require the data entered by the user in a form, group id or user id to perform any validation and messages sent by the user.
Sample JSON:
{
"botId": "prhelpt-a8ju9", // the id of the bot which is supposed to reply
"key": "5-541471-1628416506417", // unique key associated with a message
"from": "8TXpRYy1bkAZGD4SHAcSatd4uM0b5WiEcM", // userId of the customer
"matchedIntent": "608fdf42ab34748dd5355d94a", // intent id which got triggered
"matchedIntentName": "A sample intent",
"parameters": null, // this will contain extracted entity data
"nlpResponse": [],
"message": "Hello from the end user", // the user input which triggered this intent
"groupId": 65781456, // the group id of the conversation
"metadata": {
// data such as form response, etc will appear in KM_CHAT_CONTEXT
"KM_CHAT_CONTEXT": {
"formData": {
"Name": "John",
"Password": "john123",
"userDetail": "some_secret_detail",
"Gender": "male",
"music_type": [
"metal",
"pop"
]
},
}
},
}
Extracted entities from the “parameters” property
{
"botId":"new-bot-4-xf5i8",
"key":"5-656651-16747851667298",
"from":"8TXpRYy1bkXZhsUyqRiqTtd4uM0b5WiEcM",
"matchedIntent":"63abc4ac48jfy6977d2350e07",
"matchedIntentName":"my name is somename",
"parameters":{
"name":"John"
},
"nlpResponse":[ ],
"message":"my name is John",
"groupId":651451,
"metadata":{ },
}
Callback
The callback is a function, it accepts an array of messages. The messages are objects. A message can be a plain text or it can be a rich message. Refer to the various types of rich messages supported by our platform here.
// example of a simple message
let message1 ={
"message":"Hello Kommunicate"
}// example of a rich message with buttons
let message2 ={
"message":"click on the buttons",
"platform":"kommunicate",
"metadata":{
"contentType":"300",
"templateId":"3",
"payload":[
{
"type":"link",
"url":"https://www.google.com",
"name":"Go To Google"
},
{
"type":"link",
"url":"https://www.facebook.com",
"name":"Go To Facebook",
"openLinkInNewTab":false
}
]
}
}
callback([message1, message2]);;
Personalize
Nowadays, customers expect better and more personalized communication. A chatbot that addresses the customers by name gives more personalized or human-touch responses than one that does not.
Personalising Kompose chatbot responses make the conversation more interactive, interesting and customer feel happy.
There are 3 ways to personalize the Kompose chatbot responses.
User Information/Pre-chat form
Chat context
Conversation Info
User information/Pre-chat form
To send the personalized message to a end user, we can use the information shared by the user via pre-chat form.
Step 1: Create a Kompose chatbot, add the following bot response/message in the Default Welcome Intent. We have also added the possible user fields in the intent text box UI, use them to write the personalized welcome message.
Welcome Intent/Bot Message
Hello $user_name,
Thanks for contacting us, your email is $user_email and contact number is $user_phone.
Step 2: The user information such as name, email and phone number will be fetched from the pre-chat data that was previously provided by the customer as shown below.
Step 3: The personalized message sent by the chatbot is shown below
Chat context
Generally, Chat context is used to send the user information to the Bot platform, the data we are passing in the chat context can be fetched and used to send personalised messages to the end user. We will be passing the user information(name, email and phone numbr) in the Kommunicate install script itself.
NOTE: Pre-chat form will be disabled in the Chat context case, if you use the Pre-chat form, the data passed via chat context will be overridden. The information passed via pre-chat form will be used by the chatbot to send the personalised message.
Install script with Chat Context user information:
(function(d, m){
var kommunicateSettings =
{"appId":"3d5cd4f5c269dfe504be8f28586e32747","popupWidget":true,"automaticChatOpenOnNavigation":true,"onInit": function() {
var chatContext = {
"name" : "PoojaGC", "mail" : "poojagc1@gmail.com", "phonenumber" : "8861921749"
}
Kommunicate.updateSettings({"KM_CHAT_CONTEXT":chatContext});
}};
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 || {});
The data we have passed(name, email and phone number) in the chat context will be used to send the personalised message. The Kompose chatbot side, we will have to use the user fields such as $context_name, $context_mail and $context_phonenumber in the welcome intent.
Welcome Intent/Bot Message
Greetings!
Your email is $context_mail and contact number is $context_phonenumber,
let me know how can I help you?
After adding the intent initiate the chat to see the personalised welcome message sent by the chatbot:
Conversation info
Conversation information is used to show the information on the Kommunicate dashboard. Using conversation information you can show the personalised messages to the user. Information can be fetched by passing the fields such as $conversation_name, $conversation_mail and $conversation_phonenumber.
Installation script
var kommunicateSettings =
{"appId":"3d5cd4f5c269dfe504be8f28586e32747","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 : Use web server to view HTML files as real-time update will not work if you directly open the HTML file in the browser. */
NOTE: You will get the Group ID/Conversation ID right after the chat is initiated, later you will be passing the user information along with the conversation id/group id.
{
groupId: 82166542, //Replace <GROUP_ID> with your <GROUP_ID> value
metadata: {
"name": "PoojaKP",
"mail":"PoojaKP@gmail.com",
"phonenumber": "88619217419",
}
};
Kommunicate.updateConversationMetadata(conversationInfo);
NOTE: You will have to pass the fields $conversation_name, $conversation_mail and $conversation_phonenumber in the follow up intents(shouldn’t be a welcome intent to fetch the information). Because the conversation ID/Group ID won’t be present before the welcome message sent, Group id will be created right after the conversation is started by sending the welcome message.
Example: Welcome Intent has normal Welcome message with 2 buttons Pricing and Details, you will be adding the following Bot Message/Intent in the follow up intent created for the button Details.
Bot Message/Follow up intent
Greetings!
Your email is $conversation_mail and contact number is $conversation_phonenumber,
let me know how can I help you?
End user side receives the following personalized message once the user clicks on a button "Details" as per the above shared example.
Creating multilingual bots in the Kompose platform:
Navigate to the
Bot Integrationunder theBot Integrationssection, clickCreate a bot with Kompose. Once the bot is named, default bot language is selected, and the human handoff setting is configured, click onManage bots.Select the Kompose bot from the bots list, and click on
Go to Bot Builder. On the next page, you need to set up a Welcome Message.
In this case, we are creating a 24alife bot in the English language.
Once you finish adding the Welcome message and intents in the default language, the next step is to click on the language section again and select another language to which you want the bot to respond.
All the intents that are created in the English language are copied to the new language (Polish language for the bot shown here). These copied intents will be initially saved as "drafts"'.
The final step is to get the Intents translated into Polish as shown in the screenshot below. You can use a translator, such as Google Translate, to configure intents in different languages.
Before testing on your website or app, change the browser language to the language in which you want the bot messages to be shown.
No need to change the browser language when testing on Kommunicate test environment.
To change the browser language in Google Chrome, go to Settings > Languages and move the preferred language to the top of the list.
Once you have changed the browser language, the bot will detect it and start the conversation in the same language.
If your website supports multiple languages and you wish to display the specific bot based on the website's chosen language, you can this script.
const languageCode = get lang code from dropdown;
const navigatorLanguage = window.navigator.language || window.navigator.userLanguage;
(function (d, m) {
const kommunicateSettings = {
appId: APP_ID,
popupWidget: true,
automaticChatOpenOnNavigation:true
userLocale: languageCode || navigatorLanguage,
};
const s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = widgetUrl;
const h = document.getElementsByTagName("head")[0];
h.appendChild(s);
window.kommunicate = m;
m._globals = kommunicateSettings;
})(document, window.kommunicate || {});