Slim Floating widget customization

Slim Floating widget customization

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

Note: This guide is applicable only for Slim Float widget.

Set widget header color

Header color can be changed directly in the Widget settings:

  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-floating__header {
    background: red !important;
}

Set widget width and height

For both expanded and minimized states:

.widget-floating__wrapper {
    width:600px;
}

Only for expanded state: 

.widget-floating--state-2 > .widget-floating__wrapper  {
    width: 600px;
    height: 720px;
}

Only for minimized state:

.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
    width: 650px;
    height: 200px;
}

Bottom and side margins

For both expanded and minimized states:

widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}

Only for expanded state:

.widget-floating--state-2 > .widget-floating__wrapper  {
margin-left: 100px;
margin-bottom: 100px;
}

Only for minimized state:

.widget-floating--state-0 > .widget-floating__wrapper , .widget-floating--state-1 > .widget-floating__wrapper {
margin-left: 100px;
margin-bottom: 100px;
}

Widget title font and colors

.widget-floating__title {
    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 */
}

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 */
}

Answer text font and colors

Note that 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; }

Display warning message for long customer questions

You can display a message when a customer's question is too long and hence it is unlikely to receive a relevant answer.

To define a message, do the following:

  1. In the AI Console, go to Touchpoints > Widgets > Floating widget.
  2. Click Personalize.
  3. Select a knowledge base or URL to customize.
  4. On the Texts & Colors tab, you have the following options:
    • Maximum length of user queries - Defines the maximum length of a customer's question
    • Query length for displaying warning - Defines the threshold of the customer query's length. When this threshold is exceeded, the message defined in the Warning for long queries field is displayed.
    • Warning for long queries - Defines the warning message that is displayed to the customer
  5. Save your changes.