Custom styles

Botfuel Webchat comes with a number of basic configurations that you can use to easily change its appearance (e.g., colors). You can review the full list here here, under the theme configuration.

In cases where you need more control over the appearance of the webchat, you can use the CSS classes as described below.

/**
 * This stylesheet documents webchat component's classes
 * and how developers can customize them
 *
 * Each class has a "bf-" prefix to prevent conflicts with other classes of the website
 * on which the webchat is loaded
 */

/**
 * WEBCHAT ROOT CONTAINER
 *
 * No styles are applied to this element but you have to use it to ensure that
 * you are always targeting an element of the webchat
 */
.bf-webchat { }

/**
 * WRAPPER
 */

/**
 * Main wrapper of the webchat which is responsible for the position of the webchat
 *
 * By default, the webchat is at the bottom right of the website and its position is fixed
 */
.bf-webchat .bf-webchat-wrapper { }

/**
 * START BUTTON
 */

/**
 * Container of the button used to open the webchat when it's loaded closed
 *
 * This container manages the position of the start button
 */
.bf-webchat .bf-webchat-start-button { }

/* Container that manages the background and the size of the start button */
.bf-webchat .bf-webchat-start-button > div { }

/**
 * CONTENT CONTAINER
 */

/* Contains the header, the message list and the input of the webchat */
.bf-webchat .bf-webchat-container { }

/**
 * HEADER
 */

/* Webchat header that contains the expand and close buttons and the title of the webchat */
.bf-webchat .bf-webchat-header { }

/* Expand button displayed on the right in the header of the webchat */
.bf-webchat .bf-webchat-expand-button { }

/* Close button displayed on the right in the header of the webchat */
.bf-webchat .bf-webchat-close-button { }

/**
 * MESSAGES LIST
 */

/* Message list container */
.bf-webchat .bf-message-list-container { }

/* Help message displayed under the header in the message list container */
.bf-webchat .bf-help-message { }

/* Message list displayed in the message list container */
.bf-webchat .bf-message-list { }

/**
 * INPUT
 */

/* Input wrapper */
.bf-webchat .bf-input-wrapper { }

/* Input container */
.bf-webchat .bf-input-container { }

/**
 * Input menu
 *
 * This menu is displayed on the left of the input wrapper when you define any menu actions
 */

/* Container of the input menu actions */
.bf-webchat .bf-input-menu { }

/* Button used to open the input menu */
.bf-webchat .bf-input-menu-button { }

/* List of the input menu action items */
.bf-webchat .bf-input-menu-list { }

/* Item of the menu actions list */
.bf-webchat .bf-input-menu-list-item { }

/* Input text area, where the user types the text to send */
.bf-webchat .bf-input-textarea { }

/* Input send button used to submit the text */
.bf-webchat .bf-input-send-button { }

/**
 * MESSAGES
 */

/* Message container is the container for messages of types text, table and images */
.bf-webchat .bf-message-container { }

/* User message container, used for user messages */
.bf-webchat .bf-message-container.bf-user { }

/* Bot message container, used for bot messages */
.bf-webchat .bf-message-container.bf-bot { }

/* Avatar displayed on the left of bot messages */
.bf-webchat .bf-message-container .bf-user-avatar { }

/* Server message container, used for messages sent by the server of the webchat */
.bf-webchat .bf-message-container.bf-server { }

/**
 * Text message
 */

/* Text messages container */
.bf-webchat .bf-text-message { }

/* Text messages content */
.bf-webchat .bf-text-message span { }

/**
 * Actions message
 */

/* Actions container is a specific container for actions message */
.bf-webchat .bf-actions-container { }

/* Actions message button element */
.bf-webchat .bf-actions-container .bf-action-button { }

/* Actions message link element */
.bf-webchat .bf-actions-container .bf-action-link { }

/**
 * Cards
 */

/* Carousel container is a specific container for cards message */
.bf-webchat .bf-carousel { }

/**
 * Quick replies
 *
 * They are a special king of message displayed at the bottom of the message list container
 */

/* Quick replies message container */
.bf-webchat .bf-quickreplies { }

/* Quick replies choices button */
.bf-webchat .bf-quickreplies .bf-action-button { }

/**
 * Image message
 */

/* Image messages container */
.bf-webchat .bf-image-message { }

/* Image content */
.bf-webchat .bf-image-message img { }

/**
 * Table message
 */

/* Table messages container */
.bf-webchat .bf-table-message { }

/* Table element */
.bf-webchat .bf-table-message table { }

/* Table row in the head AND the body of the table */
.bf-webchat .bf-table-message table tr { }

/* Table head */
.bf-webchat .bf-table-message table thead { }

/* Table head row */
.bf-webchat .bf-table-message table thead tr { }

/* Table head row item */
.bf-webchat .bf-table-message table thead th { }

/* Table body */
.bf-webchat .bf-table-message table tbody { }

/* Table body row */
.bf-webchat .bf-table-message table tbody tr { }

/* Table body row item */
.bf-webchat .bf-table-message table tbody tr td { }

How to implement

Get the CSS file and include it in the <head> tag of the page where your webchat is loaded with the following code:

...
<link rel="stylesheet" href="<PATH_TO_THE_CSS_FILE>">
...

That's it! You are now ready to update the CSS to customize the webchat.