CHATBOT MANUAL

How to embed a custom chatbot?

<section id="chatbot-container" class="cleverwidget-host" data-widget-host="clever-chat-widget">
      <script type="text/props">
        {
          "embedToken": "cjubdzyb703opd4qrokmfptfv",
          "conversationTTL": 120,
          "renderMode": "custom",
          "events": false,
          "renderRules": {
            "uiChatState": "CHAT_STATE_OPEN",
            "uiCustomCSS": true,
            "header": true,
            "headerAvatar": true,
            "headerTitle": true,
            "headerBranding": true,
            "headerCloseButton": true,
            "conversationIntro": true,
            "conversationOutro": true,
            "conversationTyping": true,
            "conversationTypingIcon": true,
            "conversationTypingText": true,
            "footer": true,
            "footerInput": true,
            "footerSendButton":true,
            "controls": true,
            "controlsAbout": true,
            "controlsBubble": true,
            "controlsRating": true
          }
        }
        </script>
</section>
<script type='text/javascript' src='https://widget.cleverbots.ai/bundle.js?ver=1.0'></script>

How to style your chatbot?

  1. Script code with chatbot properties
  2. Chatbot properties & elements explained
  3. Predefined variables in a SASS stylesheet template

Overview of chatbot properties and class names

When putting the script of your chatbot on your page, chatbot elements are created automatically. The created chatbot elements are declared by the key-value pairs inside your script. Each element is given a certain class. With this class name you can easily style every element inside the chatbot.

Script

Put the script inside a container with following attributes:
id="chatbot-container" class="cleverwidget-host" data-widget-host="clever-chat-widget"

Example:

script type="text/props"
{
"embedToken": "...",
"conversationTTL": 120,
"renderMode": "custom",
"events": false,
"renderRules": {
"uiChatState": "CHAT_STATE_OPEN",
"uiCustomCSS": true,
"header": true,
"headerAvatar": true,
"headerTitle": true,
"headerBranding": true,
"headerCloseButton": true,
"conversationIntro": true,
"conversationOutro": true,
"conversationTyping": true,
"conversationTypingIcon": true,
"conversationTypingText": true,
"footer": true,
"footerInput": true,
"footerSendButton":true,
"controls": true,
"controlsAbout": true,
"controlsBubble": true,
"controlsRating": true
}
}
/script

Chatbot properties & class names

In the table below, you are given an overview of all the chatbot properties and the elements class name so you can give your chatbot the look that you want. Click on the eye to see in the shown chatbot which cleverwidget element(s) has(have) this class name. Be sure to go through all the message types to be able to see the element being hightlighted.

.cleverwidget-container

.cleverwidget-chat
General properties
embedToken
token of personal chatbot
uiCustomCSS
set true to fully style in CSS yourself
true / false
.cleverwidget-header
Header properties Class name of header elements
header
contains all header properties
true / false (to show or not)
.cleverwidget-header
headerAvatar
image in header
true / false
.cleverwidget-header-avatar
headerTitle
title in header (chatbot title/name)
true / false
.cleverwidget-header-title
headerBranding
'powered by clever.be' as link
true / false
.cleverwidget-header-branding
headerCloseButton
close button of popup
true / false
.cleverwidget-header-closeButton
.cleverwidget-conversation
Bot conversation properties Class name of conversation elements
conversation
??
.cleverwidget-conversation
conversationIntro
‘welcome to live chatbot’
.cleverwidget-conversation-intro
conversationOutro
chatbot branding at the end of conversation messages
-
(last div of conversation)
conversationTyping
text balloon while awaiting response
true / false (to show or not)
.cleverwidget-conversation-message-loading
.cleverwidget-message-loading
conversationTypingIcon
loading icon in text balloon
true / false
-
(svg inside typing text balloon)
conversationTypingText
‘De bot is aan het typen’
true / false
.cleverwidget-conversation-message-loading-text
.cleverwidget-message
all messages
.cleverwidget-bot-message
all bot messages
.cleverwidget-user-message
all user messages
.cleverwidget-message-button-container
button in messages
.slick-slider
class name of carousel
.cleverwidget-controls
Control properties Class name of control elements
controls
to control the chat (open / close)
true / false
.cleverwidget-controls
controlsAbout
toggle cleverwidget-chat with 'start chat'-button
true / false
.cleverwidget-controls-about
controlsBubble
toggle cleverwidget-chat with images
true / false
.cleverwidget-controls-bubble
> .cleverwidget-controls-button-img
controlsRating
??
true / false
??

Predefined SASS variables

To make it yourself easy you can use the stylesheet template and adjust the predefined variables in the '_variables.scss' document. In the '_botstyle' document you can adjust the styling of your chatbot.

General style

Variable Defining
$fSize Font Size of general text
$padding Padding of cleverwidget-chat
$chat_border Border of general chat (header, conversation & footer
$chat_boRadius Border radius of cleverwidget-chat

Header style

Variable Defining
$header_bg Background of header
$header_col Text color of header
$fSize_title Font size of header title
$fSize_branding Font size of header branding
$border_closeButton Border of header close button
$color_closeButton Background color of header close button
$fSize_closeButton Size of header close button

Conversation

Variable Defining
$conv_bg Background color of conversation
$conv_padding Padding of conversation
$conv_color_extra Text color of conversation intro & outro
General messages
Variable Defining
$mess_width Message bubble width (full width/offset)
$rounded Size of rounded corner
$gen_corner General bubble corner (set $rounded/$angular)
$chat_corner Bubble corner of speaker side (set $rounded/$angular)
$mess_padding Padding of bubble
$mess_margin Margin of bubble
$mess_border Border of message bubble
$bStyle Border Style
$bColor Border Color
$bThickness Border Thickness
$typingBubble_col Color of waiting animation circles
Bot messages
Variable Defining
$bot_bg Background of BOT message
$bot_color Text color of BOT message
User messages
Variable Defining
$user_bg Background of USER message
$user_color Text color of USER message
Link in message
Variable Defining
$a_background Background of link
$a_color Text color of link
$a_textAlign Text alignment of link (left/center/right)
$a_padding Padding of link
$a_margin Margin of link
$a_boRadius Border radius of link (button) (rounded/angular)
$a_bColor Border Color of link (button)
$a_hover_bg Hover background of link (button)
$a_hover_color Hover text color of link (button)

Footer style

Variable Defining
$input_height Height of input field (& send button)
$input_width Width of input field
$input_border Border of input field (& send button)
$input_padding Padding of input field (& send button)
$input_color Text color of input field
$input_align Alignment of input field
$send_bg Background of send button
$send_color Text color of send button
$send_width Width of send button
$send_marginL Space between input field and send button (when next to each other)
$send_marginT Space between input field and send button (when under each other)