Creating Paywalls
Use the brand new Paywall Editor to design a fully customizable paywall.
Paywalls v2 is currently in beta, and has the following limitations:
- Only available on our Native iOS SDK, on versions 5.16.0+. You must update your RevenueCat SDK to use paywalls built with the new editor.
- Not supported on watchOS, or visionOS.
- Footer mode from our original templates is not supported, learn more here.
Key concepts
| Concept | Description |
|---|---|
| Components | RevenueCat's predefined UI elements that can be added to a paywall. (e.g. text, an image, a purchase button, etc.) |
| Component properties | The properties of each component that can be configured to modify it's style and behavior. (e.g. its width, height, border, etc.) |
| Templates | The paywalls that RevenueCat has already created that you can use as a starting point to build your own paywall from. |
Components
Components are the individual building blocks of your paywall that can be arranged and configured to create your own custom layout.
| Component | Description |
|---|---|
| Text | Used to add customizable text strings |
| Image | Used to add an uploaded image |
| Icon | Used to add a customizable icon from our provided list |
| Stack | Used as a parent component to jointly configure its child components |
| Package | Used to add a selectable package with custom styling, text, etc. |
| Purchase button | The call to action that invokes a purchase attempt of the selected package. |
| Button | Used to add other interactions; such as a link to your Privacy Policy, a back button, etc. |
| Footer | A configurable portion of your paywall whose position is fixed and uniquely styled. |
Stacks, packages, buttons, and the footer are all parents components which can contain other child components within them to be jointly controlled.
Learn more about each component.
Building paywalls
To get started building paywalls with our new editor, click on + New Paywall in the callout on the Paywalls page for your Project:
Next, you'll need to select the Offering you want to add a Paywall to. Or, if you don't have any Offerings without Paywalls, you'll have the option to duplicate an existing one or create a new one.
From there, you can start building by either:
- Choosing a template, or
- Starting from scratch
Unless you have a very specific, custom design in mind that you're looking to create; we recommend starting with a template. You can customize any aspect of your paywall once you select a template, it's simply a starting point to explore from.
Using the editor
Once you've selected a template or picked starting from scratch, you'll land on our Paywall Editor, which has the following sections:
- Components: The list of components on your paywall, their hierarchy, and their options (rename, duplicate, etc).
- Component properties: The list of configurable properties of the component you've selected.
- Preview: The preview of your paywall.
- Control panel: The options to change the locale, light/dark mode, and other preview settings to see how your paywall looks in various scenarios. The control panel is also where you can manage localizations through one page instead of modifying them component-by-component.
Adding components
Components can be added to a paywall in two ways:
- Directly to the main paywall with the + Add Component button
- Directly within a parent component, such as a stack, with the + button in that component's row in the components panel.
Once a component has been added to a paywall, you can determine its order on your paywall by dragging it vertically in the stack, or determine its parent component by dragging it underneath the desired parent and indenting it horizontally.
A child component will be subject to the axis, alignment, distribution, and child spacing properties of the parent component; and will be impacted by other properties such as margin & padding.
Modifying components
When you click on a component in the components panel, you'll see it displayed in the component properties panel on the right side of your screen. These properties represent the configurable elements of each component that can be used to give it a unique look and feel.
Many properties for controlling layout, size, and appearance are similar between components; but each one has their own unique properties that are specific to the use cases of that component.
Learn more about component properties.
In addition, by clicking on the ... option in a component's row in the components panel, you can rename, duplicate, or delete any component.
Saving a paywall
When saving a paywall, there are two different states it can be saved in depending on what you're ready to do with it.
| Paywall State | Description |
|---|---|
| Inactive | Paywalls that you do not wish to serve to customers. You can think of these as drafts, or works in progress. Inactive Paywalls will not be available through the SDK. |
| Published | Paywalls that you may wish to serve to customers. These will always be returned on supported SDK versions. Whether they will be served to customers depends on whether you've configured the associated Offering as the Default Offering, or are serving it via Targeting or Experiments. |
When creating a new paywall, you can save your changes at any time by clicking the Save Changes button at the top right of the page.
This will save your paywall in an inactive state so that you can continue editing it, but it will not yet be sent to your app and made available to customers.
To make your paywall available to customers, click Publish Paywall. Once a paywall is published, it will be available via the RevenueCat SDK and therefore can be seen by your customers depending on how you're serving Offerings to them.
You can also set a published paywall to be inactive, or vice versa, at any time.
All paywalls must have a purchase button and at least one package added in order to be publishable.
Paywalls built through the new v2 paywall editor are only supported on RevenueCat Native iOS SDK versions 5.16.0+ or later. If you have existing app version serving RevenueCat Paywalls, setup a Targeting Rule to continue serving them a v1 paywall, so that only customers on supported app versions are served a new v2 paywall.