Advanced customization (premium)

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.

Note that this is a Boei Premium feature.

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;
}

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;
}

Have questions? Contact us via the Boei button anytime.

Last updated: Aug 16, 2021