Widget Position & Dimensions
Widget Position & Dimensions
You can customise the dimensions of the chat widget for both desktop and mobile by specifying the following settings in the configuration:
{
"widgetDimensions": {
"desktop": {
"dialog": { "width": "400px", "height": "700px" }, // Dimensions for the chat dialog on desktop
"launcher": { "width": "70px", "height": "70px" }, // Dimensions for the launcher button on desktop
"campaigns": { "width": "312px", "height": "auto" }, // Dimensions for campaigns on desktop
"drawer": { "width": "450px" } // Width of the chat drawer on desktop when generalSettings.isDrawerMode is true
},
"mobile": {
"dialog": { "width": "100%", "height": "100%" }, // Dimensions for the chat dialog on mobile
"launcher": { "width": "70px", "height": "70px" }, // Dimensions for the launcher button on mobile
"campaigns": { "width": "312px", "height": "auto" } // Dimensions for campaigns on mobile
},
}
}Drawer Mode
Set generalSettings.isDrawerMode to true to open the widget as a drawer docked to the right-hand side of the page. On desktop the drawer takes up the full height of the page, slides in from the right and ignores widgetPosition.desktop.dialog and widgetDimensions.desktop.dialog. Use widgetDimensions.desktop.drawer.width to change its width (default 450px). On mobile the widget keeps its default full-screen layout.
{
"generalSettings": {
"isDrawerMode": true
},
"widgetDimensions": {
"desktop": {
"drawer": { "width": "450px" }
}
}
}Widget Position
You can control where the chat widget appears on both desktop and mobile by setting the position for the launcher, proactive button, and the chat dialog using the following configuration. You can use any combination of top, right, bottom, and left properties to position the widget.
{
"widgetPosition": {
"desktop": {
"launcher": { "bottom": "10px", "right": "10px" }, // Position for the launcher on desktop
"proactive": { "bottom": "90px", "right": "20px" }, // Position for the proactive button on desktop
"dialog": { "bottom": "20px", "right": "20px" }, // Position for the chat dialog on desktop
"campaigns": { "bottom": "90px", "right": "20px" } // Position for campaigns on desktop
},
"mobile": {
"launcher": { "bottom": "10px", "right": "10px" }, // Position for the launcher on mobile
"proactive": { "bottom": "90px", "right": "20px" }, // Position for the proactive button on mobile
"campaigns": { "bottom": "90px", "right": "20px" }, // Position for campaigns on mobile
"dialog": {
"top": "0px", "right": "0px", "bottom": "0px", "left": "0px" // Full-screen dialog for mobile
}
}
}
}With these settings, you have full control over the size and position of the chat widget, ensuring it fits seamlessly into your web page design.
Updated 9 days ago