Theme
Theme
The widget's basic colors and styles can be customised using the theme
object. Additionally, a custom mobile breakpoint can be set to define when the widget becomes full-screen.
{
colors: { // Deprecated
brand: '#303030', // Deprecated
primary: '#000', // Deprecated
secondary: '#fff', // Deprecated
error: '#b4161e', // Deprecated
welcomeScreenBg: '#fff', // Deprecated
positiveMessageFeedback: '#11a193', // Deprecated
negativeMessageFeedback: '#ad020b', // Deprecated
},
general: {
brandColour: '#303030', // Launcher, widget header, buttons etc
brandHoverColour: '#383838', // Hover colour of brand buttons
brandSecondaryColour: '#fff', // Colour of text / icons in branded areas
chatBackgroundColour: '#fff', // Chat widget background colour
errorColour: '#b4161e', // Error text, error banner etc
widgetRadius: '16px' // Widget dialog and overlays border radius
buttonRadius: '40px' // Buttons border radius
},
chatInput: {
borderColour: '#858585', // Chat input border colour
borderHoverColour: '#000', // Chat input border hover colour
sendButtonIconColour: '#262626', // Send message icon colour
messageLimitTextColour: '#4d4d4d', // Character limit text colour
uploadButtonIconColour: '#7F7F7F', // Upload attachment icon colour
uploadButtonIconHoverColour: '#7F7F7F', // Upload attachment icon hover colour
},
messages: {
userBubbleColour: '#000', // User message bubble colour
userTextColour: '#fff', // User message text colour
botBubbleColour: '#e2e2e2', // Bot message bubble colour
botTextColour: '#000000d9', // Bot message text colour
borderRadius: '20px' // User & Bot message bubble radius
},
quickReplies: {
borderColour: '#000', // Quick reply border colour
backgroundColour: '#fff', // Quick reply background colour
backgroundHoverColour: '#f5f5f5', // Quick reply background hover colour
backgroundActiveColour: '#eaeaea', // Quick reply active background colour
textColour: '#000028', // Quick reply text colour
textHoverColour: '#000028', // Quick reply text hover colour
display: 'inline' | 'vertical' // Determines whether to show the quick replies inline or vertically
},
carousel: {
slideBorderColour: '#e2e2e2', // Slide border colour
arrowsColour: '#000', // Navigation arrows icon colour
arrowsCircleColour: '#fff', // Carousel navigation arrows background colour
displayArrowsOnMobile: false, // Whether to show navigation arrows on mobile
descriptionTextColour: '#2c2c2c', // Description text colour
priceBorderColour: '#5b697d', // Price border colour
priceTextColour: '#29313d', // Price text colour
variantNameTextColour: '#5c5c5c', // Variant name text colour
},
messageFeedback: {
containerBackgroundColour: '#f0f0f0', // Container background colour
iconsColour: '#4d4d4d', // Icons colour when unselected
iconsHoverColour: '#191919', // Icons hover colour when unselected
iconsBackgroundHoverColour: '#e0e0e0', // Icons background hover colour when unselected
positiveFeedbackColour: '#11a193', // Positive feedback icon and border colour
negativeFeedbackColour: '#ad020b', // Negative feedback icon and border colour
},
listPopup: {
backgroundHoverColour: '#f9f9f9', // List item background hover colour
borderColour: '#eeeeee', // List item border colour
descriptionTextColour: '#6d6d6d', // Description text colour
},
avatar: {
textColour: '#fff', // Text colour of avatar text (when no image is provided)
backgroundColour: '#303030' // Avatar background colour (when no image is provided) - falls back to brand
},
typingIndicator: {
dotsColour: '#2a2a2a', // Base dots colour, the animation affects the opacity of this
},
endChatPopup: {
cancelButtonBackgroundColour: 'none', // Cancel button background colour
cancelButtonTextColour: '#000', // Cancel button text colour
},
prechatForm: {
variant: 'solid', // Alters the prechat form background style: solid | gradient | diagonal | horizontal
backgroundColour: '#303030', // (optional) Prechat form background colour - falls back to brandColour
welcomeMessageTextColour: '#fff', // Welcome message text colour
inputTextColour: '#2B2B2B', // Input text colour
inputBackgroundColour: '#F3F3F3', // Input background colour
suffixTextColour: '#2B2B2B', // Suffix text colour
iconsColour: '#fff' // Header icons colour
},
proactiveButtons: {
closeIconColour: '#000', // Close icon colour
shadowHoverColour: '#333333', // Button hover shadow colour
questionBubbleColour: '#303030', // Question bubble colour
questionTextColour: '#fff', // Question text colour
answerBubbleColour: '#fff', // Answer bubble colour
answerBorderColour: '#000', // Answer border colour
answerTextColour: '#000', // Answer text colour
},
calendar: {
submitButtonBgColour: '#303030', // Submit button background colour
submitButtonBgHoverColour: '#4a4a4a', // Submit button background colour
submitButtonTextColour: '#fff', // Submit button text colour
selectedDateBgColour: '#2c2c2c', // Selected data background colour
selectedDateTextColour: '#fff', // Selected date text colour
dateHoverBgColour: '#f0f0f0', // Date hover background colour
},
breakpoints: {
mobile: '800px', // The point at which the widget becomes full screen
},
};
Updated 5 days ago