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

1. Real-time Communication - Messages can be pushed from the server to any and all connected clients, allowing requests and responses to be handled asynchronously.

2. 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.

3. 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.

1. Login to Experience Manager and Select your project.

2. Open Experience Designer.

3. Import the below flow to any Experience Designer tab. Refer How do I export and import flows in Experience Designer
   
   

Following the above steps will create a new flow in the Experience Designer as shown below.

Open

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.

  Open

  

Bot Out Node

• Emits a message to the specified client connected (SocketID). Technically, sends socket events to the webpage.

  Open

  

Connected Bots

• The Connected Bots node will return an array of all connected clients (socket IDs) at the project level.

  Open

  

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.

• 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.

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

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;

1. Import the below code.
   
   

   [ { "id": "cbd070ff.8e9ba", "type": "function", "z": "e14ca34d.06aff", "name": "Send Message to All", "func": "msg.payload = {\n \"text\" : \"Hello you are recieving a push message from server!\"\n}\nmsg.socketIOEmit = \"emit\";\nreturn msg;", "outputs": 1, "noerr": 0, "x": 320, "y": 340, "wires": [ [ "4a5617b7.34e358" ] ] }, { "id": "1b78332e.89e5ed", "type": "inject", "z": "e14ca34d.06aff", "name": "", "topic": "", "payload": "{}", "payloadType": "json", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 110, "y": 340, "wires": [ [ "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": [] } ]

    

   Open

   

    

2. Change the content within the text property in the function node.
   
   

   Open

   

    

3. 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;

1. Import the below code.
   
   

   [ { "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": [] } ]

    

   Open

   

    

2. Change the socketID and the message property in the function node.
   
   

   Open

   

    

3. 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

Open

• 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.

      [ { "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 directive section of appSettings

    • type is mainmenu & title is Menu options

    • The button text & value can be updated as per the customization required

      Open

      

    • Example:

      “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

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.