Integrations


 






Other Articles



Recent Articles


CDC Chatbot Integration

Overview

The CDC is offering a symptom checker chatbot that can be built-in to any website, so we have designed HTML for it to be easily added in the Custom HTML widget or Info Advanced editor on any page where you want the chatbot to be present. Below (and attached) is the HTML code to add this symptom checker in the default CDC blue and inline on a page. 

 

<button class="cdc-chatbot-button" title="Check your symptoms using a CDC chat bot.">

    <img src="https://www.cdc.gov/TemplatePackage/contrib/widgets/healthBot/covid19/images/cdcLogo.svg" />Coronavirus

    Self-Checker

</button>
 

<div class="cdc-chatbot-overlay cdc-chatbot-closed">

    <div class="cdc-chatbot-header">

        <img src="https://www.cdc.gov/TemplatePackage/contrib/widgets/healthBot/covid19/images/cdcLogo.svg" />

        <span class="cdc-chatbot-headerText">Coronavirus Self-Checker</span>

        <button type="button" class="cdc-chatbot-close" aria-label="Close" tab-index="2">

            <span aria-hidden="true">×</span>

        </button>

    </div>

    <iframe src="" width="100%"></iframe>

</div>


<script>

    function cdcChatbot(shouldRenderFixed) {

        var transitionMs = 3333; // Match css transition

        var cdcChatbotOpening;

        var cdcChatbotClosing;

 

        function toggleCdcChatbot() {

            var cdcChatbotOverlay = $(".cdc-chatbot-overlay");

            if (

                cdcChatbotOverlay.hasClass("cdc-chatbot-closed") ||

                cdcChatbotOverlay.hasClass("cdc-chatbot-closing")

            ) {

                var iframe = cdcChatbotOverlay.find("iframe");

                iframe.attr("src", "https://covid19healthbot.cdc.gov/");

                iframe.focus();

                cdcChatbotOverlay

                    .removeClass("cdc-chatbot-closing")

                    .removeClass("cdc-chatbot-closed");

                cdcChatbotOverlay.addClass("cdc-chatbot-opening");

                clearTimeout(cdcChatbotOpening);

                clearTimeout(cdcChatbotClosing);

                cdcChatbotOpening = setTimeout(function () {

                    cdcChatbotOverlay

                        .addClass("cdc-chatbot-opened")

                        .removeClass("cdc-chatbot-opening");

               }, transitionMs);

            } else {

                // Re-focus button

                $(".cdc-chatbot-button").focus();

                cdcChatbotOverlay.addClass("cdc-chatbot-closing");

                cdcChatbotOverlay

                    .removeClass("cdc-chatbot-opening")

                    .removeClass("cdc-chatbot-opened");

                clearTimeout(cdcChatbotOpening);

                clearTimeout(cdcChatbotClosing);

                cdcChatbotClosing = setTimeout(function () {

                   cdcChatbotOverlay

                        .addClass("cdc-chatbot-closed")

                        .removeClass("cdc-chatbot-closing");

                }, transitionMs);

            }

        }

 

        function initializeCdcChatbot() {

            console.log("cdc chatbot - init");

            var chatbotButton = $(".cdc-chatbot-button");

 

            if (shouldRenderFixed) {

                console.log("cdc chatbot - rendered as fixed button");

                chatbotButton.addClass("cdc-chatbot-buttonFixed");

 

                // Move to root of DOM to get high z-index priority

                var renderedButton = chatbotButton.clone();

                chatbotButton.remove();

                $("body").append(renderedButton);

            } else {

                console.log("cdc chatbot - no special rendering.");

            }

 

            // Move overlay to root of DOM to get high z-index priority

            var overlay = $(".cdc-chatbot-overlay");

            var renderedOverlay = overlay.clone();

            overlay.remove();

            $("body").append(renderedOverlay);

 

            // Enable button clicks

            $(".cdc-chatbot-close").click(toggleCdcChatbot);

            $(".cdc-chatbot-button").click(toggleCdcChatbot);

        }

        $(document).ready(function () {

            initializeCdcChatbot();

        });

    }

    cdcChatbot(false);

</script>


<style>

    .cdc-chatbot-buttonFixed {

        position: fixed;

        bottom: 0;

        right: 2em;

        border: 1px solid #fff;

        border-bottom: none;

    }

 

    .cdc-chatbot-button {

        background-color: #005eaa;

        color: #fff;

        padding: 0.5rem 1rem;

        width: 270px;

        text-align: center;

        transition: background-color ease-in-out 0.3333s;

        z-index: 999999999;

    }

 

    .cdc-chatbot-button:hover,

    .cdc-chatbot-button:focus {

        background-color: #003b6b;

    }

 

    .cdc-chatbot-header img,

    .cdc-chatbot-button img {

        display: inline;

        width: 100%;

        max-width: 32px;

        margin-right: 0.5em;

    }

 

    .cdc-chatbot-header {

        transition: opacity ease-in-out 0.3333s;

    }

 

    .cdc-chatbot-headerText {

        flex-grow: 1;

    }

 

    .cdc-chatbot-header .cdc-chatbot-close {

        background: none;

        color: #fff;

        border: none;

        margin-left: auto;

    }

 

    .cdc-chatbot-overlay {

        position: fixed;

        bottom: 0;

        right: 2em;

        width: 500px;

        max-width: calc(100vw - 4em);

        border-bottom: none;

        border-top: none;

        line-height: 0;

        z-index: 999999999;

        background: #fff;

        opacity: 1;

        transition: opacity ease-in-out 0.3333s, height ease-in-out 0.3333s;

        height: 738px;

        max-height: 100%;

        display: flex;

        flex-direction: column;

    }

 

    .cdc-chatbot-closing .cdc-chatbot-overlay {

        opacity: 0;

    }

 

    .cdc-chatbot-closed .cdc-chatbot-overlay {

        display: none;

    }

 

    .cdc-chatbot-overlay iframe {

        border: none;

        height: 700px;

        max-height: calc(100% - 38px);

    }

 

    .cdc-chatbot-closing .cdc-chatbot-header {

        opacity: 0;

    }

 

    .cdc-chatbot-opening .cdc-chatbot-header,

    .cdc-chatbot-open .cdc-chatbot-header {

        opacity: 1;

    }

 

    .cdc-chatbot-closed,

    .cdc-chatbot-closing {

        height: 0;

        overflow: hidden;

    }

 

    .cdc-chatbot-opening {

        overflow: hidden;

    }

 

    .cdc-chatbot-header,

    .cdc-chatbot-button {

        background: #005eaa;

        color: #fff;

        padding: 0.5rem 1rem;

        border: 1px solid #fff;

        border-bottom: none;

        display: flex;

        align-items: center;

        justify-content: center;

    }

</style>

 

If you would like to make it docked to the corner of the page and fixed while scrolling, change cdcChatbot(false); to cdcChatbot(true);

The styles for the button can be updated by changing the color options in the .cdc-chatbot-button section for the regular button, and both the .cdc-chatbot-button and .cdc-chatbot-button. Fixed sections for the fixed button. These operate like Advanced Styles.

 

Resources




I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback