Slim Embedded widget customization
For instructions on how to implement these examples see How to customize the Slim widget? guide.
Customize widget header color
- In the AI Console, go to .
- Click Personalize under the widget type that you want to change.
- Select the knowledge base or URL to customize.
- On the Basics tab, select the Primary color of your widget.
- 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 ; }