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.