Versions Compared

Old Version 5

changes.mady.by.user Alpesh Patel

Saved on

compared with

New Version 6

changes.mady.by.user Rajkiran Alla

Saved on

Key

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

...

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

  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.

...

  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

    Code Block
    languagejson
    [
    {
        "id": "b8ab9335e14ca34d.7dc106aff",
        "type": "tab",
        "label": "Flow 3",
        "disabled": false,
        "info": ""
    },
    {
        "id": "ac8940e2fc515ee4.55555a52e",
        "type": "alexa-flow-config reff",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "skillConfig": "70101b8e496cb5db.d8b784ebb6fc",
        "x": 100,
        "y": 50,
        "wires": []
    },
    {
        "id": "f42dd3c061b0f7e6.29e684c5f48",
        "type": "orbita-bot-provider-v2",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "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": "70101b8e496cb5db.d8b784ebb6fc",
        "token": "",
        "noerr": 0,
        "nlpData": false,
        "x": 280,
        "y": 200,
        "wires": [
            [
                "5d224a8ab5af9a23.48cba4f7e658"
            ]
        ]
    },
    {
        "id": "ecb0f3683a53d950.3be752a2966",
        "type": "bot-in",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "skillConfig": "70101b8e496cb5db.d8b784ebb6fc",
        "name": "",
        "rules": [],
        "x": 90,
        "y": 200,
        "wires": [
            [
                "f42dd3c061b0f7e6.29e684c5f48"
            ]
        ]
    },
    {
        "id": "f54043db9e2adb8b.c59dcf586d8",
        "type": "bot-out",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "skillConfig": "70101b8e496cb5db.d8b784ebb6fc",
        "name": "",
        "x": 640,
        "y": 200,
        "wires": []
    },
    {
        "id": "5d224a8ab5af9a23.48cba4f7e658",
        "type": "function",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "",
        "func": "msg.payload.directive = {\n    \"type\": \"mainmenu\",\n    \"title\":\"Menu options\",\n    \"buttons\": []\n    }\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 450,
        "y": 200,
        "wires": [
            [
                "f54043db9e2adb8b.c59dcf586d8"
            ]
        ]
    },
    {
        "id": "c96010c244a664df.3b3b501bacc",
        "type": "template",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!doctype html>\n<html lang=\"en\">\n<head>\n    <title>Orbita v3 Bot</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        body{\n            font-family: sans-serif;\n            background-color:#fff !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<script>window.jQuery || /* reload from own domain here */;</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 latestResponse = {};\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            launchWord: 'opens',\t\n            customData : {\t\n                chooseFlow: \"{{req.params.chooseFlow}}\"\t\n            }\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        OrbitaChatBotV3.registerEvent({eventName: \"afterResponse\", callbackFunction: afterResponse});\n    </script>\n</body>\n</html>",
        "output": "str",
        "x": 460,
        "y": 160,
        "wires": [
            [
                "e933f36ba26ea96.93cb91a4b308"
            ]
        ]
    },
    {
        "id": "e933f36ba26ea96.93cb91a4b308",
        "type": "http response",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 630,
        "y": 160,
        "wires": []
    },
    {
        "id": "eb6d8a592a50f9aa.521f1875c016",
        "type": "http in",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "",
        "url": "/v3Bot",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 120,
        "y": 160,
        "wires": [
            [
                "4658588824df9ab.f9cd8a8ed4278"
            ]
        ]
    },
    {
        "id": "2cf775927daae3dc.e66cfa3bc6bc",
        "type": "comment",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "v3Bot View",
        "info": "",
        "x": 100,
        "y": 120,
        "wires": []
    },
    {
        "id": "4658588824df9ab.f9cd8a8ed4278",
        "type": "function",
        "z": "b8ab9335e14ca34d.7dc106aff",
        "name": "",
        "func": "const util = global.get('orbitaUtil');\nmsg.projectId = util.getProjectId(node);\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 310,
        "y": 160,
        "wires": [
            [
                "c96010c244a664df.3b3b501bacc"
            ]
        ]
    },
    {
        "id": "70101b8e496cb5db.d8b784ebb6fc",
        "type": "alexa-skill-config",
        "skillname": "newDocumentation Flows",
        "projectId": "60dee13abf64170068df5ece5cf9249637e124a03087780b",
        "intents": "[]",
        "skillstate": "",
        "disableLogging": false
    },
    {
        "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

    • 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

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

...