🚧

SDK v5.5.0+ recommended

Flows require to integrate SDK v5.3 and above. They are supported since this version, but we recommend v5.5.0 for a better stability and data consistency.

Building a Flow

Let’s explore how to build a Flow with Purchasely.

The Flow Composer lets you:

1. drag and drop Screens built with the Purchasely Screen Composer,
2. organize them inside a canvas
3. link them together with Transitions

Transitions allow you to link a component from a source Screen to the next Screen in the Flow. They can be defined for any interactive component - such as buttons, links, pickers or call-to-action elements - as long as they have an active action (i.e., an action other than “none” or "close"). These transitions allow you to override the default action configured at the Screen level. This makes it possible to reuse the same Screen across multiple Flows while customizing behavior as needed, significantly reducing duplication and improving maintainability.

The components names that appear in the cartridges next to the Screen in the Flow Composer are the names defined for each component in the Screen structure (in the left column of the Screen Composer).

You can rename a component by double-clicking on it in the Screen structure.

Both the Main action and the Second action of a component can be re-mapped / overridden with a transition only if they are associated with one of the following values:

• Open Screen
• Open Placement
• Deeplink
• Web Page

For the sake of clarity, if they are associated with any other action value than the ones listed above, they are ignored.

🚧

I can't see a cartridge matching my Screen component

When drag & dropping a Screen into the Flow canvas, if you don't see the cartridge corresponding to one of the Screen Components, it's probably because the component isn't mapped with one of the authorized actions.

In this case, simply edit the Screen by clicking on its name in the Flow canvas, then map the component with a compatible action (Open Screen, Open Placement, Web Page or Deeplink) and save.

A Transition can be associated with a "Type",

The transition type can take the following values:

• Push
• Modal
• Drawer
• Pop-in
• Full screen

Here is how each Transition type looks like:

For drawers and popins, you can set the desired height:

To ensure a seamless user experience, the Flow Composer associate the background color of the destination Screen to the Transition (for both light mode and dark mode), but you can change that color if needed.