Why use a custom CSS to design the widget
The default widget of Spotler AIgent uses a default dynamic styling. Dynamic styling may not work when strict CSP settings are in place on your website. Therefore, the option to overwrite the custom settings of the chatbot and use your own custom CSS file is provided.
When the custom CSS file is used, it overwrites the settings from the Spotler AIgent software. All the changes made on the widget customization page in the software 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;
right: 16px;
bottom: 96px;
}
iframe[data-custom='OBIBots_widget'].mobile {
width: 300px;
height: 450px;
}
iframe[data-custom='OBIBots_widget'].open {
display: initial;
}
iframe[data-custom='OBIBots_widget'].fullscreen {
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;
}
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.
Please note
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 in Spotler AIgent
Some settings are still managed in the software:
- Interaction Settings
- Designing the launcher except for the width, height, and position
Including the custom CSS file in the script
From the automatically generated script from the software, it is only necessary to add one custom_css line. 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>
Please note
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.