Webchat elements CSS classes

botfuel-webchat-classes.css

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