Waarom custom CSS gebruiken voor het design van de widget?
De standaard widget van Engage Bots gebruiken een standaard dynamische styling. Het kan zijn dat een dynamische styling niet werkt wanneer er strenge CSP instellingen zijn op je website. Daarom is er de optie om de standaard instellingen van de chatbot te overschrijven zodat je jouw eigen custom CSS bestand kan gebruiken. Wanneer je een custom CSS bestand gebruikt, dan worden de instellingen op het Engage Bots platform overschreven. Alle wijzigingen die je maakt om de widget te stylen op het platform worden genegeerd.
Template CSS file
Het volgende template heb je nodig om een custom CSS bestand te kunnen gebruiken:
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;
}
Dit template converteer je naar een CSS-bestand, welke je kan hosten.
Alle kleuren en informatie update je handmatig. Wij raden sterk aan om sterke contrast instellingen te gebruiken, zodat het duidelijk leesbaar is.
BELANGRIJK: Alle secties die starten met iFrame moeten ingesloten zijn in het Iframe om de beste lay-out ervaring te bieden. Als de andere secties niet zijn ingesloten, zal het design automatisch terugkeren naar het standaardontwerp van de Engage widget.
Instellingen om te beheren
Sommige instellingen zijn nog steeds te beheren in het platform:
- Interactie Settings
- Het designen van de launcher, behalve de width, height en position.
Het aangepaste CSS-bestand opnemen in het script
Vanuit het automatisch gegenereerde script van het platform is het alleen nodig om één custom_css regel toe te voegen. Het te implementeren script zou er dan als volgt uit moeten zien:
<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>
BELANGRIJK:
Als het aangepaste CSS-bestand niet beschikbaar is of als de link niet correct is, kan de widget niet worden weergegeven! Controleer nogmaals of de link bestaat.