...
Table of Content Zone | ||||||||
---|---|---|---|---|---|---|---|---|
|
The Chatbot V3 is an extension of the existing chatbot where you can have multiple advantages such as never-ending sessions, multiple bots without the need to change the endpoint, the ability for the admin to take charge of any conversation, the ability for the admin to customize the chatbot UI, and so on.
Features
...
With our newest chatbot release, the Orbita platform has an ‘always open’ connection with end clients. This allows for unique customization and interactions with your users including:
Enabling live agent handling (talk real-time with support agents)
Event triggers; watch when users connect or disconnect to handle events
Push messages to individual clients, or multiple (designated using user groups)
Messaging Routing; Push a message to our NLP, or to a secure 3rd party
Features
Real-time Communication - Messages can be pushed from the server to any and all connected clients, allowing requests and responses to be handles handled asynchronously.
Customize the Chatbot UI - Use or tweak Orbita’s out-of-the-box UI, or completely customize the chatbot to represent unique branding and layout.
Targeted Messaging - Push communication to singular users or multiple personas with the ability to target message pushes to connected clients.
...
Login to Experience Manager and Select your project.
Open Experience Designer.
Import the below flow to any Experience Designer tab. Refer How do I export and import flows in Experience Designer
Code Block |
---|
...
[ |
...
{
|
...
"id": " |
...
150f878f. |
...
07127", |
...
"type": " |
...
orbita-bot-provider-v2", |
...
" |
...
z": " |
...
eff2664d.952698", |
...
"name": "", " |
...
botInParser": " |
...
var _ = global.get('lodash');\n// |
...
msg.payload.originalRequest.data = {\n// |
...
\"surveyID\": |
...
\"10000\"\n// }\nif(msg && msg.req && msg.req.query) {\n \n |
...
msg.payload.originalRequest.data.surveyID=msg.req.query.surveyId;\n}\n\nvar socketIOId = _.get(msg, 'req.socketIOId', null);\n\nif (socketIOId) {\n _.set(msg, 'payload.originalRequest.data.socketIOId', socketIOId);\n}\n", " |
...
botOutParser": " |
...
msg.payload.micInput=true;\nmsg.payload.startAlignmentTop = true;\nmsg.enableArrayResponse = true\n", " |
...
transcriptEnabled": |
...
false, "ttsconfig": "{\n \" |
...
languageCode\": |
...
\"en-US\",\n \"ssmlGender\": \"MALE\",\n \" |
...
audioEncoding\": |
...
\"MP3\"\n}", |
...
"providerType": "Google", " |
...
skillConfig": " |
...
1ce992c2. |
...
3c9dfd", "token": "", " |
...
noerr": |
...
0, "nlpData": false, " |
...
x": |
...
380, "y": 320, " |
...
wires": |
...
[ [" |
...
5895d493.b1ae3c" |
...
] |
...
|
...
|
...
|
...
] }, { |
...
" |
...
id": |
...
"16d2d648.241832", "type": "bot-in", "z": "eff2664d.952698", "skillConfig": "1ce992c2.3c9dfd", "name": "", "rules": [], " |
...
x": |
...
190, "y": 320, |
...
" |
...
wires": |
...
[ [" |
...
150f878f.07127" |
...
] |
...
|
...
] }, { |
...
" |
...
id": |
...
" |
...
4c7db3dd.43051c", |
...
...
" |
...
type": |
...
"bot-out", |
...
|
...
" |
...
z": " |
...
eff2664d.952698", |
...
"skillConfig": " |
...
1ce992c2. |
...
3c9dfd", |
...
|
...
" |
...
name": "", |
...
" |
...
x": |
...
740, |
...
|
...
" |
...
y": |
...
320, |
...
|
...
" |
...
wires": [] |
...
}, |
...
{ |
...
" |
...
id": |
...
"5895d493.b1ae3c", |
...
" |
...
type": |
...
"function", "z": "eff2664d.952698", "name": "", |
...
"func": "msg.payload.directive = {\n \"type\": \"mainmenu\",\n |
...
\"title\":\"Menu options\",\n \"buttons\": []\n |
...
}\nreturn msg;", "outputs": 1, |
...
"noerr": 0, |
...
"x": 550, |
...
"y": 320, " |
...
wires": |
...
[ [" |
...
4c7db3dd.43051c"] ] }, { " |
...
id": " |
...
ed4ff8df. |
...
ac8108", "type": "template", " |
...
z": " |
...
eff2664d. |
...
952698", |
...
"name": "",
|
...
" |
...
field": |
...
"payload", |
...
" |
...
fieldType": |
...
"msg", |
...
"format": "handlebars", " |
...
syntax": |
...
"mustache", "template": "<html>\n<head>\n <title>Orbita Bot Test</title>\n |
...
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link |
...
rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css\" integrity=\"sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />\n</head>\n<body>\n <script src=\"/chatbot/v3/chat.js\"></script>\n <script>\n |
...
OrbitaChatBotV3.init({\n |
...
...
projectId: '{{projectId}}',\n |
...
serverUrl: '{{req.headers.x-forwarded-proto}}://{{req.headers.host}}',\n |
...
botContainerId: |
...
'chatWindow',\n |
...
botContentId: 'messages',\n |
...
botInputMessageId: 'input',\n |
...
botSendButtonId: |
...
'orbita-send-button',\n |
...
botMicId: |
...
'chatMic',\n |
...
|
...
botSpeakerId: 'un-mute',\n |
...
|
...
botMenuId: 'menu-icon',\n |
...
|
...
|
...
botIcon: |
...
'chat-icon',\n |
...
botClose: 'menu',\n |
...
customData: |
...
{\n |
...
|
...
|
...
|
...
|
...
chooseFlow: \" |
...
\" |
...
\n |
...
...
},\n |
...
|
...
botSettings: { |
...
|
...
\n |
...
|
...
|
...
elementId: 'orbitabot',\n |
...
|
...
template: 'default'\n |
...
|
...
}\n |
...
});\n </script>\n</body>\n</html>", "output": "str", " |
...
x": 560, "y": 280, "wires": |
...
[ ["2e134f4f.74041"] ] }, |
...
|
...
{ |
...
|
...
"id": " |
...
2e134f4f. |
...
74041", |
...
"type": " |
...
http response", |
...
"z": " |
...
eff2664d. |
...
952698", "name": "", " |
...
statusCode": "", "headers": {}, " |
...
x": |
...
730, "y": 280, " |
...
wires": |
...
[] }, |
...
{ " |
...
id": " |
...
aff90191.d5ce2", "type": "http in", " |
...
z": " |
...
eff2664d.952698", "name": "", " |
...
url": " |
...
/v3Bot", "method": "get", |
...
|
...
"upload": false, |
...
|
...
" |
...
swaggerDoc": |
...
"", |
...
"x": 220, "y": 280, |
...
"wires": [ |
...
["6f9af7b6.e1616"] ] }, { |
...
"id": "d7b89aee.ff7538", "type": "comment", |
...
"z": |
...
"eff2664d.952698", |
...
"name": "v3Bot View",
"info": "",
"x": 200,
"y": 240,
"wires": []
}, {
"id": "6f9af7b6.e1616",
"type": "function",
"z": "eff2664d.952698",
"name": "",
"func": "const util = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 410,
"y": 280,
"wires": [
["ed4ff8df.ac8108"]
]
}, {
"id": "1ce992c2.3c9dfd",
"type": "alexa-skill-config",
"skillname": "Project one",
"projectId": "62022756b9c50f006d7003dc",
"intents": "[]",
"skillstate": "fromsession"
}, {
"id": "slots",
"type": "slots",
"z": "",
"slots": []
}] |
Following the above steps will create a new flow in the Experience Designer as shown below.
...
Add cdnjs.cloudflare.com to the whitelist. 3.2.26 Whitelisting
Coming from version 2 of the bot
Bot In Node
The Bot In node listens to any pushes from the connected clients. Technically, receives socket events from the webpage.
Bot Out Node
Emits a message to the specified client connected (SocketID). Technically, sends socket events to the webpage.
Connected Bots
The Connected Bots node will return an array of all connected clients (socket IDs) at the project level.
No iframes
The Chatbot V3 is not dependent on an iframe to integrate the chatbot into a webpage.
Template node
The required fields in this node are
projectId
,serverUrl
.The
botSettings
property helps in selecting the v3 chatbot setting.
botSettings: { elementId: 'orbitabot', template: 'default' }
The property
template
inside thebotSettings
object will determine which Bot setting the user wants to connect for the Bot (from the Experience manager Develop > Chatbot Settings). If this property is not populated, the Default bot setting will be used.The
elementId
by default is'orbitabot'
. This determines where to inject the template created in the Bot settings. If theelementId
is not mentioned, the default values will be injected.
For users who do not use the botSettings
functionalities,
Add
botSettings: false
in the template node codeSet
botContainerId: 'bot-v3'
in the template node code
If the user wants to use the botSettings
functionality
they must change the below properties to these values,
Code Block botContainerId: 'chatWindow' botSettings: {elementId: 'orbitabot',template: 'default'} //optional
Comment out the below function in the old code, (this is deprecated)
Code Block OrbitaBotPlugins.BotPlugin.init({ botId:'bot-v3',
...
width: '
...
300px',
...
...
height: '
...
600px',
...
...
});
isCustomUi
property is removed. All the element Id properties are made optional. If not specified, default values will be set.
Sample template:
Code Block |
---|
<html> <head> <title>Orbita Bot Test</title> |
...
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link |
...
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> |
...
<script src="/chatbot/v3/chat.js"></script> <script> |
...
|
...
OrbitaChatBotV3.init({ |
...
|
...
projectId: '{{projectId}}', |
...
|
...
serverUrl: '{{req.headers.x-forwarded-proto}}://{{req.headers.host}}', |
...
botContainerId: 'chatWindow', botContentId: 'messages', |
...
|
...
|
...
|
...
|
...
botInputMessageId: 'input', |
...
botSendButtonId: 'orbita-send-button', botMicId: 'chatMic', |
...
|
...
|
...
|
...
|
...
botSpeakerId: 'un-mute', botMenuId: |
...
' |
...
menu- |
...
icon', botIcon: 'chat-icon', botClose: 'menu', |
...
customData: { |
...
chooseFlow: "" |
...
|
...
|
...
|
...
|
...
} |
...
, |
...
|
...
botSettings: |
...
{ |
...
|
...
|
...
elementId: |
...
'orbitabot', |
...
|
...
template: 'default' |
...
} |
...
}); </script> </body> </html> |
Sample with attributes:
Code Block |
---|
<html> <head> |
...
<title>Bot Plugin |
...
test</title> |
...
<meta |
...
name="viewport" content="width=device-width, initial-scale=1.0"> |
...
|
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> |
...
<body> |
...
<div id="orbitabot" |
...
data-orbita-init='chatbot' |
...
data-orbita-project-id='{{projectId}}' |
...
data-orbita-server-url='{{req.headers.x-forwarded-proto}}://{{req.headers.host}}' |
...
data-orbita-bot-container-id='chatWindow' |
...
data-orbita-bot-content-id='messages' |
...
data-orbita-bot-input-message-id = |
...
'input' |
...
data-orbita-bot-send-button-id = 'orbita-send-button' |
...
data-orbita-bot-mic-id = 'chatMic' |
...
data-orbita-bot-speaker-id = 'un-mute' |
...
|
...
data-orbita-bot-menu-id = 'menu-icon' |
...
|
...
data-orbita-bot-icon = 'chat-icon' |
...
|
...
data-orbita-bot-close = 'menu' |
...
|
...
data-orbita-custom-data = |
...
'{"chooseFlow": "" |
...
}' |
...
data-orbita-bot-Settings='{"elementId": |
...
"orbitabot", "template": "default"}'></div> <script src="/chatbot/v3/chat.js"></script> |
...
|
...
</body>
</html> |
Whitelisting
To successfully launch Chatbot V3 from your environment, you have to whitelist the below domains. 3.2.26 Whitelisting
https://cdn.jsdelivr.net
https://cdnjs.cloudflare.com
https://code.jquery.com
https://cdn.jsdelivr.net
https://cdn.socket.io
Monitoring conversations using Chatbot V3
Using Chatbot V3, you can have a Chatbot Admin to monitor the chatbot users' conversations.
Sending messages to all connected clients (all SocketIDs)
As a Chatbot Admin, you can send notifications or messages to all the connected clients.
To send out a custom message;
Import the below code.
Code Block [ { "id": "cbd070ff.8e9ba", "ytype": 120"function", "wiresz": [] "e14ca34d.06aff", }, "name": {"Send Message to All", "idfunc": "4658588.f9cd8a8", "type": "functionmsg.payload = {\n \"text\" : \"Hello you are recieving a push message from server!\"\n}\nmsg.socketIOEmit = \"emit\";\nreturn msg;", "zoutputs": "b8ab9335.7dc1"1, "namenoerr": ""0, "funcx": "const util = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;", "outputs": 1, "noerr": 0, "x": 310, "320, "y": 160340, "wires": [ [ "c96010c24a5617b7.3b3b534e358" ] ] }, { "id": "70101b8e1b78332e.d8b78489e5ed", "type": "alexa-skill-configinject", "skillnamez": "newe14ca34d.06aff", "projectIdname": "60dee13abf64170068df5ece", "intentstopic": "[]", "skillstatepayload": "{}", } "payloadType": "json", { "repeat": "", "idcrontab": "slots", "typeonce": false, "slotsonceDelay": 0.1, "zx": 110, "y": 340, "slotswires": [] [ } ]
Following the above steps will create a new flow in the Experience Designer as shown below.
...
Coming from version 2 of the bot
Bot In Node
Listens to pushes from connected clients
Bot Out Node
Emits a message to the specified socketID
Connected Bots
Returns array of connected socket IDs
No iframes
Customizations
...
Adding Custom JS
Adding Custom CSS
Embed the Bot in a section
...
...
...
"
...
cbd070ff.
...
8e9ba"
...
...
...
]
...
] }, { "
...
id": "4a5617b7.34e358", "
...
type": "
...
bot-out", "
...
z": "
...
e14ca34d.06aff", "
...
skillConfig": "
...
496cb5db.ebb6fc", "
...
name": "
...
", "
...
x":
...
620, "y": 340, "wires": [] }, {
...
...
"id": "496cb5db.ebb6fc",
...
"type": "alexa-skill-config",
...
"skillname":
...
"Documentation Flows",
...
"projectId": "5cf9249637e124a03087780b",
...
"intents": "[]",
...
"skillstate": "",
...
"disableLogging":
...
false }, {
...
...
...
"id": "slots",
...
"type": "slots", "z": "",
...
...
"slots": []
...
} ]
Change the content within the
text
property in the function node.Trigger the Inject node to send your custom message to all the connected SocketIDs.
Sending messages to one connected client (one SocketID)
As a Chatbot Admin, you can send notifications or messages to all the connected clients.
To send out a custom message to a particular user;
Import the below code.
Code Block [ {
...
"id": "db801cd4.83c7c",
...
"type": "function",
...
"z": "e14ca34d.06aff",
...
"name":
...
"Send Message to specific socket id",
...
"func":
...
"msg.payload = {\n \"text\":\"Hello you are lucky today!\"\n}\nmsg.socketIOId
...
= \"KGJsMLK_PwM55QfYAAC_\";\nreturn msg;", "outputs": 1,
...
...
"noerr": 0,
...
...
"x": 360,
...
...
"y": 400,
...
"wires": [
...
[
...
...
...
...
"949a42a7.df33"
...
...
]
...
...
] }
...
,
...
{
...
...
"id": "949a42a7.df33",
...
"type": "bot-out",
...
"z": "e14ca34d.06aff",
...
"skillConfig": "496cb5db.ebb6fc",
...
"name": "", "x": 620, "y": 400, "wires": [] }
...
, {
...
...
...
"
...
id":
...
"8b452e8e.ff63f", "type": "inject", "z": "e14ca34d.06aff", "name": "", "topic": "", "payload": "{}", "payloadType": "json", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 110, "y": 400, "wires": [ [ "db801cd4.83c7c" ] ] }, {
...
"id": "496cb5db.ebb6fc",
...
"type": "alexa-skill-config",
...
"skillname": "Documentation Flows",
...
"projectId": "5cf9249637e124a03087780b",
...
"intents": "[]",
...
"skillstate":
...
"", "disableLogging": false
...
...
}, {
...
...
"id": "slots",
...
"type":
...
"slots",
...
...
"z": "",
...
"slots":
...
[]
...
} ]
Change the socketID and the message property in the function node.
Trigger the Inject node to send your custom message to that specific SocketIDs.
You can display these custom messages either on the chatbot or as a notification pop up.
Customizations
You can customize the chatbot using the Project side menu > Develop > Chatbot settings
...
Adding Custom JS
You can inject the JS code via the Custom JS tab as per your use case.
Adding Custom CSS
Embed the Bot in a section
(Rakesh?)Import the below flow to the Experience designer to have a chatbot in the center of the page.
botMicId:Code Block [ { "id": "b7cf53f8.4464",
'chatMic',\n
botSpeakerId"type": "template",
'un-mute',\n"z":
botMenuId: 'menu-icon',\n"cd6c5936.243d78",
botIcon: 'chat-icon',\n"name": "",
botClose: 'menu',\n"field": "payload",
botBannerIcon:"fieldType": "msg", "format": "handlebars",
'banner-title'\n
});\n"syntax":
function afterResponse(responseData) { \"mustache",
const myData = {...responseData};"template": "<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Orbita v3 Demo</title>\n <meta
latestResponse = myData;\nname=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n
if (myData.directive && myData.directive.buttons){body #bot-v3.chat-container{\n
let buttons = myData.directive.buttons;display:block;\n }\n #bot-v3,\n
$('.menu-slider ul').empty()#bot-v3 .chatbox{\n position: fixed;\n
$.each(buttons, function( key, button ){display:block;\n right: 10px;\n
$('.menu-slider ul').append('<libottom: 50px;\n height: 550px;\n
onClick=\"OrbitaChatBotV3.hook(\\'send_message\\',\\''+button.value+'\\');$(\\'.menu-icon\\').trigger(\\'click\\');\">'+button.text+'</li>');
}width: 345px;\n border-radius: 10px;\n
}\nbox-shadow: 5px 5px 15px rgb(119 119 119 / 50%);\n
ifoverflow: hidden;\n z-index: 999;\n
myData.session && myData.session.chatMode && myData.session.chatMode !== null){\nleft: calc(
$('.chatbox').prepend(`<i id=\"chatLiveChatTrigger\" title=\"End session with agent\" onClick=\"OrbitaChatBotV3.hook('send_message', 'Please end my session');$(this).remove();\" class=\"fas fa-life-ring fa-times-circle lc_enabled\"/>`);\50% - 175px);\n top: 150px;\n
}}\n #bot-v3 #chatLiveChatTrigger {\n
}\nposition: absolute;\n
OrbitaChatBotV3.registerEvent({eventName:right: 20px;\n
\"afterResponse\",
callbackFunction:
afterResponse});\n
$('.chattop: 100px;\n
input').on('keypress',
function (e) {
ifz-index: 999;\n
(e.which == 13) {
ifcursor:pointer;\n }\n
(latestResponse.session
&&
latestResponse.session.chatMode &&
latestResponse.session.chatMode !== null){
$('.chat input, .chat button').css('display', 'block')\n #bot-v3 #waitingAgent {\n
}clear:both;\n
return false;text-align: center;\n }\n
}.chat-icon{\n
);display:none !important;\n }
OrbitaChatBotV3.hook('connect');\n\n
</script>\n</body>\n</html>",body{\n
"output": "str",
"x": 440, "y": 160, "wires": [["ca48379c.d812b8"]] }, { "id": "ca48379c.d812b8", "type": "http response", "z": "cd6c5936.243d78", "name": "", "statusCode": "", "headers": {}, "x": 570, "y": 160, "wires": [] }, { "id": "6d574e22.32d22", "type": "http in", "z": "cd6c5936.243d78", "name": "", "url": "/centerView", "method": "get", "upload": false, "swaggerDoc": "", "x": 140, "y": 160, "wires": [["b186eca9.c0b9e"]] }, { "id": "b186eca9.c0b9e", "type": "function", "z": "cd6c5936.243d78", "name": "", "func": "const util = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;", "outputs": 1, "noerr": 0, "x": 310, "y": 160, "wires": [["b7cf53f8.4464"]] }, { "id": "slots", "type": "slots", "z": "", "slots": [] } ]font-family: sans-serif;\n background-color:#eee !important;\n }\n </style>\n</head>\n<body>\n <link rel=\"preload\"
Building a Custom Interface
href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n <script src=\"/chatbot/v2/adaptive-lib/adaptivecards-templating.min.js\"></script>\n <script src=\"/chatbot/v2/adaptive-lib/adaptivecards.js\"></script>\n <script type=\"text/javascript\" src=\"https://unpkg.com/markdown-it/dist/markdown-it.js\"></script>\n <script src=\"https://cdn.socket.io/3.1.3/socket.io.min.js\" integrity=\"sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh\" crossorigin=\"anonymous\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js\" integrity=\"sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\n <script src=\"/chatbot/v3/chat-plugins.js\"></script>\n <script src=\"/chatbot/v3/chat.js\"></script>\n <link rel=\"stylesheet\" href=\"/chatbot/v3/style.css\" />\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n <script>\n var clickTag = \"https://www.orbita.ai\";\n var latestResponse = {};\n function adClick(){\n window.open(clickTag, `_blank`);\n }\n OrbitaBotPlugins.BotPlugin.init({\n botId:'bot-v3',\n width: '300px',\n height: '600px',\n });\n OrbitaChatBotV3.init({\n projectId: \" {{projectId}}\",\n serverUrl: \" {{req.headers.x-forwarded-proto}}\"+\"://\"+\" {{req.headers.host}}\",\n isCustomUi: true,\n botContainerId: 'bot-v3',\n botContentId: 'messages',\n botInputMessageId: 'input',\n botSendButtonId: 'orbita-send',\n botMicId: 'chatMic',\n botSpeakerId: 'un-mute',\n botMenuId: 'menu-icon',\n botIcon: 'chat-icon',\n botClose: 'menu',\n botBannerIcon: 'banner-title'\n });\n function afterResponse(responseData) { \n const myData = {...responseData};\n latestResponse = myData;\n\n if (myData.directive && myData.directive.buttons){\n let buttons = myData.directive.buttons;\n $('.menu-slider ul').empty();\n $.each(buttons, function( key, button ){\n $('.menu-slider ul').append('<li onClick=\"OrbitaChatBotV3.hook(\\'send_message\\',\\''+button.value+'\\');$(\\'.menu-icon\\').trigger(\\'click\\');\">'+button.text+'</li>'); \n });\n }\n\n if (myData.session && myData.session.chatMode && myData.session.chatMode !== null){\n $('.chatbox').prepend(`<i id=\"chatLiveChatTrigger\" title=\"End session with agent\" onClick=\"OrbitaChatBotV3.hook('send_message', 'Please end my session');$(this).remove();\" class=\"fas fa-life-ring fa-times-circle lc_enabled\"/>`);\n }\n }\n OrbitaChatBotV3.registerEvent({eventName: \"afterResponse\", callbackFunction: afterResponse});\n \n $('.chat input').on('keypress', function (e) {\n if (e.which == 13) {\n if (latestResponse.session && latestResponse.session.chatMode && latestResponse.session.chatMode !== null){\n $('.chat input, .chat button').css('display', 'block');\n }\n return false;\n }\n });\n\n OrbitaChatBotV3.hook('connect');\n </script>\n</body>\n</html>", "output": "str", "x": 440, "y": 160, "wires": [["ca48379c.d812b8"]] }, { "id": "ca48379c.d812b8", "type": "http response", "z": "cd6c5936.243d78", "name": "", "statusCode": "", "headers": {}, "x": 570, "y": 160, "wires": [] }, { "id": "6d574e22.32d22", "type": "http in", "z": "cd6c5936.243d78", "name": "", "url": "/centerView", "method": "get", "upload": false, "swaggerDoc": "", "x": 140, "y": 160, "wires": [["b186eca9.c0b9e"]] }, { "id": "b186eca9.c0b9e", "type": "function", "z": "cd6c5936.243d78", "name": "", "func": "const util = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;", "outputs": 1, "noerr": 0, "x": 310, "y": 160, "wires": [["b7cf53f8.4464"]] }, { "id": "slots", "type": "slots", "z": "", "slots": [] } ]
Updating the Main Menu Options
The Main Menu options could be updated in the Settings tab of the Chatbot Settings page
The Main Menu options would be available in the
directive
section ofappSettings
type
ismainmenu
&title
isMenu options
The button
text
&value
can be updated as per the customization requiredExample:
Code Block “directive”: [ { “type”: “mainmenu”, “title”: “Menu options”, “buttons”: [ { “text”: “Start Over”, “value”: “start over” }, { “text”: “Find a Physician”, “value”: “find a physician” }, { “text”: “Find a Location”, “value”: “find a location” }, { “text”: “COVID-19 Screener”, “value”: “COVID-19 Screener” }, { “text”: “Vaccine Eligibility Check”, “value”: “vaccine eligibility check” }, { “text”: “Check My Symptoms”, “value”: “check My symptoms” }, { “text”: “Ask a Question”, “value”: “ask a question” } ] } ]
The List of Buttons in the Button Directive and their details could be found in the documentation: How to use button directive - Orbita Help Center - Confluence (atlassian.net)
Supported Directives on Chatbot V3
Flow Studio Control’s Directives | Experience Designer’s Directives |
---|---|
Choose many option | Autocomplete -- client side |
Choose many option with none of the above | Autocomplete -- server side |
Choose one option | Bootstrap carousel |
Yes/No options | Bootstrap carousel with filter options |
Single input control with texbox input type - hidden | Cardlist |
Single input control with texbox input type -- single line | Cardlist with filter options |
Single input control with texbox input type -- multi line | Html5 - Added properties (id, html, element) |
Single input control with input type Date | Adaptive card |
Single input control with input type DateTime | Card component (Single & Multi card) |
Single input control with input type time | |
Single input control with input type email | |
Single input control with input type phone number | |
Rating control | |
Single input control using input type Text box with Hidden Input directive |
Hierarchy of settings followed on Chatbot V2 holds good for Chatbot V3:
The Bot provider V2 node (Experience Designer) > Flow studio control directive > Chatbot settings (Project Side navigation menu in Experience Manager).
Hook function usage
The hook function in Bot v3 allows us to publish messages to the chatbot dynamically from outside the Bot. The hook function's available keys are detailed below.
Key | Syntax | Description | Sample |
---|---|---|---|
|
| This is used to send information to the Bot. The value passed is treated as both the Sample: Passing user utterance to the Bot from the page in button click action/ page redirection. |
|
|
| This is used to send information to the Bot.
Sample: Passing a user friendly utterance to the Bot for display but also send complex data to the backend for business logic handling. |
|
|
| This re-establishes a socket connection. Send the |
|
|
| This allows to trigger an Event. The Event name is passed inside the |
|
|
| The socket connection will be disconnected. Send the |
|