Page Comparison

...

Create a div (given below) inside the body tag with id = <Unique ID>.
<div id="chatWindow"></div>
Inside the header tag, create a script tag and give the chat plugin file reference for src.
Include JQuery v1.0 and above (if already included you can skip this step).
Code Block
<head> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> </head>

Include Chat Plugin in the header tag.

Code Block
<script src="https://<domain-name>.orbita.cloud:8443/oeapi/chatbot/v2/chat-plugin.js"<></script>>script>

Include the below script at the bottom of the page.

Code Block

<script>
    var endpointTag = "float";
    var chatLocation = 'https://<domain-name>.orbita.cloud/oeapi';
    var option = {
        dockDefaultAction: 'open',
        width: '520',
        height: '780',
        domId: 'chatWindow',
        launchWord: 'open',
        name: 'Orbita',
        serverUrl: chatLocation + '/bot/hub/' + endpointTag,
        appSettingURL: chatLocation + '/bot/hub/settings' + endpointTag,
        theme: 'dock-float',
        oauthserverUrl: chatLocation,
        settings: {
            "header": {
                "logoUrl": "/chatbot/v2/assets/branding-mark.svg",
                "headerText": "COVID-19",
                "subHeaderText": "Chatbot powered by Orbita",
                "speakerOnIconUrl": "/chatbot/v2/assets/volume-on.svg",
                "speakerMuteIconUrl": "/chatbot/v2/assets/volume-muted.svg",
                "closeIconUrl": "/chatbot/v2/assets/x-header.svg"
            },
            "banner": {
                "title": "''Click here'' - to read the Disclaimer",
                "message": "<p>&nbsp;</p><p>&nbsp;</p><p><strong>Please Note:</strong> I use sources like the U.S. Center for Disease Control (CDC) and others to ensure I have the latest information for you, but I can’t guarantee the accuracy of this information.</p><p>&nbsp;</p><p>Also, I’m not a substitute for the judgment of a healthcare professional and not intended for use in the diagnosis or treatment of coronavirus (COVID-19) or any other diseases or conditions.</p><p>&nbsp;</p><p>If you suspect a life-threatening emergency, please call 911 or your local emergency response immediately.</p><p>&nbsp;</p><p><a target='_blank' href='https://orbita.ai/orbita-privacy-policy/'>Privacy Policy</a><p>&nbsp;</p>"
            },
            "profile": {
                "defaultAvatorUrl": ""
            },
            "footer": {
                "menuIconUrl": "/chatbot/v2/assets/plus-button.svg",
                "menuIconDisabledUrl": "/chatbot/v2/assets/plus-btn-disabled.svg",
                "micIconUrl": "/chatbot/v2/assets/mic.svg",
                "micOnIconUrl": "/chatbot/v2/assets/mic-on.svg",
                "sendButtonIconUrl": "/chatbot/v2/assets/button-circular-01.svg",
                "sendButtonDisabledIconUrl": "/chatbot/v2/assets/send-circular-01-disabled.svg"
            },
            "botAvatorUrl": "/chatbot/v2/assets/orbita-icon.svg",
            "animationAvatorImageUrl": "/chatbot/v2/assets/avatar_loading.gif",
            "animationImageUrl": "/chatbot/v2/assets/msg_loading.gif",
            "theme": { "dockFloat": { "buttonSrc": "https://s3.amazonaws.com/orbitahealth/clients/sandbox73/assets/dynamic/images/chatlogo09eb1d50-5cb9-11ea-8c2e-57a45817118c.png", "buttonTitle": "Hi There!" } }
        }
    };
    if (OrbitaChatBotPlugin) {
        OrbitaChatBotPlugin.initPlugin(option);
    }
</script>

You can include the below code in the header to change the styling of the chatbot.

Code Block
<style> iframe#orbita-chat-iframe { position: fixed; bottom: 0; width: auto; border: none; right: 0; } </style>sstyle>

The Chatbot will load as shown below.

...

Versions Compared

Old Version 10

New Version 11

Key