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: '375px', height: '650px' }, // Dimensions for the chat dialog on desktop
launcher: { width: '70px', height: '70px' }, // Dimensions for the launcher button on desktop
},
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
},
}
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
},
mobile: {
launcher: { bottom: '10px', right: '10px' }, // Position for the launcher on mobile
proactive: { bottom: '90px', right: '20px' }, // Position for the proactive button 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
What’s Next