Slim Embedded widget customization

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

Customize widget header color

  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.

To override the color set, use the following CSS code:

widget-embedded__header { background: red !important; }

Customize widget width and height

Embedded widget width is to be set for widget container div:

#nanorep-embedded-widget { width: 500px; height: 600px ;}

Customize widget title font and colors

.widget-embedded__header { font-family: 'Josefin Sans', sans-serif; 
/* If you use custom font, 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 */ }

Customize answer title font and colors

.answer-header__title-text-node { font-family: 'Josefin Sans', sans-serif; 
/* If you use custom font, 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: grey; /* Font color. You can also use color set in HEX or RGB format */ }

Customize 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-body__html { font-family: 'Josefin Sans', sans-serif; color: grey; }

Customize links

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