Overview
It's easy to embed the CloseBot chat widget on any page. To do this, put the element below wherever you would like the widget to be embedded. If CloseBot detects a chat widget should be displayed on that page, it will display it within the boundaries of your container instead of the bottom right.
<div id="cb-widget-container"></div>
It's up to you to style this outer container to place the widget where you want and size it appropriately. You have full control!
Note: Only one widget can be displayed per page
General CSS Tips...
It's up to you to do the styling of your container, but here are some tips to help you get started.
Set the height of your container. By default, the conainer will collapse vertically to compact the space of the widget. Setting the height of the container will ensure the widget fills that space
#cb-widget-container {
height: 500px;
}
Overwriting CloseBot CSS...
The widget is inserted as HTML, so you have full access to modify the CSS. You can easily inspect the page to see the class names and ids of each element of our widget, and override with your own CSS by including !important. Example showing how to remove the header, for example 👇
div.cb-header {
display: none !important;
}
Mobile Friendly Ideas
If you have a lot of mobile visitors, you will need to think of how you would like to size the container to accommodate. An idea would be to use a class toggle on the widget container for mobile fullscreen, and add a close button inside it.
This CSS and Javascript will bring that desired behavior without affecting non-mobile viewing experience.
Here is the CSS...
/* Base widget container (desktop + default mobile) */
#cb-widget-container {
position: relative;
height: 420px; /* your default fixed height */
border-radius: 18px;
overflow: hidden;
border: 1px solid #cbd5e1;
background: #f8fafc;
}
/* Hidden by default */
#cb-widget-close {
display: none;
}
/* Mobile fullscreen mode */
@media (max-width: 768px) {
#cb-widget-container.is-mobile-expanded {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh; /* requested */
height: 100dvh; /* better on modern mobile browsers */
border-radius: 0;
z-index: 9999;
}
#cb-widget-container.is-mobile-expanded #cb-widget-close {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 10000;
}
}
Here is the javascript used to add and control the toggle...
(() => {
const container = document.getElementById("cb-widget-container");
if (!container) return;
const closeBtn = document.createElement("button");
closeBtn.id = "cb-widget-close";
closeBtn.type = "button";
closeBtn.setAttribute("aria-label", "Close chat");
closeBtn.textContent = "×";
container.appendChild(closeBtn);
const isMobile = () => window.matchMedia("(max-width: 768px)").matches;
const openMobileFullscreen = () => {
if (!isMobile()) return;
container.classList.add("is-mobile-expanded");
document.body.style.overflow = "hidden";
};
const closeMobileFullscreen = () => {
container.classList.remove("is-mobile-expanded");
document.body.style.overflow = "";
};
// Expand when tapped/clicked (mobile only)
container.addEventListener("click", () => {
if (!container.classList.contains("is-mobile-expanded")) {
openMobileFullscreen();
}
});
// Close button
closeBtn.addEventListener("click", (e) => {
e.stopPropagation();
closeMobileFullscreen();
});
// Optional: close on ESC
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") closeMobileFullscreen();
});
})();
Summary
CloseBot is not responsible for teaching or answering CSS and Javascript questions. The examples given here on how to modify your embed experience are given to help you get started 😊