...
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": [] } ]
Building a Custom Interface
(Rakesh?)