Theme

The parameters of the theme object. Every parameter is optional and have a default value.

...
theme: {
  buttons: {
    close: true,
    fullScreen: true,
  },
  colors: {
    background: '#f5f5f5',
    main: '#5B468F',
    mainLight: '#f1f0f2',
    mainText: '#fff',
    menuBackground: '#fff',
    menuIcon: '#ddd',
    menuLink: '#949494',
    menuLinkHover: '#d7e0f2',
    primary: '#2BB573',
    primaryText: '#fff',
    secondary: '#fff',
    secondaryText: '#000',
  },
  dialogStyle: 'hover',
  fixed: false,
  fluid: false,
  images: {
    botAvatar: '<DEFAULT_BOT_AVATAR>',
    startButton: '<DEFAULT_START_BUTTON>',
    userAvatar: '<DEFAULT_USER_AVATAR>',
  },
  layout: {
    buttonsDisplay: 'horizontal',
    compact: true,
    noBorder: false,
    noHeader: false,
    noHelpMessage: false,
    rounded: '15px',
    shadowed: false,
  },
  sanitizeDOM: true,
  startButtonStyle: 'bubble',
}
...
Parameter Type Description
buttons.close Boolean Show or hide the close button
buttons.fullScreen Boolean Show or hide the fullscreen button
colors.background String Background color of the webchat dialog
colors.main String Background color of the title bar
colors.mainLight String Background color of the help and the debug messages
colors.mainText String Text color of the title bar
colors.menuBackground String Background color of the menu icon
colors.menuIcon String Color of the menu icon
colors.menuLink String Color of a menu item
colors.menuLinkHover String Color of a menu item on hover
colors.primary String Primary color (used for user messages)
colors.primaryText String Color used for text with primary background
colors.secondary String Secondary color (used for bot/operator messages)
colors.secondaryText String Color used for text with secondary background
dialogStyle String 'hover' adds a border and shadow around the webchat dialog
fixed Boolean Determine if the Webchat is fixed on the page or not
fluid Boolean Make the dialog use the width and height of its parent
images.botAvatar String Image url for the avatar of a user
images.startButton String Image url for the startButton icon
images.userAvatar String Image url for the avatar of the bot
layout.buttonsDisplay String How the buttons are displayed, this can be 'horizontal' , 'vertical' or 'auto'
layout.compact Boolean Reduce the spaces if true
layout.noBorder Boolean Remove borders, borders radius and box shadow of the webchat main container if false
layout.noHeader Boolean Remove the header if false
layout.noHelpMessage Boolean Remove the help message if false
layout.rounded String Define messages bubbles and images messages border radius
layout.shadowed Boolean Remove box shadow on buttons and messages bubbles if false
sanitizeDOM Boolean Prevent DOM sanitization if false , this allow to use custom web components
startButtonStyle String 'bubble' adds a background and border around the start button logo

Default images

botAvatar:

webchat default user

userAvatar:

webchat default user

startButton:

webchat default start