Pattr
Search…
Styling Web Chat
This page describes the full set of options availbale to style Web Chat.
The styling 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,
}
Copy link
Outline
Text Elements
Visual Components
Global Styles
Sample Configuration