How to customize your widget CSS

Use our selectors

• Section container
  • Main container that follows div#lightchat-container
  • Has no effect in widget theme mode
  • Controls height and width in fullscreen mode
  • Has dynamic responsive classNames that adapt based on our responsive breakpoints

#genii-widget-container

// With responsive:
#genii-widget-container.is-desktop

• Positionning
  • #genii-core-wrapper share the size management with his iframe

// Main chat window
#genii-core-wrapper
// Main chat window when left position
.chatbot-wrapper--left_genii

// Hot topic
#genii-hot-topics-wrapper
// Hot topic when left position
.hot-topics-iframe-wrapper--left_genii

// Hook (is directly the iframe and not a container)
#genii-iframe-hook
// Hook when left position
.iframe-onboarding--left_genii

• Iframe

// Height and widht management
#genii-iframe-core
#genii-hot-topics-iframe

// Height, width and positionning management
#genii-iframe-hook

• Body from each iframe

// Body from core widget iframe
#bot-frame

// Body from hook iframe
#genii-frame-onboarding

// Body from hot topics iframe
#hot-topics-frame

Each body element comes with responsive selectors. Connected to the body ID, you can apply changes based on the window size:

// (max-width: 600px)
.is-mobile

// (min-width: 601px) and (max-width: 1023px)
.is-tablet

// (min-width: 1024px)
.is-desktop

// Example
// Apply style on core widget only when you screen is above 600px width
#bot-frame.is-mobile {
 // Custom CSS
}

// Apply style only for tablet and desktop
#bot-frame.is-tablet,
#bot-frame.is-desktop {
 // Custom CSS
}

• Core widget container (header, history, form, genii label product)
  • Has shadow
  • Can manage the background

#core-widget

• Header

#genii-header
#genii-header-avatar
#genii-header-name

// Left container for avatar & name
#genii-header-left-container

// Right container for multilinguale menu, reset button and close button
#genii-header-right-container

// Separator between header & history
#genii-header-separator

#genii-header-reload-button
#genii-header-close-button

// Container for the button (trigger) and menu
#genii-multilingual-menu-container
#genii-multilingual-menu-button

// Menu is a div tag with an absolute property
// It contain: div > ul > many li > button
#genii-header-multilingual-menu
#genii-multilingual-menu-item-button