...
Add cdnjs.cloudflare.com to the whitelist. 3.2.26 Whitelisting
Coming from version 2 of the bot
Bot In Node
Listens 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 socketID.client connected (SocketID). Technically, sends socket events to the webpage.
Connected Bots
Returns The Connected Bots node will return an array of all connected clients (socket IDs) at the moment.
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 [ { "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": [] } ]