Styling Web Chat

This page describes the full set of options availbale to style Web Chat.

The styline of Web Chat can be done across these key areas:

  • Text elements

  • Visual components

  • Global styles

Text Elements

  • Brand Name

  • Brand Tagline

Visual Components

  • Chat Button (default mode, not inline mode)

  • Header

  • Input Field

  • Message

  • Message Button

  • Dark Mode Support

  • Width (default mode, not inline mode)

  • Height (default mode, not inline mode)

Global Styles

  • Border

  • Colors

  • Elevation

  • Font

  • Corner Radius

  • Spacing

Sample Configuration

This is a sample configuration of setting to be applied when initiating Web Chat.

theme: {
brandName: 'Web Chat',
brandTagline: 'Powered by Iris',
components: {
chatButton: {
background: 'brand',
color: 'white',
elevation: 'medium',
},
header: {
background: 'brand',
color: 'white',
components: {
avatar: {
round: '100%',
visible: true,
},
minimizeButton: {
background: 'transparent',
color: 'white',
components: { icon: { color: 'inherit' } },
margin: 'small',
padding: 'medium',
round: 'small',
},
subtitle: {
color: 'white',
font: 'small',
margin: 'none',
},
title: {
color: 'inherit',
font: 'large',
margin: 'none',
},
},
elevation: 'medium',
padding: 'medium',
},
input: {
background: 'white',
border: { top: '1px solid #e8e7e7' },
color: 'black',
components: {
secondaryButton: {
background: 'white',
color: 'brand',
components: { icon: { color: 'inherit' } },
margin: 'small',
padding: 'medium',
round: 'small',
},
sendButton: {
background: 'white',
color: 'brand',
components: { icon: { color: 'inherit' } },
margin: 'small',
padding: 'medium',
round: 'small',
},
},
elevation: 'none',
font: 'medium',
padding: 'medium',
round: 'none',
},
message: {
components: {
botMessage: {
background: '#e8e7e7',
color: 'black',
},
messageInfo: {
color: 'grey',
components: {
avatar: {
round: '100%',
visible: true,
},
dateTime: {
color: 'inherit',
font: 'inherit',
visible: true,
},
name: {
color: 'inherit',
font: 'inherit',
visible: true,
},
},
font: 'small',
},
userMessage: {
background: 'brand',
color: 'white',
},
},
font: 'medium',
gap: 'xsmall',
padding: {
bottom: 'small',
left: 'medium',
right: 'medium',
top: 'small',
},
},
messageButton: {
background: 'white',
border: 'xsmall',
color: 'brand',
font: 'medium',
gap: 'small',
padding: 'medium',
round: 'small',
},
messageGroup: {
gap: 'medium',
},
messageWindow: {
background: 'inherit',
padding: 'medium',
},
window: {
background: 'white',
elevation: 'medium',
round: 'medium',
},
},
dark: false,
global: {
border: {
large: pxToRem(5),
medium: pxToRem(4),
small: pxToRem(2),
xlarge: pxToRem(6),
xsmall: pxToRem(1),
},
colors: {
brand: 'hsl(206, 82%, 47%)',
disabled: 'hsl(113, 0%, 80%)',
error: 'hsl(353, 81%, 59%)',
positive: 'hsl(98, 56%, 52%)',
warning: 'hsl(43, 97%, 61%)',
},
elevation: {
dark: {
large: '0px 8px 16px 0px rgba(0, 0, 0, 1)',
medium: '0px 4px 8px -1px rgba(0, 0, 0, 1)',
small: '0px 3px 6px -1px rgba(0, 0, 0, 1)',
xlarge: '0px 12px 24px 0px rgba(0, 0, 0, 1)',
xsmall: '0px 3px 4px -2px rgba(0, 0, 0, 1)',
},
light: {
large: '0px 8px 16px 0px rgba(0, 0, 0, 0.20)',
medium: '0px 4px 8px -2px rgba(0, 0, 0, 0.20)',
small: '0px 3px 6px -2px rgba(0, 0, 0, 0.20)',
xlarge: '0px 12px 24px 0px rgba(0, 0, 0, 0.20)',
xsmall: '0px 3px 4px -4px rgba(0, 0, 0, 0.20)',
},
},
font: {
baseFontSize,
family:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
sizes: {
large: generateFontVariant(600, 14, 20),
medium: generateFontVariant(400, 14, 20),
small: generateFontVariant(400, 10, 14),
xlarge: generateFontVariant(700, 16, 20),
xsmall: generateFontVariant(400, 8, 14),
},
},
round: {
large: '12px',
medium: '6px',
small: '4px',
xlarge: '18px',
xsmall: '2px',
},
spacing: {
large: pxToRem(15),
medium: pxToRem(10),
small: pxToRem(5),
xlarge: pxToRem(20),
xsmall: pxToRem(1),
},
},
height: 400,
useDescriptiveQuickReplies: false,
useUsersBrowserColorPreference: false,
width: 420,
}