Custom CSS

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

How to get there: Go to Setup → Widget in the top menu → click your widget → scroll to the Custom CSS section.

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
Made with ProductLift