CSS Properties
If you want to customize the web widget to match your brand`s design, you can set custom CSS properties in the dashboard.
Below are listed all supported variables:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,500,700&display=swap&subset=latin-ext');
:root {
--primary-color: #003364;
--secondary-color: #F8335D;
--bg-color: #fff;
--error-color: #e34848;
/* Typography */
--font-family: 'Source Sans Pro', Helvetica, sans-serif;
--font-size: 13px;
--line-height: 18px;
--font-weight: 300;
/* Get Started */
--get-started-bg: #FBFBFB;
--get-started-cover-bg: var(--primary-color);
--get-started-title-color: #fff;
--get-started-title-font-size: 26px;
--get-started-title-line-height: 25px;
--get-started-button-border-radius: 4px;
--get-started-button-font-size: 16px;
--get-started-button-bg-color: var(--button-bg-color);
--get-started-button-text-color: #fff;
--get-started-button-hover-text-color: #fff;
--get-started-button-hover-filter: var(--button-hover-filter);
--get-started-avatar-size: 200px;
--get-started-avatar-border: none;
--get-started-avatar-offset-top: -100px;
--get-started-avatar-border-radius: 50%;
--get-started-welcome-color: #cecece;
--get-started-welcome-size: 14px;
--get-started-welcome-line-height: 18px;
--get-started-avatar-bg: none;
/* Chat / Privacy Policy / */
--chat-privacy-policy-container-font-size: 10px;
--chat-privacy-policy-container-line-height: 13px;
--chat-privacy-policy-container-margin: 50px 40px 0 40px;
--chat-privacy-policy-header-color: #A9A9A9;
--chat-privacy-policy-header-font-weight: bold;
--chat-privacy-policy-header-margin: 0px 0px 2px 0px;
--chat-privacy-policy-color: #7F7F7F;
--chat-privacy-policy-link-color: #7F7F7F;
--chat-privacy-policy-link-font-weight: 600;
--chat-privacy-policy-container-font-size--chat: 8px;
--chat-privacy-policy-container-line-height--chat: 10px;
--chat-privacy-policy-margin--chat: 9px 12px 0px 12px;
/* Tooltips */
--tooltip-bg: #000000;
--tooltip-color: #fff;
/* Chat */
--chat-bg: #FBFBFB;
--chat-message-box-shadow: none;
--chat-message-user-bg: var(--primary-color);
--chat-message-user-text-color: #fff;
--chat-message-user-border-radius: 12px 12px 0px 12px;
--chat-message-user-border-color: #fff;
--chat-message-user-border: 1px solid var(--chat-message-user-border-color);
--chat-message-bot-bg: #fff;
--chat-message-bot-text-color: #2a263c;
--chat-message-bot-links-underline: underline;
--chat-message-bot-border-radius: 12px 12px 12px 0px;
--chat-message-bot-border-color: #F3F3F3;
--chat-message-bot-border: 1px solid var(--chat-message-bot-border-color);
/* Chat / Bot / Sources / References */
--chat-message-bot-sources-reference-color: #707070;
/* Chat / Bot / Sources / Item */
--chat-message-bot-sources-item-background: transparent;
--chat-message-bot-sources-item-border-radius: 4px;
--chat-message-bot-sources-item-border: 1px solid var(--chat-message-bot-border-color);
/* Chat / Bot / Sources / Item / Header */
--chat-message-bot-sources-item-header-font-size: var(--font-size);
--chat-message-bot-sources-item-header-font-weight: 600;
--chat-message-bot-sources-item-header-color: var(--chat-message-bot-text-color);
/* Chat / Bot / Sources / Item / URL */
--chat-message-bot-sources-item-url-font-size: var(--font-size);
--chat-message-bot-sources-item-url-color: var(--chat-message-bot-links-color);
/* Chat / Bot / Sources / Item / Content */
--chat-message-bot-sources-item-content-font-size: 0.9em;
--chat-message-bot-sources-item-content-color: var(--chat-message-bot-links-color);
--chat-message-bot-sources-item-content-opacity: 0.7;
/* Chat / Bot / Custom Function Progress */
--chat-message-bot-custom-function-success: #208520;
--chat-message-bot-custom-function-start: var(--chat-comments-text-color);
--chat-message-bot-custom-function-error: #fa3232;
/* Chat / Buttons */
--button-bg-color: var(--secondary-color);
--button-text-color: #fff;
--button-hover-bg: var(--secondary-color);
--button-hover-text-color: #fff;
--button-border-radius: 4px;
--button-border: none;
--button-hover-border: none;
--button-hover-filter: brightness(85%);
--button-height: 32px;
--button-padding: 0 7px 0 7px;
--button-font-weight: var(--font-weight);
--button-hover-font-weight: var(--button-font-weight);
/* Chat / Notification */
--chat-error-bg: #FFF6F6;
--chat-error-box-shadow: 0 0 8px rgba(0,0,0,0.16);
--chat-error-border: var(--error-color);
--chat-error-headline-color: ;
--chat-error-color: #000;
--chat-info-bg: #fff;
--chat-info-box-shadow: 0 0 8px rgba(0,0,0,0.16);
--chat-info-border: #00d1b8;
--chat-info-headline-color: #00d1b8;
--chat-info-color: #000;
/* Chat / Header */
--chat-header-bg: var(--primary-color);
--chat-header-text-color: #fff;
--chat-header-text-color-headline: var(--chat-header-text-color);
--chat-header-text-color-description: var(--chat-header-text-color);
--chat-header-text-font-weight-headline: 600;
--chat-header-text-font-weight-description: 400;
--chat-header-text-font-size-headline: 15px;
--chat-header-text-font-size-description: 13px;
--chat-header-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
--chat-header-height: 65px;
--chat-header-icons-color: #fff;
/* Chat / Header / Error connection */
--chat-header-error-connection-bg: #FFF6F6;
--chat-header-error-connection-text: var(--error-color);
/* Chat / Header / Bot Name */
--chat-header-bot-avatar-size: 40px;
--chat-header-bot-avatar-border-radius: 50%;
--chat-header-bot-name-font-size: var(--font-size);
/* Chat / Header / Icon */
--chat-header-icon-hover-clear-conversation-bg: #fa3232;
--chat-header-icon-hover-clear-conversation: var(--chat-header-icons-color);
--chat-header-icon-active: #2a263c;
--chat-header-icon-btn-size: 40px;
--chat-header-icon-size: 18px;
/* Chat / Header / Powered by */
--chat-header-powered-by-color: #7F7F7F;
--chat-header-powered-by-color-hover: rgb(150, 155, 166);
--chat-header-powered-by-color-link: #39325a;
--chat-header-powered-by-bg: #fff;
/* Chat / Header / Remove conversation modal */
--chat-header-remove-conversation-modal-bg: #fff;
--chat-header-remove-conversation-modal-text-color: var(--text-color);
/* Chat / File Upload / Progress */
--file-upload-bg: #fff;
--file-upload-accent: #5ECEB9;
--file-upload-bar-bg: #EBEFF3;
--file-upload-bar-val: var(--secondary-color);
--file-upload-bar-text-color: black;
--file-upload-label-font-weight: 600;
/* Chat / File Upload / Drop ZOne */
--file-dropzone-bg: var(--chat-bg);
--file-dropzone-text-color: var(--secondary-color);
--file-dropzone-box-opacity: 0.9;
--file-dropzone-outline: 2px dashed var(--secondary-color);
/* Chat / Scrollbar */
--chat-scrollbar-color: transparent; /* Set color to show scrollbar*/
--chat-scrollbar-color-hover: var(--chat-scrollbar-color);
--chat-scrollbar-bg: var(--chat-bg);
--chat-scrollbar-width: 8px;
/* Chat / Image */
--image-border: var(--chat-message-bot-border);
/* Chat / Generic templates */
--generic-template-arrow-bg: #fff;
--generic-template-title-font-weight: 700;
--generic-template-arrow-fill: var(--primary-color);
/* Chat / Quick Replies */
--quick-replies-display: flex;
--chat-message-bot-links-color: var(--chat-message-bot-text-color);
--quick-reply-main-color: var(--primary-color);
--quick-reply-text-color: var(--quick-reply-main-color);
--quick-reply-border-color: var(--quick-reply-main-color);
--quick-reply-border-radius: 40px;
--quick-reply-bg: #fff;
--quick-reply-padding: 15px 17px;
--quick-reply-border: 1px solid var(--quick-reply-border-color);
--quick-reply-font-weight: var(--font-weight);
--quick-reply-hover-font-weight: var(--quick-reply-font-weight);
--quick-reply-hover-text-color: var(--quick-reply-text-color);
--quick-reply-hover-border-radius: var(--quick-reply-border-radius);
--quick-reply-hover-bg: #f7f7f7;
--quick-reply-hover-border: 1px solid var(--quick-reply-border-color);
/* Chat / Chatbot Forms */
--chatbot-forms-text-color: var(--chat-message-bot-text-color);
--chatbot-forms-label-font-weight: 600;
/* Chat / Comments */
--chat-comments-text-color: #707070;
--chat-comments-font-size: 11px;
--chat-comments-font-weight: var(--font-weight);
--chat-comments-error-color: var(--error-color);
/* Chat / Rating */
--rating-active-color-bad: #fbd3cf;
--rating-active-color-neutral: #ffeab0;
--rating-active-color-good: #c2edc4;
--rating-hover-color-bad: #fde9e7;
--rating-hover-color-neutral: #fff1c9;
--rating-hover-color-good: #d6f3d7;
--rating-item-bg: #FBFBFB;
--rating-item-labels-color: #707070;
--rating-item-text-color: #000;
/* Chat / Footer */
--chat-footer-bg: #fff;
--chat-footer-border: 1px solid rgba(0, 0, 0, 0.1);
--chat-footer-border-radius: 12px 12px 0 0;
--chat-footer-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
--chat-footer-clip-path: inset(-8px -8px 0px -8px);
/* Chat / Footer / Icon */
--chat-footer-icon-active: var(--primary-color);
--chat-footer-icon-disabled:rgb(215, 215, 215);
/* Chat / Footer / Input */
--chat-footer-input-bg: #F5F5F5;
--chat-footer-textarea-font-size: var(--font-size);
--chat-footer-textarea-color: #000;
--chat-footer-textarea-color-placeholder: rgb(150, 155, 166);
--chat-input-border-color: var(--chat-footer-input-bg);
--chat-input-border: 1px solid var(--chat-input-border-color);
--chat-input-focus-border-color: var(--primary-color);
--chat-input-focus-border: 1px solid var(--chat-input-focus-border-color);
/* Chat / Footer / Counter */
--chat-footer-counter-text: var(--chat-comments-text-color);
--chat-footer-counter-color: var(--primary-color);
--chat-footer-counter-color-error: var(--error-color);;
/* Chat / Footer / Record */
--chat-footer-record-icon-active-pulse: var(--primary-color);
/* Chat / Footer / Persistent Menu */
--chat-footer-menu-bg: var(--chat-bg);
--chat-footer-menu-text-color: var(--text-color);
/* Chat / Footer / Voice */
--chat-footer-voice-bg: #ffffff;
--chat-footer-voice-text-speaking: red;
--chat-footer-voice-icons: var(--primary-color);
--chat-footer-voice-microphone-bg: var(--primary-color);
--chat-footer-voice-icons-hover-bg: #F5F5F5;
}