Activating the Safe area

About

Safe areas in the Purchasely Screen Composer layout are designed to ensure that screen content is rendered within the safe area boundaries of a device.

Although the Screen Composer includes a preview section, enabling safe areas within your screens helps you achieve the most accurate rendering on real devices.

Where to find this feature ?

You can find Add safe area on top and Add safe area at the bottom at the Layout level of the Screen Composer. This option is available for all layouts provided in the Screen Composer.

Prerequisite:

Requires SDK version 5.4.0 or above.

You can find the SDK 5.4 changelog here.

How to use this feature ?

This feature works based on the screen display mode you have set. You can apply both top and bottom safe areas simultaneously on the same screen.

Purchasely has 5 display modes: Full, Push, Modal, Drawer and Pop-in.

Add safe area on top:

Applies a margin at the top of the screen to prevent unwanted cropping of images or text in the header area — for example, due to the notch on iOS devices.

This top safe area is applied only when the screen display mode is set to Full or Push.

Add safe area at the bottom:

Applies a margin at the bottom of the screen to ensure that elements such as footers or terms & conditions are not cropped by the system navigation bar (e.g., on Android devices).

This bottom safe area is applied when the display mode is set to any mode except Pop-in.

Examples

Here are screenshots of screen rendered before and after applying safe areas on top is applied in full mode.

Safe areas and close / back buttons:

The Safe area of the Close and Back buttons always take the safe area into consideration even if you haven't activated it.

If you need to align horizontally a Screen component (such as a progress bar image for instance) with a back button or a Close button, you should activate the safe area on top, and fine-tune the top margin of the Screen first component to align (e.g.: add 20px of top margin to the first component of the Screen)

Safe areas and background image / background color

The background image (or video) and background color of the Screen (set at the level of the layout or the body) are not affected by the safe area. This means that if you want the Screen to cover the device edge to edge, you should configure the image either as the background image or define a background color.