Document Title: Orbita Chatbot V3 Solution

Creation date: Oct 1, 2021

Author: ORBITA

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 https://orbita.atlassian.net/wiki/spaces/OCS/pages/6161363

[{
    "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. https://orbita.atlassian.net/wiki/spaces/OCS/pages/1134395400

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 the botSettings 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 the elementId 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 code
Set botContainerId: 'bot-v3' in the template node code

isCustomUi property is removed. All the element Id properties are made optional. If not specified, default values will be set.

Sample template:

<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:

<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. https://orbita.atlassian.net/wiki/spaces/OCS/pages/1134395400

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.
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.
Change the socketID and the message property in the function node.
Trigger the Inject node to send your custom message to that specific SocketIDs.

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.

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 of appSettings
  - type is mainmenu & title is Menu options
  - The button text & value can be updated as per the customization required
  - Example:
  - 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

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

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

Key	Syntax	Description	Sample
`send_message`	`OrbitaChatBotV3.hook('send_Message', {value}, {payload})`	This is used to send information to the Bot. The value passed is treated as both the `value` and `data`. The `value` is of type `string` and `payload` is of type `object` Sample: Passing user utterance to the Bot from the page in button click action/ page redirection.	`OrbitaChatBotV3.hook("send_message", command);` Or `OrbitaChatBotV3.hook("send_message", '', command);`
`send_advancedMessage`	`OrbitaChatBotV3.hook('send_advancedMessage', {value}, {payload}, {data})`	This is used to send information to the Bot. `value` is of type string,`payload` is of type `object`, `data` is of type `object` Sample: Passing a user friendly utterance to the Bot for display but also send complex data to the backend for business logic handling.	`OrbitaChatBotV3.hook('send_advancedMessage', "",` `{eventName: "Submit_Details"},` `{name: 'PatientName', id: 1100 }` `);`
`connect`	`OrbitaChatBotV3.hook('connect','', {payload})`	This re-establishes a socket connection. Send the `payload` object as it is required (it can also be empty here).	`OrbitaChatBotV3.hook('connect','', payload)`; Or `OrbitaChatBotV3.hook('connect')`;
`triggerEvent`	`OrbitaChatBotV3.hook('triggerEvent', '', {payload})`	This allows to trigger an Event. The Event name is passed inside the `payload` object.	`OrbitaChatBotV3.hook('triggerEvent', "",` `{eventName: "Schedule_Appointment" }` `);`
`disconnect`	`OrbitaChatBotV3.hook('disconnect','', {payload})`	The socket connection will be disconnected. Send the `payload` object as it is required (it can also be empty here).	`OrbitaChatBotV3.hook('disconnect','', payload);` Or `OrbitaChatBotV3.hook('disconnect');`