Custom styles for chatbot responses

Default css classes

Below are the list of css class names used in the chatbot. Using these you can modify the styles for tables, buttons and carousels etc.

Class Name	Description
`.rw-widget-container`	`the div containing the chatbox of the default version`
`.rw-widget-embedded`	`div of the embedded chatbox (using embedded prop)`
`.rw-full-screen`	`div of the fullscreen chatbox (using fullScreenMode prop)`
`.rw-conversation-container`	`the parent div containing the header, message-container and sender`
`.rw-messages-container`	`the central area where the messages appear`
`.rw-sender`	`div of the bottom area which prompts user input`
`.rw-new-message`	`the text input element of sender`
`.rw-send`	`the send icon element of sender`
`.rw-header`	`div of the top area with the chatbox header`
`.rw-title`	`the title element of the header`
`.rw-close-button`	`the close icon of the header`
`.rw-loading`	`the loading status element of the header`
`.rw-message`	`the boxes holding the messages of client and response`
`.rw-replies`	`the area that gives quick reply options`
`.rw-snippet`	`a component for describing links`
`.rw-imageFrame`	`a container for sending images`
`.rw-videoFrame`	`a container for sending video`
`.rw-tooltip-body`	`the div container for tooltip`
`.rw-tooltip-close`	`the div to close the tooltip container`
`.rw-unread-count-pastille`	`div shows the unread messages count on widget`
`.rw-carousel-container`	`the parent container has the carousel cards, buttons, titles and subtitle.`
`.rw-carousel-card`	`the div to show the carousel cards`
`.rw-carousel-card-title`	`the title element of the carousel-card`
`.rw-carousel-card-subtitle`	`the subtittle element of the carousel-card`
`.rw-arrow`	`the div arrow to move on the tooltip`
`.react-draggable`	`to drag the widget from one place to other`
`.rw-message-date`	`the div to show the date stamp for conversations`
`.rw-avatar`	`the avatar to show the icon for responses`
`.rw-toggle-fullscreen`	`to enable the fullscreen of chat conversations`
`.rw-fullScreenExitImage`	`to minimise the fullscreen`
`.rw-likedislike`	`the div to give like and dislike`
`.rw-open-launcher__container`	`the div to open the webchat`

Text response behaviour

You can change message appearances by defining custom styles or providing an existing class name.

Custom styles in text responses

You can customize text responses by specifying different custom css styles, such as font color, font size, background color.. etc. This can be applied inside the response menu in the message appearance of the utterance behaviour as shown in the below example :

After defining above css styles we can see the changes in bot response resulting as :

Existing class

In the existing class property of the utterance we can specify the css class name of a pre-defined css class.

Highlight element behaviour

You can change properties of highlighting element by selecting default style or by giving existing class or custom styles.

Default styles in highlighting element

If we select the default style for the highlight element, then predefined default styles will be applied.If you want to change the default styles then you have to define the default highlight css properties in the advanced settings of chat widget. This moment you can change the animation timing, animation type and outline colors etc.

For example :

Default highlight css

animation: 0.5s linear infinite alternate default-botfront-blinker-animation; 
outline-style: solid;

Default highlight css animation

  @keyframes default-botfront-blinker-animation {
    55% {
      outline-color:red;
    }
    60% {
      outline-color: yellow;
    }
    50% {
      outline-color: Pink;
    }
    60% {
      outline-color: green;
    }
    50% {
      outline-color: white;
    }
    50% {
      outline-color: orange;
    }
  };

The following results are shown in below :

Highlighting element using existing class

In existing class if you provide existing css class name, then the existing class name properties will apply to the bot response. As you can see below, it’s reflecting its predefined class properties.

Highlighting element using custom styles

By defining custom styles you can highlight the elements on the webpage with your desired styles.

After applying custom styles as above, the bot response would appear as follows :

Behaviour of buttons and quick replies

You can change the appearance of buttons on your own style by providing custom css properties.

For example :

Behaviour of carousels

You can customize the carousel card set by defining the custom css properties such as background color, font sizes and font colors etc.

Below are the example for reference :

font-weight: bolder; 
background: yellow; 
font-size: 15px;
font-family: "Lucida Console", "Courier New", monospace;

And results as :

Tables with custom styles

You can customize default styles of a table by editing Heading style and Body style.

For example :

In Heading style you can customise table heading by giving css properties such as

border: 3px solid red;
padding: 8px;
background: #FFFF00;
color: #0000FF;

In Body style you can customise body of a table by adding css properties such as

border: 1px solid black;
padding: 8px;
color: black;
font-family: "Lucida Console", "Courier New", monospace;

The results are as follows :