How do I use a widget with custom CSS?

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.