Custom CSS

Advanced customization for developers who want full control over Boei's appearance.

How to get there: Go to Setup → Website widget in the top menu → click your widget → Advanced → Custom CSS.

Element IDs

Use these IDs and classes to target Boei elements:

Element ID/Class
Main button #boei_button
Close button #boei_button_close
Call to action message #boei_trigger_message
Background overlay #boei_background_fade
Channel container #boei_container
Channel items .boei-helper
Individual channels #boei_helper_id_1, #boei_helper_id_2, etc.

Examples

Change Background Overlay

Adjust the opacity of the background fade:

#boei_background_fade {
    opacity: 0.9 !important;
}

Custom Close Button Color

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

Add Glow Effect to Call to Action

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

Rounded Channel List

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

Change All Channel Backgrounds

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

Style Individual Channel

Target the first channel (counted bottom-up):

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

Add Background Image to Channel

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

Adding Custom CSS

  1. Open your widget settings
  2. Go to Advanced or Custom CSS
  3. Enter your CSS code
  4. Save and test

Tips

  • Always use !important to override default styles
  • Test on both desktop and mobile
  • Use browser dev tools to find additional elements

A few things you cannot change with custom CSS: where the button sits on the
screen is locked, so that website themes cannot accidentally push your widget
off the edge or hide it behind other content. Colours, sizes, spacing, fonts,
corners and shadows all work normally. If you need the button in a different
spot, use the position and margin settings in your widget instead.