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.
Comments
Let us know what was helpful or not helpful about the article.0 comments
Please sign in to leave a comment.