Documentation

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
  },
  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
  },
  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
  },
  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
  },
};