Creating a Custom Screen

1. Create a new Screen in the Screen Composer and choose the layout Bring Your Own Screen.

   

2. Associate a screenshot of the Screen as the background image to make it easy to recognize

   

3. Define the connections (e.g., login_successful, signup, cancel) — these determine the possible exit points for the Screen

   

   Note: The IDs defined for the connections need to be decided with / provided to your mobile engineering team as they will need them in the code of the BYOS implementation.

4. [Mobile engineers] Implement BYOS into your app

   📚 Follow the guide to implement BYOS into your app

Bringing You Own Screen Within a Flow

BYOS allows you to blend native app screens and Purchasely-generated screens into one seamless user journey.

1. Insert your Custom Screen anywhere in the Flow from the Console — including as the very first step.

   

2. Connect it to other Screens in the Flow and define the transition type for each incoming and outgoing connection.

   

The Custom Screen will appear in the Flow’s navigation exactly according to the transition you configured.

• Example: If the connection leading to your Custom Screen uses the pop-in transition, the SDK will display your native screen as a pop-in.

You can also chain multiple Custom Screens together and control the transition of each link independently.

• Example: If your sign-in process spans several native steps, each step can be mapped to its own Custom Screen node with its own transition.

Using BYOS Within a Paywall A/B Test

You can also include Custom Screen inside Paywall experiments in A/A test or A/B test scenario.

1. create a Custom Screen corresponding to your existing in-house Paywall - don't forget the Screenshot!

   

2. Integrate it in your A/B test as the control variant

   

Using BYOS to reorder steps in your existing onboarding Flow without code

BYOS lets you recreate and manage your existing native onboarding flow inside Purchasely by representing each of your native screens as a Custom Screen node. Once mapped, you can reorder, insert, or remove steps directly from the Console — giving you full no-code control over the structure and sequencing of your onboarding while preserving your original UI.

1. Create one Custom Screen for each native onboarding step, assign it a Screen ID, and define its connections (exit points).
2. Add all these Custom Screens to a Flow in the Console.
3. Drag and drop the nodes to reorder, insert, or remove steps as needed.
4. Draw the transitions between nodes and attach the appropriate connections to each one.
5. Publish the Flow so the SDK orchestrates your onboarding sequence according to your no-code configuration.

Note: This requires having implemented BYOS in your app and mapping each onboarding view controller to its corresponding Screen ID and connections.

Tracking of the Custom Screens

When a Flow is displayed by the SDK, Custom Screens are automatically tracked just like any other Purchasely Screen. Each time a Custom Screen appears, the SDK emits a PRESENTATION_DISPLAYED event containing the Screen ID (in the displayed_presentation property). This allows you to analyze user paths, visualize transitions, and measure drop-off at every step of the Flow.

User interactions inside Custom Screens are not tracked by the SDK, since these screens are fully controlled by your app. If you need additional interaction analytics, you should instrument them directly within your client-side code.

❗️

Don't forget to synchronizing purchases

In a Paywall A/B test scenario, make sure with your engineering team that the In-App Purchases performed inside the Custom Screen are properly synchronized.

If purchases are not synchronized, in-app purchases happening on your Custom Paywall will not be counted by the SDK and integrated in the A/B test data.