Skip to content

Commit 230c28d

Browse files
authored
Paywalls: Switch component (#1024)
* Added Switch component to docs * Updated tables w/ list of components * Add image
1 parent bea3278 commit 230c28d

File tree

4 files changed

+37
-14
lines changed

4 files changed

+37
-14
lines changed

docs/tools/paywalls/change-log.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Notable releases & fixes related to Paywalls.
88

99
| Date | Description |
1010
| :----------------- | :---------- |
11+
| July 29, 2025 | Added the Switch component. [Learn more](https://www.revenuecat.com/docs/tools/paywalls/creating-paywalls/components#switch-component) |
1112
| July 8, 2025 | Paywall templates can now be filtered by purchase method, number of tiers, or number of packages to make it easier to find the templates that suit your business model. |
1213
| June 25, 2025 | iOS 5.30.0, React Native 8.11.8, Flutter 8.10.5, KMP 1.8.6+14.0.2: Fix to improve the accuracy of locale matching. |
1314
| June 25, 2025 | Paywalls can now be copied between Projects that you own for easier reuse. |

docs/tools/paywalls/creating-paywalls.mdx

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,26 @@ import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
2525

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

28-
| Component | Description |
29-
| :-------------- | :----------------------------------------------------------------------------------------- |
30-
| Text | Used to add customizable text strings |
31-
| Image | Used to add an uploaded image |
32-
| Icon | Used to add a customizable icon from our provided list |
33-
| Stack | Used as a parent component to jointly configure its child components |
34-
| Carousel | Used to add a carousel of pages that a customer can swipe through |
35-
| Timeline | Used to add a timeline of connected items |
36-
| Package | Used to add a selectable package with custom styling, text, etc. |
37-
| Purchase button | The call to action that invokes a purchase attempt of the selected package. |
38-
| Button | Used to add other interactions; such as a link to your Privacy Policy, a back button, etc. |
39-
| Footer | A configurable portion of your paywall whose position is fixed and uniquely styled. |
28+
| Component | Parent | Description |
29+
| :-------------- | :----- | :----------------------------------------------------------------------------------------- |
30+
| Text || Used to add customizable text strings |
31+
| Image || Used to add an uploaded image |
32+
| Icon || Used to add a customizable icon from our provided list |
33+
| Stack || Used as a parent component to jointly configure its child components |
34+
| Footer || A configurable portion of your paywall whose position can be fixed and uniquely styled. |
35+
| Package || Used to add a selectable package with custom styling, text, etc. |
36+
| Purchase button || The call to action that invokes a purchase attempt of the selected package. |
37+
| Button || Used to add other interactions; such as a link to your Privacy Policy, a back button, etc. |
38+
| Carousel || Used to add a carousel of pages that a customer can swipe through |
39+
| Timeline || Used to add a timeline of connected items |
40+
| Tabs || Used to display different package groups in different tabs when offering multiple tiers of service, product types, etc. |
41+
| Switch || Used to add a toggle to your paywall that can be used to let customers choose between two different sets of options. |
42+
| Social proof || Styled components that can be used as a starting point to display social proof, testimonials, etc. |
43+
| Feature list || Styled components that can be used as a starting point to display a list of features or benefits |
44+
| Awards || Styled components that can be used as a starting point to callout awards your app has received |
4045

4146
:::info Parent components
42-
Stacks, packages, buttons, and the footer are all parents components which can contain other child components within them to be jointly controlled.
47+
Parent components all fundamentally act as containers that can contain other components within them.
4348
:::
4449

4550
[Learn more about each component.](/tools/paywalls/creating-paywalls/components)

docs/tools/paywalls/creating-paywalls/components.mdx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ Components are the individual building blocks of your paywall that can be arrang
2121
| Carousel || Used to add a carousel of pages that a customer can swipe through |
2222
| Timeline || Used to add a timeline of connected items |
2323
| Tabs || Used to display different package groups in different tabs when offering multiple tiers of service, product types, etc. |
24+
| Switch || Used to add a toggle to your paywall that can be used to let customers choose between two different sets of options. |
2425
| Social proof || Styled components that can be used as a starting point to display social proof, testimonials, etc. |
2526
| Feature list || Styled components that can be used as a starting point to display a list of features or benefits |
2627
| Awards || Styled components that can be used as a starting point to callout awards your app has received |
2728

2829
:::info Parent components
29-
Parent components all fundamentally act as containers thatcan contain other components within them.
30+
Parent components all fundamentally act as containers that can contain other components within them.
3031
:::
3132

3233
## Common component properties
@@ -270,6 +271,22 @@ Each tab acts as a parent component which can contain any other components withi
270271
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.
271272
:::
272273

274+
## Switch component
275+
276+
The switch component allows you to add a toggle to your paywall that can be used to let customers choose between two different sets of options. Switches are frequently used to offer a set of packages that do/don't offer a free trial, do/don't offer family sharing, etc.
277+
278+
To modify the appearance of all content within a switch, and have those appearance changes apply to both the OFF and ON state, you can use the `Switch` component in the components panel.
279+
280+
To modify the content within the OFF or ON state, use the `OFF content` and `ON content` components respectively.
281+
282+
After configuring one of the switch states to your liking, you can duplicate any of the components within the switch to the alternate state so that you have an easier starting point when modifying that other state.
283+
284+
:::info Switch component visualiation on device
285+
The switch component will be displayed as a native switch element on both iOS and Android. The dashboard preview uses the iOS styling to illustrate the appearance, so expect the on device appearance to be different on Android in line with the native platform component.
286+
:::
287+
288+
![Switch properties](/docs_images/paywalls/paywalls-switch.png)
289+
273290
## Social proof, feature list, and awards
274291

275292
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.
917 KB
Loading

0 commit comments

Comments
 (0)