Previewing Screens in Purchasely

The Preview feature lets you validate how a Screen will look and behave before exposing it to end users. Purchasely provides two complementary preview mechanisms:

Console Preview – fast iteration and visual checks directly in the Console
In-App Preview – native rendering inside your app, as your users will see it

Both should be used together to ensure design accuracy, functional correctness, and confidence before launch.

⚠️
Rendering differences may exist between the Console Preview and the Native rendering
The Console Preview is rendered in HTML.
Screens in your app are rendered natively by the mobile SDKs.
Minor discrepancies (layout, spacing, font rendering, alignment) may occur.
The Console Preview is for design validation, not pixel-perfect guarantees and we strongly advise you to verify the native rendering every Screen published inside of your app.
You should always prioritize the native rendering because it's the one seen by your end users. The HTML rendering in the Console is only seen by you.

1. Preview inside the Purchasely Console

The Console Preview is available directly in the Screen Composer and is designed for rapid iteration and visual validation.

Build Mode vs Preview Mode

The Screen Composer offers two complementary modes:

Build Mode
- Select components directly from the preview
- Visualize padding, margin and safe areas
Preview Mode
- Interact with the Screen as an end user
- No overlays or editor controls

Switching between both modes allows you to design and validate interaction flows without friction.

Device & Layout Simulation

You can preview your Screen across multiple device contexts to validate layout and responsiveness:

Device types: Smartphone, Tablet, TV
Specific devices: Choose from a predefined list
Orientation: Portrait or Landscape

📘
Adapting Screens to device types
When switching to another device type (for example from Smartphone to Tablet), you can override the widths, heights and media of any component for that particular device type.
📚 More information: adapting Screens to devices

Visual & Contextual Variations

The Preview allows you to simulate multiple visual and commercial contexts:

Light mode / Dark mode

📚 More information: Dark mode vs Light mode
Regular mode / Offer mode

📚 More information: understanding the Offer mode
Languages (localization preview)

📚 More information: localizing your Screens
Store fronts (App Store / Google Play) and store territories

📘
Prices displayed as $X,XX in the Console preview instead of the real price
The Purchasely Console itself is not directly plugged with the app stores front APIs - the ones providing the SKU informations to the mobile apps.
The platform actually relies on past transactions to display the price tags in the Console Preview.

As long as no transaction has been observed, the price tags are replaced by the string X.XX

As soon as the first transactions are processed or observed for this particular product, the X.XX will be replaced by the pricing observed for the offering.

Preview widget

The Preview Widget lets you visualize your Screen across all possible configurations, helping you simulate real user contexts and see the Screen exactly as your users would.

If your Screen includes conditional visibility rules, these conditions appear directly in the Preview Widget. You can toggle them on or off to instantly display or hide the associated components and validate each variant of your Screen.

Each time you change an option in the Preview Widget:

The Console preview updates in real time
A configuration-specific QR code is generated, allowing you to scan and view the exact same configuration natively inside your app (requires SDK v5.6 and above)

This makes it easy to iterate quickly in the Console and seamlessly validate the result in-app.

2. Preview inside your app

The In-App Preview lets you visualize a Screen inside your application, using the native SDK renderer.

This is the source of truth before shipping.

To visualize a Screen inside your app, simply scan the QR code with your device.

It will open your app and automatically trigger the associated Screen, which will be displayed in its draft version (SDK v5.6 and above)

❗️
Deeplink implementation required
The scanning of the QR triggers a Purchasely Deeplink that will open the app and automatically get recognized by the SDK to display the associated Screen.
To make it work, it is therefore mandatory to have implemented deeplinks management.
If you haven't, follow the guide:
📚 Deeplink management

🚧
How to make it work for Android ?
On some devices, deeplinks like myapp:// are not opened by the camera, this is a limitation from Google.
Instead you can use App Links like https://myapp.com/ as the scheme for your application.
Purchasely will then use a link in this format: https://myapp.com/ply/presentations_preview/MY_PAYWALL_ID embedded in the QR Code that should work on your device if you have followed Android documentation

Preview before publication

When you hit the publish button, you can visualize your Screens in all the applicable configurations at once:

Light mode
Dark mode
Offer mode.

You can also select the desired language and toggle on/off the various visibility conditions configured for the Screen.

By scanning the QR code below each rendering, you can visualize your Screen inside of your app directly.

From SDK v5.6 onwards, it will apply the corresponding configuration automatically.