Chat widget

Chat widget

Allows you to change the behaviour and properties of the chat widget.

In Configuration section there are various customized settings to enhance the chat widget such as General, Colors and Advanced.

General

In general settings you can edit the Title, Subtitle, Initial payload, Close payload and language that will appear on the widget.

• Title: Title will be the name of chat widget.

• Subtitle: Similarly, you can also add subtitle for chat widget.

• Initial payload: The payload that will be sent when user opens the chat widget. The response to this payload could be an introductory message.

• Close payload: The payload that will be sent when user closes the chat window.

  Note : You can disable close payload in the advanced settings if not required.

• Language: Clai supports multi languages and can choose any langugae.

Colors

In this section you can change the color of every element in the chat widget such as widget background, widget title name, button color, user & assistant message background and tooltip color etc.

Advanced

In this section you can add more settings to enhance clai’s performance:

1. User input hint is the message provided to the user in the chat widget i.e Type your message..., or Text here.....
2. You can enable/disable the show full screen button to maximize the widget size to full screen.
3. Display unread messages count: If set, the number of unread messages will be displayed next to the chat widget icon.
4. Enabling the Hide when not connected will hide the widget if it is not authorized or not connected with the server.
5. Disable tooltips: If set, messages will not appear as a bubble when the widget is closed.
6. Disable close payload: If set, close message will not appear when the widget is closed.
7. Automatically clear the cache: If set, the user will reconnect after 30 mins with a new session.
8. Display message timestamp: If set, a timestamp will be displayed beside every message.

You can define the butttons style, conversation font size, title font size, tooltip font size, avatar path as shown below.

Buttons style

You can customize button styles within the chat widget by specifying css styles in Buttons style field.

    border-radius: 20%; 
    background-color: yellow; 
    text-color: red; 
    font-size:20px; 
    font-family: cursive; 

Default highlight class name:

You can change the style of a particular response by giving its class name.

    rw-sender

Default highlight css :

You can define custom css to change the style of a particular response.

    animation: 0.5s linear infinite alternatedefault-botfront-blinker-animation;  
    outline-style: solid; 
    z-index: 9999; 

Default highlight css animation:

Similarly, you can also define css animations for highlighting the element.

    
    @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; 
      } 
    };