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
Property | Type | Default | Description |
---|---|---|---|
id | string | Required | Unique identifier for the widget instance |
buttonPosition | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Position of the widget button on the page |
buttonColor | string | '#ffffff' | Text/icon color of the widget button |
buttonBackgroundColor | string | '#000000' | Background color of the widget button |
buttonSize | string | '56px' | Size of the widget button (width and height) |
buttonMargin | string | '20px' | Margin around the widget button |
iframeWidth | string | '400px' | Width of the widget iframe when opened |
iframeHeight | string | '600px' | Height of the widget iframe when opened |
displayType | 'popup' | 'modal' | 'popup' | How the widget should be displayed when opened |
modalBackdrop | boolean | true | Whether to show a backdrop when opened in modal mode |
svgIcon | string | Default chat icon | Custom 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.