To make the chat widget look organic on your site and match your brand identity, you can customize it with styles. This allows you to:
This article describes how to add advanced styles using the injectStyles parameter and gives examples of customization. To add advanced widget customizations, follow the steps below:
injectStyles. Customization examples:Allows you to customize the background color and shape of the widget button. Example widget with a custom button, where:
background-color - background color of the button, for example tomato.border-radius - button shape, for example border-radius: 16px - rounded square on 16px instead of circle.Allows you to customize the height and width of the widget. Example widget with custom size, where:
height - height of the widget, e.g. 75vh !important.width - width of the widget, e.g. 50vw !important.Allows you to customize the font of the widget. Example widget with a custom font, where:
font-family - font, for example “Pacifico”, sans-serif - Pacifico font, sans serif.Allows you to customize the position of the widget on the page. Example of widget with changing position on page, where:
left - shift from the left border, for example 8px - shift the widget from the left border by 8 pixels.right - shift from the right border, e.g. unset - cancel the default shift from the right border.align-items - alignment of widget elements, for example start - alignment of widget elements by the top edge.See the bottom right corner for a display of the widget's preset settings.
The widget supports advanced customization, including connect analytics and handle custom events. See customization examples for more details.