Layout

Our overlay is designed and optimized for mobile devices using a reference screen size of 844 × 390 px (landscape). This size represents the baseline layout the SDK is built around. When the overlay is displayed on devices or containers with different dimensions, it must be resized to ensure the best fullscreen and landscape experience. To handle this automatically, the SDK provides automatic overlay resizing via resizeConfig.

Automatic Overlay Resizing

Automatic resizing allows the overlay to adapt dynamically to the available screen or container size, eliminating the need for manual size management on mobile devices. You can enable this behavior during initialization:

embet.resizeConfig({
  enabled: true,
  hostElement: "body",
});

Configuration Options

Property	Type	Default	Description
enabled	boolean	false	Enables or disables automatic resizing.
hostElement	string	null	Specifies the element used to determine the available width and height for resizing. This element should represent the actual visible screen area of the device. Any valid CSS selector is supported (HTML elements, classes, IDs, etc.). If not provided, the SDK will automatically traverse the DOM and use the nearest ancestor element to determine the available width and height for resizing.

Desktop Usage

For desktop environments, we recommend not enabling resizeConfig. Desktop layouts typically provide sufficient space and consistent dimensions, making automatic resizing unnecessary and potentially undesirable.