...

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

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

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

...

Single input control using input type Text box with Hidden Input directive

...

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
Image Added

Example:

Code Block

“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

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
Single input control using input type Text box with Hidden Input directive

Hierarchy of settings followed on Chatbot V2 holds good for Chatbot V3:
The Bot provider V2 node (Experience Designer) > Flow studio control directive > Chatbot settings (Project Side navigation menu in Experience Manager).

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.

Key	Snippet	Description
`send_message`	`OrbitaChatBotV3.hook('send_Message', {value}, {payload})`	This is used to send information to the Bot. The value passed is treated as both the `value` and `data`. The `payload` is of type `object` and `value` is of type `string` Sample: Passing user utterance to the Bot from the page in button click action/ page redirection.
`send_advancedMessage`	`OrbitaChatBotV3.hook('send_advancedMessage', {value}, {payload}, {data})`	This is used to send information to the Bot. `data` is of type `object` , `value` is of type `string` ,`payload` is of type `object` Sample: Passing a user friendly utterance to the Bot for display but also send complex data to the backend for business logic handling.
`connect`	`OrbitaChatBotV3.hook('connect','', {payload})`	This re-establishes a socket connection. Send the `payload` object as it is required (it can also be empty here).
`triggerEvent`	`OrbitaChatBotV3.hook('triggerEvent', '', {payload})`	This allows to trigger an Event. The Event name is passed inside the `payload` object.
`disconnect`	`OrbitaChatBotV3.hook('disconnect','', {payload})`	The socket connection will be disconnected. Send the `payload` object as it is required (it can also be empty here).

Versions Compared

Old Version 17

New Version 18

Key

Supported Directives on Chatbot V3

Supported Directives on Chatbot V3

Hook function usage

Page Comparison

Versions Compared

Old Version 17

New Version 18

Key

Supported Directives on Chatbot V3

Supported Directives on Chatbot V3

Hook function usage