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
    },
    "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
    },
  }
}

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.