Slim Side widget customization

Slim Side widget customization

For instructions on how to implement these examples see How to customize Slim widget.

Change widget header and side opener colors

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, select the Primary color of your widget.
  5. Save your changes.

If you want to override the color set, use the following CSS code:

.widget-side__header, .core-search__query-field { background: red ; }

To change the side opener background color, override the following classes:

.widget-side__opener-container, .widget-side__opener { background: red ; }

You can also change the Side opener icon:

To do so, on the Basics tab of the widget customization page enter the new HTML code in the Custom Opener field.

To increase the size of the Side opener to match your image size, do it by modifying the following classes:

.widget-side__opener-content, .widget-side__opener { width: 60px ; }

Change widget width

For expanded state:

.widget-side--expanded div.widget-side__wrapper{ width: 500px ; }

Change widget title font and colors

.widget-side__caption { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, make sure to link it at parent page */ 
font-size: 20px ; 
font-weight: bold ; /* Bold text */ 
text-decoration: underline ; /* Underlined text */ 
font-style: italic ; /* Italic text */ 
color: white ; /* Font color. You can also use color set in HEX or RGB format */ }

Answer text font and colors

We do not recommend overriding any settings except font-family and text color. All other text style changes are to be done in the Article editor.

.answer-header__title-text-node { font-family: 'Josefin Sans', sans-serif; /* If you use a custom font type, make sure to link it at parent page */ 
font-size: 20px ; 
font-weight: bold ; /* Bold text */ text-decoration: underline ; /* Underlined text */ 
font-style: italic ; /* Italic text */ 
color: green ; /* Font color. You can also use color set in HEX or RGB format */ }
.answer-body__html { font-family: 'Josefin Sans', sans-serif; }

Customize links

[nr-normalize] a { text-decoration: none ; cursor: pointer ; color: red ; }

Custom header and footer

  1. In the AI Console, go to Touchpoints > Widgets.
  2. Click Personalize under the widget type that you want to change.
  3. Select the knowledge base or URL to customize.
  4. On the Basics tab, define your custom HTML code in the Custom Header and Custom Footer fields.
  5. Save your changes.