Components

Components are the individual building blocks of your paywall that can be arranged and configured to create your own custom layout.

Component	Parent	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
Footer	✅	A configurable portion of your paywall whose position can be fixed and uniquely styled.
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.
Carousel	✅	Used to add a carousel of pages that a customer can swipe through
Timeline	✅	Used to add a timeline of connected items
Tabs	✅	Used to display different package groups in different tabs when offering multiple tiers of service, product types, etc.
Social proof	✅	Styled components that can be used as a starting point to display social proof, testimonials, etc.
Feature list	✅	Styled components that can be used as a starting point to display a list of features or benefits
Awards	✅	Styled components that can be used as a starting point to callout awards your app has received

📘Parent components

Parent components all fundamentally act as containers thatcan contain other components within them.

Common component properties

Most components have common properties such as padding, margin, border, and more that can be used to control their look and layout. To learn more about these common component properties, click here.

Text component

The text component allows you to enter custom strings to display on your paywall. These strings can be sized, formatted, aligned, and colored however you'd like using the available properties.

Text components can additionally be embedded in other parent components like stacks or buttons to position them relative to other components within the parent.

All text components support variables, which are dynamic values that will be set based on the package being referenced. When a text component is within a package, its variable values will always refer to that package; and text components outside of a package will always refer to the currently selected package.

Learn more about variables.

In addition, all text components support having a unique value for customers that are eligible for intro offers, so that you can reference those offers anywhere on your paywall. You can set this value using the Text field for an introductory offer property on any text component.

Learn more about setting unique values for customers eligible for intro offers.

Custom fonts

Each text component can be configured to use a different font family of your preference. Fonts you can use include:

• System fonts
• Any of sans-serif, serif, or monospace
• Custom fonts you upload to RevenueCat

To upload a custom font, click the gear icon next to the font family property to open the font modal. From there, you can upload a font file, and then select it as the font family for any text component.

The available font weights in the paywall editor will be determined by the weights you upload for each font family, so be sure to upload each font weight you wish to use on your paywall.

The fonts you upload to to RevenueCat will be available to use in any text component on any paywall in your Project. When a paywall is displayed in your app for customers that uses a custom font, the font will be displayed directly from the file you've uploaded to RevenueCat.

📘Improving font loading performance (highly recommended)

You can reduce loading times and improve performance by adding the font to your app's resources. To do this on Android, click the three horizontal dots to the left of the upload button in the font modal to open the modal for specifying each font family's resource name.

Font size

Each text component's font size can be set to one of the available options, or any other value you manually type in.

Though these values represent pixels when rendering the paywall in the dashboard preview, they will be rendered using density-independent values on each platform where the paywall is loaded (e.g. points on iOS, density-independent pixels [dp] on Android).

Image component

The image component allows you to upload an image to display anywhere on your paywall.

Whenever you upload an image, we'll save it in a Media Gallery for your Project, allowing you to reuse it in any paywall.

📘

Uploaded images must be smaller than 2MB, and we recommend keeping them under 1MB, especially if your paywall is initialized very early in your onboarding flow, to ensure all images have been loaded by the time a customer visits the paywall.

In addition to the standard properties that are common to other components, images have a few unique ones that can be used to more granularly control how your image is displayed.

Fit mode

An image's fit mode can be set to Fit so it is resized to fit the available space without cropping, or Fill, where it will fill the available space and crop where necessary.

Mask

An image's mask shape can be set to:

• Rectangle, with an optional corner radius setting
• Circle
• Concave
• Convex

Overlay

An image can have a overlay applied of a solid color or a gradient, along with a transparency property, to allow you to do things like:

1. Add a background image with a semi-transparent overlay color that matches your app's branding
2. Apply a gradient overlay to smoothly transition from the image to your paywall's background color

Alt text

Alt text can be configured for each image to make them more accessible.

To configure alt text, first open that image in the media gallery, which you can access by clicking on Replace image within an image component's properties. Then, hover of the image you want to edit and click the eye icon that appears to view its details.

Then, click Edit under Alt text to add descriptive text to the image, or to set it as a decorative image that does not require a description.

Icon component

The icon component allows you to add an icon to your paywall from our predefined list. Each icon has a filled and outlined version, and can have its color, size, border, etc. custom configured just like other components.

Unlike other components, icons must always have a fixed width and height. Each icon has a 1:1 aspect ratio, so we recommend keeping these values identical if you want to maintain the icon's inherent aspect ratio.

📘Icons from Tabler

Paywalls uses an icon library from Tabler, which means you can also search for icons to use from their site. Some permutations are not available in RevenueCat, but if you see one you'd like to use let us know!

Stack

The stack component allows you to create a container of underlying components that can be jointly configured.

Stacks, and all other parent components, have position properties that determine how the child components are arranged within the parent. This allows you to control the axis on which those components are aligned, how they're aligned, how they're distributed, and the spacing between each child component.

To add a component to a stack, click the + button in that stack's row in the Components Panel. You can also drag any existing component into a stack, or click the ... button on existing component to Embed in stack, placing it within a new stack.

Footer

If you'd like to have a fixed footer at the bottom of your paywall, you can add one using the footer component. This is especially important if you want to add optional content to your paywall that a customer may want to explore if they're interested, but don't necessarily want things like the purchase button buried beneath that content.

Once added, the footer component will always be fixed to the bottom of your paywall, and its size will be relative to its properties and the size of the components within it.

To differentiate between your fixed footer and your other paywall content, we'll add a drop shadow to your footer by default, though this can be customized or removed if you'd prefer.

Package

The package component allows you to add a package to your paywall which your customer may select to purchase. Since a package is a parent component, you can add any other components within it to style your package however you'd like.

At the top of the properties list, you'll need to select the package from your Offering that this package component should reference, and then decide whether this package should be selected by default when a customer loads your paywall.

In addition, package's are unique in that they can have both a Default and a Selected state configured for them, so that you can add unique styling to differentiate the two; such as a unique icon, border color, or background.

Learn more about selected state styling.

📘

The package component defines the selectable area that a customer may tap on to select the package, so be sure to create suitable margin between it and other elements to make it easy for customers to tap on the correct package.

Purchase button

The purchase button is tied to your packages, and is how a customer begins the purchase process with the store.

It's shape can be configured as a pill, or a rectangle with a configurable border radius; and as a parent component it can also contain other components within it, which you might use to show multiple lines of text, an icon, etc.

Web Purchase Button

To add an external link to a Web Paywall within your paywall in supported countries, you can use a Web Purchase Button. Learn more about the Web Purchase Button here.

📘Supported SDKs

The Web Purchase Button is currently supported in iOS 5.22.2, React Native 8.9.6, Flutter: 8.7.5, KMP: 1.7.7+13.29.1 and up.

Button

For all other buttons you may wish to add on your paywall, you can use the button component. The key difference between a button and other stacks is that it has configurable Actions.

You can choose from the following actions:

1. Restore Purchases
2. Navigate back
3. Navigate to

Navigate to additionally supports navigating to your Privacy Policy, Terms of Service, or any other custom URL of your choosing. URLs can be opened via In-App Browser, External Browser, or Deep Link.

Carousel

The carousel component allows you to create a carousel of pages that a customer can swipe through. These pages are their own stacks, and therefore can contain almost any other components that are supported in Paywalls.

To control how pages are displayed in the carousel, you can configure the following properties:

• Page spacing: Determines the space separating each page in the carousel
• Page peek: Determines the portion of the prior and later pages which will be visible (if applicable)
• Open on: Determines which page will be open when the carousel is first displayed
• Start again after last page (loop): Determines whether the carousel will loop back to the first page after the last page is reached
• Automatically advance pages: Determines whether the carousel will automatically advance to the next page after a configurable delay

⚠️SDK compatibility

The earliest beta versions of our iOS SDK do not support the carousel component. We recommend updating to at least the minimum recommended version to get all fixes and improvements from the beta period.

Page control

Each carousel has a Page control component that allows you to customize the appearance of the controller, or if the individual Indicators. Page indicators can be modified to have a unique appearance based on whether they are in the default state or the active state.

In addition, the position of the page control component can be set to Top or Bottom via the carousel component.

Timeline

The timeline component allows you to create a vertical stack of items that can be connected to simulate a timeline, or any other progression you want to illustrate.

To control how items are displayed in the timeline, you can configure the following properties:

• Align icon: Select between the icons being aligned with the Title or the Title and description
• Spacing of an Item: The vertical space between each item in the timeline
• Spacing of each Title and description: The vertical space between the title and description of each item
• Spacing of each Column gutter: The horizontal space between the vertically connected icons of each item and their text & description

Within each item component, you can configure the properties of its connector to control its width, vertical margin, and color.

📘Vertical margin of connectors

A connector's position begins and ends at the center of each icon it intersects with. If you want to instead set the connector to start or end before those points, add enough vertical margin to move its start or end point beyond the space covered by the icon.

All items in a timeline must have an icon and a title, but the description field is optional and can be deleted if it is not desired. Each of those components can be configured individually, just as they can outside of a timeline.

Tabs

The tabs components allows you to add a tabbed interface to your paywall, which can be used to display different content in each tab; especially different package groups when offering multiple tiers of service, product types, etc.

Managing tabs

Each tabs component contains:

1. A dropdown to select the tab to display & modify
2. A stack for that tab's content, which contains both:
3. The tab buttons, and
4. The content of the tab beneath the buttons

The dropdown allows you select which tab to display and modify. To add a new tab, you can either open the dropdown and select + Add tab, or you can click the three horizontal dots to the right of the dropdown and select Duplicate to create a copy of the current tab.

📘Changing the default selected tab

To change the tab which is selected by default when a user reaches your paywall, use the Default tab property on the tabs component.

Tab buttons

The tab buttons stack allows you to control the styling of the tab selector. Changes to the tab buttons will apply to all tabs, to ensure a consistent user experience when switching between tabs.

Each tab has both a default and selected state which can be configured to have a unique appearance so that the user understands which tab is currently selected.

Tab content

Each tab acts as a parent component which can contain any other components within it. In addition, any components within a tab can be duplicated to another tab to make designing each tab easier. Just click on the three horizontal dots to the right of a component within a tab to see the option to Duplicate on each additional tab.

📘Package selected by default

Each tab can have its own package selected by default. This is the package which will be selected when the user first navigates to that tab.

Social proof, feature list, and awards

These component categories are pre-styled components from RevenueCat that can be used as starting points or inspiration to add this type of content to your paywall. Fundamentally, they are no different than any other stacks, and therefore can be customized and configured to your liking.