Versions Compared

Old Version 7

changes.mady.by.user Rajkiran Alla

Saved on

compared with

New Version 8

changes.mady.by.user Rajkiran Alla

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 momentproject level.

  • No iframes

Customizations

  • Adding Custom JS

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

      The Chatbot V3 is not dependent on an iframe to integrate the chatbot into a webpage.

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.

    Code Block
    [
    {
        "id": "

...

  1. cbd070ff.

...

  1. 8e9ba",
        "type": "

...

  1. function",
        "z": "

...

  1. e14ca34d.

...

  1. 06aff",
        "name": "Send Message to All",
        "

...

  1. func": "msg.payload

...

  1.  = {\n    \"text\" : \"Hello you are recieving a push message from server!\"\n}\nmsg.socketIOEmit = \"emit\";\nreturn msg;",
        "

...

  1. outputs":

...

  1. 1,
        "

...

  1. noerr":

...

  1. 0,
        "

...

  1. x":

...

  1. 320,

...

  1.

...

  1.

...

  1.

...

  1. "y": 340,

...

  1.     "wires": [

...

  1.

...

  1.          [

...

  1.

...

  1.       "4a5617b7.34e358"

...

  1.

...

  1.

...

  1.   ]
        ]

...

  1.

...

  1.    },
    {

...

  1.      "id": "1b78332e.89e5ed",

...

  1.

...

  1.   "type": "inject",

...

  1. "z":

...

  1. "e14ca34d.06aff",
        "name": "",

...

  1.

...

  1.       "topic": "",

...

  1.

...

  1.    "payload": "{}",

...

  1. "payloadType": "json",
        "repeat": "",

...

  1.

...

  1.

...

  1.

...

  1.

...

  1.

...

  1.

...

  1. "crontab": "",
        "once": false,

...

  1.

...

  1.      "onceDelay": 0.1,

...

  1.

...

  1.   "x": 110,

...

  1. "y": 340,
        "wires": [

...

  1.

...

  1.        [

...

  1.

...

  1.

...

  1.

...

  1.       "cbd070ff.8e9ba"

...

  1.        ]

...

  1. ]
    },
    {

...

  1.

...

  1.      "id": "4a5617b7.34e358",

...

  1.

...

  1.   "type": "bot-out",

...

  1. "z": "e14ca34d.06aff",

...

  1.   "skillConfig": "496cb5db.ebb6fc",

...

  1.     "name": "",

...

  1.

...

  1.

...

  1.     "x": 620,

...

  1.   "y": 340,

...

  1. "wires":

...

  1. []

...

  1. },

...

  1. {

...

  1. 
        "id": "496cb5db.ebb6fc",

...

  1.

...

  1.       "type":

...

  1. "alexa-skill-config",

...

  1. "skillname": "Documentation Flows",

...

  1. "projectId": "5cf9249637e124a03087780b",
        "intents": "[]",
        "skillstate": "",

...

  1. "disableLogging": false
    },

...

  1.  {

...

  1.

...

  1.

...

  1. "

...

  1. id":

...

  1. "slots",
        "type": "slots",
        "z": "",
        "slots": []
    }
]

    Image Added

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

    Image Added

  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.

    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,

...

  1.  "x": 360,

...

  1. "y": 400,

...

  1. "wires": [

...

  1.       [

...

  1.

...

  1. "949a42a7.df33"
            ]

...

  1.

...

  1.    ]
    }

...

  1. ,
    {

...

  1.       "id": "949a42a7.df33",

...

  1.     "type":

...

  1. "bot-out",
        "z": "e14ca34d.06aff",

...

  1. "skillConfig":

...

  1. "496cb5db.ebb6fc"

...

  1. ,

...

  1. "name":

...

  1. "",

...

  1.

...

  1. "x":

...

  1. 620,
        "y": 400,

...

  1.

...

  1.       "wires": []

...

  1. },
    {

...

  1.  "id": "8b452e8e.ff63f",

...

  1. "type": "inject",

...

  1. "z": "e14ca34d.06aff",

...

  1. "name": "",

...

  1. "topic": "",

...

  1. "payload": "{}",
        "payloadType": "json",

...

  1.

...

  1.       "repeat":

...

  1. "",

...

  1. "crontab": "",
        "once": false,

...

  1.

...

  1.

...

  1. "onceDelay": 0.1,
        "x": 110,

...

  1.

...

  1.

...

  1.      "y": 400,

...

  1.

...

  1.

...

  1.  "wires": [
            [

...

  1.

...

  1.

...

  1.

...

  1.       "db801cd4.83c7c"

...

  1.

...

  1.   ]
        ]

...

  1. },

...

  1.

...

  1.

...

  1.

...

  1. {

...

  1. 
        "id": "496cb5db.ebb6fc",

...

  1. "type": "alexa-skill-config",
        "skillname": "Documentation Flows",
        "projectId":

...

  1. "5cf9249637e124a03087780b",
        "intents": "[]",

...

  1.       "skillstate": "",

...

  1.

...

  1.

...

  1.

...

  1.  "disableLogging": false
    },
    {

...

  1.  "id": "slots",
        "type": "slots",
        "z": "",

...

  1. "slots": []

...

  1. }

...

  1. 
]

    Image Added

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

    Image Added

  3. 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 > Custom CSS and Custom JS.

...

  • 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
        [
    {
     if (e.which == 13) {\n "id": "b7cf53f8.4464",
        "type": "template",
 if (latestResponse.session && latestResponse.session.chatMode && latestResponse.session.chatMode !== null){\n  "z": "cd6c5936.243d78",
        "name": "",
    $('.chat input, .chat button').css('display', 'block');\n  "field": "payload",
        "fieldType":  }\n"msg",
        "format": "handlebars",
  return false;\n     "syntax": "mustache",
   }\n     "template": "<!doctype  });\nhtml>\n<html lang=\"en\">\n<head>\n    <title>Orbita    OrbitaChatBotV3.hook('connect');v3 Demo</title>\n     </script>\n</body>\n</html>",
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n  "output": "str",     body #bot-v3.chat-container{\n   "x": 440,         "y": 160,display:block;\n        }\n  "wires": [["ca48379c.d812b8"]]     },#bot-v3,\n        #bot-v3 .chatbox{\n         "id": "ca48379c.d812b8",  position: fixed;\n      "type": "http response",    display:block;\n     "z": "cd6c5936.243d78",      right: 10px;\n  "name": "",         "statusCode"bottom: "",50px;\n         "headers": {},  height: 550px;\n      "x": 570,     width: 345px;\n   "y": 160,         "wires": []
border-radius: 10px;\n    },     {   box-shadow: 5px 5px 15px rgb(119 119 "id": "6d574e22.32d22",
119 / 50%);\n        "type": "http in",  overflow: hidden;\n      "z": "cd6c5936.243d78",     z-index: 999;\n   "name": "",         "url"left: "/centerView",
 calc(50% - 175px);\n       "method": "get",    top: 150px;\n    "upload": false,   }\n      "swaggerDoc": "", #bot-v3 #chatLiveChatTrigger {\n      "x": 140,      position: absolute;\n  "y": 160,         "wires": [["b186eca9.c0b9e"]]right: 20px;\n     },     {  top: 100px;\n      "id": "b186eca9.c0b9e",       z-index: 999;\n  "type": "function",         "z": "cd6c5936.243d78",cursor:pointer;\n        }\n  "name": "",      \n      "func": "const util#bot-v3 = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;",#waitingAgent {\n            "outputs": 1,clear:both;\n          "noerr": 0, text-align: center;\n       "x": 310, }\n         "y": 160,.chat-icon{\n            "wires": [["b7cf53f8.4464"]]display:none !important;\n        },\n\n {       body{\n  "id": "slots",         "type": "slots",font-family: sans-serif;\n         "z": "",    background-color:#eee !important;\n     "slots": []  }\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": []
    }
]

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

Single input control with input type time

Single input control with input type email

Single input control with input type phone number

Rating control