Skip to content

Commit e076b06

Browse files
eandreeva-twreandreeva-twr
committed
Merge flow-builder into develop
2 parents b4deee6 + 39c25db commit e076b06

2 files changed

Lines changed: 13 additions & 208 deletions

File tree

‎src/content/docs/version-3.0/adapty-paywall-builder.mdx‎

Lines changed: 6 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -5,187 +5,20 @@ metadataTitle: "Build paywalls and onboardings | Flow Builder | Adapty Docs"
55
keywords: ['paywall', 'paywall builder', 'flow builder', 'onboarding builder']
66
---
77

8-
import Zoom from 'react-medium-image-zoom';
9-
import ZoomImage from '@site/src/components/ZoomImage';
10-
import 'react-medium-image-zoom/dist/styles.css';
11-
import Contentid from '@site/src/components/InlineTooltip';
12-
import InlineTooltip from '@site/src/components/InlineTooltip';
13-
14-
We're excited to introduce our **New Paywall Builder**, compatible with Adapty SDK v3.0 and later!
15-
16-
This advanced no-code tool makes creating custom paywalls more intuitive and powerful than ever. You can craft beautiful, engaging paywalls with ease—no technical or design expertise required!
17-
18-
### Key Features of the New Paywall Builder
19-
20-
- **Expanded Template Selection**: Choose from a wide array of professionally designed templates to kickstart your paywall creation. These templates offer various styles and layouts to meet different needs and preferences.
21-
- **Enhanced Flexibility**: Enjoy greater flexibility with the ability to use design layers and new elements like carousels, cards, product lists, and footers. These enhancements give you the creative freedom to build any type of paywall you envision.
22-
- **Revamped Existing Elements**: Existing elements have been significantly improved, offering more options and capabilities to bring your paywall ideas to life.
23-
- **Scalability**: If you manage multiple apps, [migrate](migrate-paywalls) your visual paywall configuration in one click instead of building from scratch.
24-
25-
### Structure of a paywall
26-
27-
In the new Adapty Paywall Builder, a paywall is composed of the following:
28-
29-
- [**Layout**](paywall-layout-and-products): This is the foundational layer of the paywall, setting the background color and defining how products are displayed and top buttons positioned.
30-
- [**Hero Image**](paywall-head-picture): The main picture of the paywall.
31-
- **Main Area**: Here, you can place various elements like a product block, carousels, images, cards, texts, buttons, and lists.
32-
- **Footer**: Similar to the main area, but it's a container that always sticks to the bottom of the paywall on top of the main area. You can add as many elements as needed, and they will be arranged from top to bottom inside the footer in the same order shown in the left pane.
33-
- [**Elements**](adapty-paywall-builder#paywall-elements): The building blocks placed in the main area or footer to create your paywall. They are stacked in the order they appear in the left pane, from top to bottom. You can nest elements within each other, combine them into cards, or display them in a carousel.
34-
35-
### How to start designing a paywall with new Paywall Builder
36-
378
:::warning
38-
The new Paywall Builder is available for iOS and Android only and requires Adapty SDK v3.0 or later. Please make sure you've <InlineTooltip tooltip="upgraded to Adapty SDK v3.0 or later">[iOS](migration-to-ios-sdk-v3), [Android](migration-to-android-sdk-v3), [Flutter](migration-to-flutter-sdk-v3), [React Native](migration-to-react-native-sdk-v3), and [Unity](migration-to-unity-sdk-v3) migration guides</InlineTooltip> for your new paywalls to function properly!
39-
:::
40-
41-
To use the Adapty Paywall Builder:
42-
43-
1. Open the [**Paywalls**](https://app.adapty.io/paywalls) section in the Adapty main menu.
44-
45-
2. Open an existing paywall or [create a new one](create-paywall).
9+
The Paywall Builder is fully functional, but Adapty is no longer adding features or shipping updates for it. For new projects, consider the [Adapty Flow Builder](adapty-flow-builder) — a visual no-code editor for single-screen paywalls and multi-screen onboarding flows that render natively on device:
4610

47-
3. Go to the **Builder & Generator** tab.
48-
49-
4. Add products to the paywall if you haven't yet. Otherwise, click **Build no-code paywall**.
50-
51-
5. Select a template and click **Choose** or [migrate a paywall](migrate-paywalls) from another app.
52-
53-
6. Click **Choose** to confirm your choice.
54-
55-
7. [Add](#paywall-elements) and [customize](#customization-options) paywall elements.
56-
57-
:::important
58-
For the paywall to be displayed, you must switch on the **Show on device** toggle in the Paywall Builder.
59-
:::
60-
61-
<Zoom>
62-
<img src="/assets/shared/img/design-paywall.gif"
63-
style={{
64-
border: '1px solid #727272', /* border width and color */
65-
width: '700px', /* image width */
66-
display: 'block', /* for alignment */
67-
margin: '0 auto' /* center alignment */
68-
}}
69-
/>
70-
</Zoom>
71-
72-
### Migrate your legacy paywalls
73-
74-
Currently, two versions of the Paywall Builder work in parallel in Adapty:
75-
76-
- **New version**: Located in the **Builder & Generator** tab of the Paywall functionality in the Adapty Dashboard. This is the most recent and flexible version that provides many design features to build your perfect paywalls.
77-
78-
:::note
79-
Paywalls designed with this version require Adapty SDK v3.0 or later.
11+
- **Any flow type**: Build single-screen paywalls, multi-step onboardings that include a paywall, and anything in between.
12+
- **Native rendering**: Flows render through the Adapty SDK, without web views.
13+
- **Update without redeploying**: Change copy, design, or logic any time, and updates reach users without an app release.
8014
:::
8115

82-
- **Legacy version**: Located in the **Legacy Builder** tab of the Paywall functionality in the Adapty Dashboard. This version is outdated and should only be used to support app versions with installed SDK below v.3.х.х. We don't recommend using it for new paywalls as it will be deprecated soon.
83-
84-
The migration of a paywall from the legacy Paywall Builder to the new one means that a new version of your paywall will be created in the **Builder & Generator** tab.
16+
The Adapty **Paywall Builder** is a visual no-code tool for designing custom paywalls. You can start from a template, customize the layout, and add elements like carousels, cards, product lists, and footers. The builder also supports custom fonts, product tags, and localization.
8517

86-
This version can be edited with the new Paywall Builder and will be displayed in apps with installed Adapty SDK v3.0 or later. See <InlineTooltip tooltip="Migration guide to Adapty SDK v.3.x">[iOS](migration-to-ios-sdk-v3), [Android](migration-to-android-sdk-v3), [Flutter](migration-to-flutter-sdk-v3), [React Native](migration-to-react-native-sdk-v3), and [Unity](migration-to-unity-sdk-v3) migration guides</InlineTooltip> for detailed reference on upgrading the Adapty SDK.
18+
The Paywall Builder requires Adapty SDK v3.0 or later. Once you've designed a paywall, [add it to a placement](add-audience-paywall-ab-test) and display it in your app:
8719

88-
The existing version of your paywall will stay in the Legacy Builder tab. You can continue adjusting it with the legacy Paywall Builder and it will be displayed in apps with installed Adapty SDK version 2.x or earlier.
89-
90-
You will have paywalls in both Paywall Builder formats in parallel and separately until you need them. Changes made to the paywall configuration for one version will not affect the configuration built for another one.
91-
92-
To migrate a paywall to the new Paywall Builder:
93-
94-
1. Open the paywall you want to migrate.
95-
2. Open the **Builder & Generator** tab.
96-
3. Click **Migrate paywall**.
97-
98-
<Zoom>
99-
<img src="/assets/shared/img/migrate-paywall.png"
100-
style={{
101-
border: '1px solid #727272', /* border width and color */
102-
width: '700px', /* image width */
103-
display: 'block', /* for alignment */
104-
margin: '0 auto' /* center alignment */
105-
}}
106-
/>
107-
</Zoom>
108-
109-
4. After the migration is done, review the result and make sure the paywall looks as it should. If not, correct it.
110-
5. Click the **Save** button.
111-
6. If there are any issues, they will be highlighted in red and you will see them immediately. Fix them and save the paywall again.
112-
113-
<Zoom>
114-
<img src="/assets/shared/img/migration-issues.png"
115-
style={{
116-
border: '1px solid #727272', /* border width and color */
117-
width: '700px', /* image width */
118-
display: 'block', /* for alignment */
119-
margin: '0 auto' /* center alignment */
120-
}}
121-
/>
122-
</Zoom>
123-
124-
You can migrate your paywalls one by one so you can review and fix them if necessary.
125-
126-
### Paywall elements
127-
128-
The elements you add to your paywall appear in the left pane of the Paywall window. Their order in this pane reflects their order on the paywall.
129-
130-
**Paywall elements** in Adapty are categorized as simple or compound:
131-
132-
- **Simple Elements**: These are individual items that cannot contain other elements. Examples include text, images, and buttons.
133-
134-
<Zoom>
135-
<img src="/assets/shared/img/simple-elements.png"
136-
style={{
137-
border: '1px solid #727272', /* border width and color */
138-
width: '700px', /* image width */
139-
display: 'block', /* for alignment */
140-
margin: '0 auto' /* center alignment */
141-
}}
142-
/>
143-
</Zoom>
144-
145-
- **Compound Elements**: These can contain other elements or have their own structure. Examples include:
146-
- [Product lists](paywall-product-block) with products
147-
- [Carousels](builder-containers#carousel) with child elements
148-
- [Cards](paywall-card) with child elements
149-
- Lists with list items
150-
- Link blocks with links inside
151-
152-
<Zoom>
153-
<img src="/assets/shared/img/compound-elements.png"
154-
style={{
155-
border: '1px solid #727272', /* border width and color */
156-
width: '700px', /* image width */
157-
display: 'block', /* for alignment */
158-
margin: '0 auto' /* center alignment */
159-
}}
160-
/>
161-
</Zoom>
162-
163-
**Enhancements** you can add include:
164-
165-
1. [Predefined tag variables for product info](paywall-builder-tag-variables)
166-
2. [Custom tags](custom-tags-in-paywall-builder)
167-
3. [Custom fonts](using-custom-fonts-in-paywall-builder)
168-
4. [Localization](add-paywall-locale-in-adapty-paywall-builder)
169-
170-
Once configured, you can [add paywalls to placements](add-audience-paywall-ab-test) to display them in your mobile app. For more details on displaying paywalls, see the platform-specific articles:
17120
- [iOS](ios-quickstart-paywalls)
17221
- [Android](android-quickstart-paywalls)
17322
- [React Native](react-native-quickstart-paywalls)
17423
- [Flutter](flutter-quickstart-paywalls)
17524
- [Unity](unity-quickstart-paywalls)
176-
177-
### Customization Options
178-
179-
You can set up each element flexibly:
180-
181-
- **Style** tab: Adjust the element's size, appearance, background color or image, frame, and transparency. Additional options like page control and slideshow settings are available for certain elements, such as carousels.
182-
- **Layout** tab: Set the element's position and its child elements' positions using offset (moving an element without changing its size or the parent's size) or padding (moving the element with possible resizing of the parent to fit the child's size and position).
183-
- **Contents** tab: Configure the content of compound elements.
184-
185-
### We Value Your Feedback
186-
187-
Your feedback is invaluable to us. If you encounter any issues or have suggestions for improvements, please reach out to us. We're here to support you and enhance your experience with the new Paywall Builder.
188-
189-
📧 **Contact Us**: [Adapty Support](mailto:support@adapty.io)
190-
191-
Enjoy building with the new Paywall Builder, and take your monetization strategy to the next level with our enhanced tools and features!

‎src/content/docs/version-3.0/onboardings.mdx‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,20 @@ metadataTitle: "Overview of Onboardings in Adapty | Adapty Docs"
44
rank: 100
55
---
66

7-
import Zoom from 'react-medium-image-zoom';
8-
import 'react-medium-image-zoom/dist/styles.css';
7+
:::warning
8+
The no-code onboarding builder is fully functional, but Adapty is no longer adding features or shipping updates for it. For new projects, consider the [Adapty Flow Builder](adapty-flow-builder) — a visual no-code editor for single-screen paywalls and multi-screen onboarding flows that render natively on device:
99

10-
Adapty's onboardings let your non-technical teams create attractive and customizable onboarding flows without coding. Our no-code builder helps you design a series of screens that guide users through their first app experience.
11-
12-
:::important
13-
Onboardings are available for apps using Adapty SDK v3.8.0+ (iOS, Android, React Native, Flutter), v3.14.0+ (Unity), or v3.15.0+ (Kotlin Multiplatform, Capacitor).
10+
- **Any flow type**: Build single-screen paywalls, multi-step onboardings that include a paywall, and anything in between.
11+
- **Native rendering**: Flows render through the Adapty SDK, without web views.
12+
- **Update without redeploying**: Change copy, design, or logic any time, and updates reach users without an app release.
1413
:::
1514

16-
## What it is for
17-
18-
<Zoom>
19-
<img src="/assets/shared/img/onboardings1.webp"
20-
style={{
21-
border: '1px solid #727272', /* border width and color */
22-
width: '700px', /* image width */
23-
display: 'block', /* for alignment */
24-
margin: '0 auto' /* center alignment */
25-
}}
26-
/>
27-
</Zoom>
28-
29-
Good onboarding introduces users to your app by:
30-
- Showing your app's core value
31-
- Explaining key features and functionality
32-
- Providing essential usage tips
15+
Adapty's onboardings let non-technical teams build onboarding flows without code. The no-code builder creates a series of screens that introduce users to your app. You can personalize screens with interactive questions and variables, then run A/B tests to find the best-performing flow.
3316

34-
Adapty's onboarding solution stands out with:
35-
- No-code [onboarding builder](design-onboarding) that empowers non-technical teams
36-
- The ability to personalize experiences through interactive questions and variables
37-
- A/B testing support to determine which onboarding flows perform best
17+
Onboardings are available for apps using Adapty SDK v3.8.0+ (iOS, Android, React Native, Flutter), v3.14.0+ (Unity), or v3.15.0+ (Kotlin Multiplatform, Capacitor).
3818

3919
## How it works
4020

41-
To launch your onboarding:
42-
4321
1. [Design an onboarding in the no-code editor.](design-onboarding)
4422
2. [Create a placement for the onboarding.](create-onboarding#step-2-create-a-placement-for-your-onboarding)
4523
3. Integrate the onboarding with your project using the Adapty SDK:
@@ -51,9 +29,3 @@ To launch your onboarding:
5129
- [Kotlin Multiplatform](kmp-onboardings)
5230
- [Capacitor](capacitor-onboardings)
5331
4. Test the onboarding and release it for your users.
54-
55-
To grow further, you can also try more advanced ways to work with onboardings:
56-
57-
- Add more audiences to the placement to show different onboardings to different user groups.
58-
- Run A/B tests of onboardings to find the most efficient option.
59-
- Connect onboardings to paywalls and increase the conversion.

0 commit comments

Comments
 (0)