How to customize Slim widget?

Unlike our older widget skins, Slim is a highly customizable solution and its styling options limited only by your imagination and available CSS features.

Custom CSS styling can be applied to both floating and embedded widgets in either your custom CSS style sheet at the parent website or directly in the Bold360 ai Console as follows:

  1. Go to Touchpoints > Widgets
  2. Click Personalize under Floating or Embedded widget.
  3. Select a knowledge base or URL to customize.
  4. On the Basics tab, enter your Custom CSS styles.
  5. Save your widget settings.

Some styles require !important to be appended to each CSS settings to override the widget default settings. For example:

.widget-floating__wrapper {width: 600px !important;} 

Here are customization examples for each Slim widget skin:

Slim Floating widget

Slim Side widget (floating)

Slim Embedded widget

Slim Support Center

For more information about CSS features and syntax, see this tutorial:

Contact us if you need any assistance with styling changes.