Skip to main content

How to configure a JS Widget

Our widget accepts a configuration object that can be used to customize the design and behavior of the widget.

Configuration Options

PropertyTypeDefaultDescription
idstringRequiredUnique identifier for the widget instance
buttonPosition'bottom-right' | 'bottom-left' | 'top-right' | 'top-left''bottom-right'Position of the widget button on the page
buttonColorstring'#ffffff'Text/icon color of the widget button
buttonBackgroundColorstring'#000000'Background color of the widget button
buttonSizestring'56px'Size of the widget button (width and height)
buttonMarginstring'20px'Margin around the widget button
iframeWidthstring'400px'Width of the widget iframe when opened
iframeHeightstring'600px'Height of the widget iframe when opened
displayType'popup' | 'modal''popup'How the widget should be displayed when opened
modalBackdropbooleantrueWhether to show a backdrop when opened in modal mode
svgIconstringDefault chat iconCustom SVG icon for the widget button.

Example Usage

const widget = new Widget({
id: 'my-widget',
buttonPosition: 'bottom-right',
buttonBackgroundColor: '#007bff',
buttonSize: '64px',
displayType: 'modal',
iframeWidth: '500px',
iframeHeight: '700px',
});

Change Icon

To change the icon of the widget, you can pass a custom SVG icon to the svgIcon property.

Keep in mind that the SVG icon should be a valid SVG element and should use "currentColor" for the fill color. Or you can fill the color directly in the SVG element.

Changing the SVG icon also usually requires updating the size of the button since the icon might be a different size.