Log In Get started

Custom CSS

Boei is designed with simplicity in mind. The aim is to keep configuration to an understandable level for everyone. This works for most of our users. But there are people who want to take it to the next level. As developers, we think this is awesome, and we like to help you.

On this page, you can find the element IDs that Boei is using. Also, there are a few examples. In case you are missing any IDs or have questions, we are happy to help.

Element IDs

Description ID
The Boei button boei_button
Close button when Boei is opened boei_button_close
Call to action / Auto trigger message boei_trigger_message
Overlay / background fade when Boei is opened boei_background_fade
Helper options boei-helper (class)
Helper boei_helper_id_1,2,3

Examples

Changing the fading of the background overlay

#boei_background_fade {
    opacity: 0.9 !important;
}

Adjust the color of the close button

#boei_button_close {
    background-color: #1f9d55 !important;
}

Add a glow to the call to action message

#boei_trigger_message {
    animation: boei_glow 0.5s infinite alternate,
    boei_fade_in 0.3s ease 0s 1 normal none running !important;
}

Make the list of helpers have a rounded border

#boei_container {
    border-radius: 20px !important;
}

Change the background of all helpers

.boei-helper {
    background-color: #6574cd !important;
}

Change the background of one helper

This will affect the first helper (counted bottom-up). Second helper has id boei_helper_id_2, etc.

#boei_helper_id_1 {
    background-color: #6574cd !important;
    border-color: #6574cd !important;
}
#boei_helper_id_1 span {
    color: #ffffff !important;
}

Add background image to one of the helpers

#boei_helper_id_3 {
    background: url("LINK_TO_YOUR_IMAGE") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: auto !important;
}

Feedback Questions

Last updated: Mar 6, 2024