...
| 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
Never-ending session using V3 - The chatbot user can resume chatting with the chatbot any time so long as he did not close the browser and did not refresh the webpage.
Customize the Chabot UI - You as an admin user will have access to change and modify more UI elements of the default chatbot.
New socket connection each time the Chatbot URL is triggered - A new socket connection is made each time the chatbot is triggered. This gives visibility to the chatbot admins over the chatbot conversations.
The ability of the Bot Admin to take charge of any chatbot conversation - You will have access to take over any specific conversation using the respective socket ID of the chatbot.
How do you use it?
To use the 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 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.
How do you use it?
To use the Chatbot V3’s capabilities with your existing chatbot.
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
botSettingsproperty helps in selecting the v3 chatbot setting.
botSettings: { elementId: 'orbitabot', template: 'default' }
The property
templateinside thebotSettingsobject 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
elementIdby default is'orbitabot'. This determines where to inject the template created in the Bot settings. If theelementIdis not mentioned, the default values will be injected.
For users who do not use the botSettings functionalities,
Add
botSettings: falsein 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'} //optionalComment out the below function in the old code, (this is deprecated)
Code Block OrbitaBotPlugins.BotPlugin.init({
...
botId:'bot-v3',
...
...
...
width:
...
'300px',
...
...
height: '600px',
...
});
isCustomUiproperty 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", "nametype": "function", "urlz": "/temp-bote14ca34d.06aff", "methodname": "getSend Message to All", "upload": false, "swaggerDoc": ""func": "msg.payload = {\n \"text\" : \"Hello you are recieving a push message from server!\"\n}\nmsg.socketIOEmit = \"emit\";\nreturn msg;", "xoutputs": 1101, "ynoerr": 4200, "wiresx": [320, "y": 340, [ "wires": [ "aa28d8ef.966e58", [ "7dc8add64a5617b7.80b99434e358" ] ] }, { "id": "aa28d8ef1b78332e.966e5889e5ed", "type": "functioninject", "z": "f16f5c09e14ca34d.8c2906aff", "name": "payload config", "functopic": "var util", = global.get('orbitaUtil');\nmsg.payload.sessionId = util.uuid(); \nmsg.payload.chooseFlow = msg.req.params.chooseFlow;\nmsg.payload.projectid = \"60dee13abf64170068df5ece\";\nreturn msg;payload": "{}", "outputspayloadType": 1"json", "noerrrepeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 360110, "y": 420340, "wires": [ [ "6f75b0e9cbd070ff.6fe9b8e9ba" ] ] }, { "id": "4bb487b4a5617b7.3a0b97834e358", "type": "functionbot-out", "z": "f16f5c09e14ca34d.8c2906aff", "nameskillConfig": "496cb5db.ebb6fc", "funcname": "const", _ = global.get('lodash');\n msg.payload.extPayload = { \"test\" : \"data\"};\nconst query = _.get(msg, 'req.query');\nif(query && query.campaignid) {\n const extPayload = msg.payload.extPayload || {};\n extPayload['query'] = query;\n msg.payload.extPayload = extPayload;\n}\nreturn msg;", "x": 620, "y": 340, "wires": [] }, { "outputsid": 1"496cb5db.ebb6fc", "noerrtype": 0"alexa-skill-config", "xskillname": "Documentation 330Flows", "yprojectId": 120"5cf9249637e124a03087780b", "wiresintents": "[]", "skillstate": "", [ "disableLogging": false }, "9a0508d2.0dd988"{ "id": "slots", ] "type": "slots", ] }, "z": "", { "idslots": "7dc8add6.80b994",[] } "type": "debug",]
Change the content within the
textproperty 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 [ { "zid": "f16f5c09db801cd4.8c2983c7c", "nametype": "Temp botfunction", "activez": true"e14ca34d.06aff", "consolename": "falseSend Message to specific socket id", "completefunc": "msg.payload", = {\n \"text\":\"Hello you are lucky "x": 320today!\"\n}\nmsg.socketIOId = \"KGJsMLK_PwM55QfYAAC_\";\nreturn msg;", "youtputs": 4801, "wiresnoerr": []0, }, {"x": 360, "idy": "c710afe2.b2bcf"400, "typewires": "bot-in", [ "z": "f16f5c09.8c29", [ "skillConfig": "70101b8e.d8b784", "name": "",949a42a7.df33" "rules": [], "x": 170,] }, "y": 120,{ "wiresid": ["949a42a7.df33", "type": "bot-out", [ "z": "e14ca34d.06aff", "skillConfig": "4bb487b.3a0b978"496cb5db.ebb6fc", "name": "", "x": 620, ] "y": 400, "wires": [] }, { "id": "3336fa58b452e8e.3079706ff63f", "type": "bot-outinject", "z": "f16f5c09e14ca34d.8c2906aff", "skillConfigname": "70101b8e.d8b784", "nametopic": "", "xpayload": 720,"{}", "ypayloadType": 120"json", "wiresrepeat": [] }, "", { "idcrontab": "afdc2ad8.4f34d8", "typeonce": "connected-bots"false, "zonceDelay": "f16f5c090.8c29"1, "skillConfigx": "70101b8e.d8b784"110, "namey": ""400, "modelwires": [ "select", "sockets": "", [ "x": 360, "ydb801cd4.83c7c": 220, "wires": [ ] ] [ }, { "3008b64.af1714a" id": "496cb5db.ebb6fc", "type": "alexa-skill-config", "skillname": "Documentation Flows", "projectId": "5cf9249637e124a03087780b", "intents": "[] ] }, { "id": "70101b8e.d8b784", "type": "alexa-skill-config", "skillname": "new", "projectId": "60dee13abf64170068df5ece", "intents": "[]", "skillstate": "" }, { "id": "slots", "type": "slots", "z": "", "slots": [] } ]
Following the above steps will create a new flow in the Experience Designer as shown below.
...
Changes to be done after importing the flow
After importing the “ChatV3-Typescript“ flow, you need to change the below settings.
Copy the id param from the URL of the current page. This is the current project’s ID.
Open the “template” node and paste the copied project ID at line 41 (default) as shown in the screenshot below.
Copy the URL of the enviroment
In the same “template” node, paste the copied URL to the Line 42 (default) as shown in the screenshot below.
Customizations
...
", "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
Import the below flow to the Experience designer to have a chatbot in the center of the page.
Code Block [ { "id": "b7cf53f8.4464", "type": "template", "z": "cd6c5936.243d78", "name": "", "field": "payload", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "<!doctype html>\n<html lang=\"en\">\n<head>\n <title>Orbita v3 Demo</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n body #bot-v3.chat-container{\n display:block;\n }\n #bot-v3,\n #bot-v3 .chatbox{\n position: fixed;\n display:block;\n right: 10px;\n bottom: 50px;\n height: 550px;\n width: 345px;\n border-radius: 10px;\n box-shadow: 5px 5px 15px rgb(119 119 119 / 50%);\n overflow: hidden;\n z-index: 999;\n left: calc(50% - 175px);\n top: 150px;\n }\n #bot-v3 #chatLiveChatTrigger {\n position: absolute;\n right: 20px;\n top: 100px;\n z-index: 999;\n cursor:pointer;\n }\n \n #bot-v3 #waitingAgent {\n clear:both;\n text-align: center;\n }\n .chat-icon{\n display:none !important;\n }\n\n body{\n font-family: sans-serif;\n background-color:#eee !important;\n }\n </style>\n</head>\n<body>\n <link rel=\"preload\" 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
directivesection ofappSettingstypeismainmenu&titleisMenu optionsThe button
text&valuecan be updated as per the customization required
Example:
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 |
|