Why use a custom CSS to design the widget?
The default widget of OBI Bots uses a default dynamic styling. Dynamic styling may not work when strict CSP settings are in place on your website. Therefore, we give you the option to overwrite the custom settings of the chatbot and use your own custom CSS file.
When the custom CSS file is used, it overwrites the settings from the OBI Bots platform. All the changes made on the widget customization page on the platform will be ignored.
Template CSS file
The template to use for the CSS file
iframe[data-custom="OBIBots_launcher"] {
position: fixed;
bottom: 16px;
right: 16px;
width: 64px;
height: 64px;
z-index: 9999;
}
iframe[data-custom='OBIBots_widget'] {
display: none;
z-index: 9999;
position: fixed;
transition: all 0.2s ease-in;
width: 420px;
height: 600px;
border-radius: 12px;
box-shadow: 0 3px 6px #e0e0e0;
border: 1px solid #e0e0e0;
/* Center */
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
/* Pick one to set the horizontal position */
right: 16px;
/* left: 16px; */
/* Pick one to set the vertical position */
/* top: 16px; */
bottom: 96px;
/* bottom when launcher button is disabled */
/* bottom: 16px; */
}
iframe[data-custom='OBIBots_widget'].mobile {
width: 300px;
height: 450px;
/* it's optional set different positions for mobile */
/* Pick one to set the horizontal position */
/* right: 10px; */
/* left: 10px; */
/* Pick one to set the vertical position */
/* top: 10px; */
/* bottom: 10px; */
}
iframe[data-custom='OBIBots_widget'].open {
/* This shouldn't be changed */
display: initial;
}
iframe[data-custom='OBIBots_widget'].fullscreen {
/* This shouldn't be changed */
width: 100%;
height: 100%;
border-radius: 0;
box-shadow: unset;
border: none;
right: 0;
bottom: 0;
}
div[data-obi] #header {
background-color: #002a4d;
color: #ffffff;
fill: #ffffff;
}
div[data-obi] #message-container {
background-color: #f8f8f8;
}
div[data-obi] .alternativeReplyOption,
div[data-obi] #replyBox {
background-color: #ffffff;
color: #000000;
}
div[data-obi] .attachment.user,
div[data-obi] .expression.user {
background-color: #ffffff;
color: #002a4d;
}
div[data-obi] .attachment.bot,
div[data-obi] .expression.bot {
background-color: #ffffff;
color: #002a4d;
}
div[data-obi] .attachment.agent,
div[data-obi] .expression.agent {
background-color: #ffffff;
color: #002a4d;
}
div[data-obi] .notificationMessage {
background-color: #ffffff;
color: #002a4d;
}
div[data-obi] .button {
border-color: #283E46;
background-color: #ffffff;
color: #002A4D;
}
div[data-obi] .button:focus,
div[data-obi] .button:hover {
background-color: #002A4D;
color: #ffffff;
}
button[data-obi]#launcherButton {
background-color: #002a4d;
color: #002a4d;
border-color: #002a4d;
fill: #ffffff;
}
button[data-obi]#launcherButton.open {
background-color: #ffffff;
}
This template should be converted into a CSS file, which you can host.
All the colors and information can be manually updated. We strongly recommend complying with strong contrast settings.
IMPORTANT: All the sections starting with iFrame must be included in the iFrame to provide the best layout experience. If the other sections are not included, the design will automatically revert to the default design of the OBI Widget.
Settings to manage
Some settings are still managed in the platform:
- Interaction Settings
- Designing the launcher except for the width, height, and position
Including the custom CSS file in the script
From the automated generated script from the platform, it is only necessary to add one custom_css line. Then, the script to implement should look like:
<script id="obi-bots-launcher" src="https://cloudstatic.obi4wan.com/ngbots/obi-launcher.bundle.js"></script>
<script>OBI.bots("xxxx-xxxx-xxxx-xxxx-xxxx", {
custom_css: "https://yourcustomfile.com/custom.css"
});</script>
IMPORTANT:
If the custom CSS file is not available or the link is not correct, the widget cannot be displayed! Double check that the link exists.