How to easily create paywalls and run A/B tests with Adapty’s paywall builder

Paywall A/B testing in subscription-based apps is a key means of growing revenue, improving conversions, and reducing bounce rates. And we’ve just made it easier! 

We’re proud to present you with our highly anticipated paywall builder – an easy-to-use tool for creating native mobile app paywalls in a few clicks.

Introduction

Judging by the name, the main purpose of Adapty’s paywall builder is creating mobile paywalls, and frankly, it is so. You’re now able to conveniently and rather quickly design a modern-style paywall on your own within Adapty’s admin panel and immediately show it in your app, with no releases or coding (well, almost no coding, but we’ll get to that later).

However, there’s one more important use case for the paywall builder, as the ability to make a good-looking paywall in a couple of minutes significantly improves the A/B testing possibilities. Create an original paywall, make as many copies as you want, tweak them according to your hypotheses, and launch the tests. No need to wait for the designer to come up with a new mockup or a developer to apply the changes to the code. The whole process, from creating a paywall to launching a test, can now take about 10 minutes and be carried out by just one person! 

In this article, we’ll talk in more detail about the general aspects of the paywall builder, learn what it can be used for, check on how to integrate it with your app, and end up with a step-by-step guide to designing your own paywall.

Why do you need the paywall builder?

Creating native paywalls in minutes

We’ll never get tired of saying that the paywall is a crucial part of any subscription-based app. It’s the place where you ask the user to confide in your app and make a purchase, which is probably the most stressful point of the user journey. So in order to create a nice first impression you have to have a neat and comprehensible paywall. 

Many inexperienced developers, tired after dealing with all the atrocities of integrating in-app purchases, create paywalls for their apps from the perspective of just making something a bit better than a placeholder. But in this case, no matter how good the app is, when the user faces a poorly designed and unclear page extorting their money – chances are you’ll never see them again.

Adapty’s paywall builder helps solve this problem with style. We’ve checked dozens of the most popular and profitable apps and came up with the ultimate paywall template. And it concerns not only design, but also the number of offers and the CTA placement. So you get the basic skeleton of the paywall that will look native and neat, and then style it to your own liking, by manually changing the color scheme, uploading the background of your choice, writing text for the feature list and buttons, and, of course, adding subscription offers. But most importantly – all this is done within one panel with a user-friendly interface.

Facilitating paywall A/B testing

A/B testing is a universal and powerful way to find what works best for your app and in the end, come up with an ultimate version of the paywall that easily hooks the users. However, finding “the one” paywall is usually a never-ending process – it’s impossible to find something that will work perfectly for a long time, as the mobile industry, user demands, and store policies are constantly changing. So once you find the right combination of design, offers, prices, and copy, you may have a sigh of relief, enjoy it for a while, keep it as a “working safe point”, and move on to testing new things.  

Although Adapty already makes the paywall A/B testing process easy and convenient – an experiment can be launched in just 10 minutes – creating different versions of the paywall to test may be time-consuming. If you’re not an indie developer, pretty sure your process of hypothesis testing looks something like that:

• Coming up with a hypothesis
• Discussing it with the team and giving tasks
• Waiting for the designer to finish the new variant
• Waiting for the developer to add fixes to the code
• Setting up the experiment

Changing one or two even minor things on the paywall, in this case, may turn into 1-2 days of leisurely “teamwork”. To solve this problem back in the day we provided Adapty users with the remote config feature. It’s based on a JSON file where the user mentions all the elements of the paywall that can be later changed remotely, meaning that all the changes appeared in the app right away, bypassing the need for another store review. 

However, using remote config requires initial preparation, like coming up with the list of elements you’d want to change in the future, adding “placeholders” for these elements in the app code, and inserting certain fetch, activate, and get methods. Here’s a more detailed explanation of how it works. But once you’re set, you can change the selected paywall elements via the JSON field in real-time with no involvement from the developer or designer. 

The only downside here is that you can change only the elements that you selected in advance and only for one paywall. For example, if you didn’t put the CTA button in the list and now feel like changing it for a hypothetical conversion improvement – you need to add more code and send the app for the store review. Or if you want to create a new paywall to place it somewhere else in the app, you need to also add more code for it and wait for the review.

Other than that, remote config immensely facilitates the process of adjusting your paywall, as well as running paywall A/B tests. But the paywall builder takes it to another level, as it enables you to change as many elements as possible from the start, as well as create an unlimited number of paywalls to experiment with. Yes, it also requires some initial preparation, but basically, the dragged-out teamwork we talked about earlier, now may be done in just 10 minutes by one person only – from an idea to the running experiment. 

I bet you’re already eager to see how it works, so let’s wait no further and get to the tutorial.

Integration

Note: The paywall builder currently supports iOS, Android, Flutter, and React Native SDKs. Stay tuned for more platform support and new paywall templates to be added soon.

To be able to use the paywall builder you need to be the Adapty user in the first place, meaning that you’ve already created an account, set up your products, and integrated our SDK into your app.

The next part is installing AdaptyUI SDK and configuring the Visual Paywalls needed for the proper functioning of the paywall builder. The process will likely take you no more than an hour to complete. Once everything is set up, you can get down to the design part.

Designing a paywall

The current template of the paywall builder allows you to adjust up to 8 elements and preview all the changes in real-time. The things that you can change for each paywall are:

To create your first no-code paywall, go to the Products & Paywalls section of the Adapty’s dashboard and click Create paywall.

The next step is to add general information about the paywall and the products you want to use there. 

• Think of the paywall name, it will be displayed only within the dashboard, and the Paywall ID, which is used in Adapty SDK and can’t be edited once created.
• Add the products. The current template allows adding no more than two products, but there are more templates on the way, so stay tuned.
• Add Apple promotional offers if you want to.

Once the general info is added, it’s time to activate the no-code paywall by switching the corresponding toggle to “on”.

Once it’s activated, you’ll see the preview of a pre-edited paywall on the right. This is the preview area that will be updated in real-time as you apply changes to the paywall. 

The paywall builder consists of three main tabs Design, Features, and Buttons & Links. Let’s see what can be configured in every tab and create our own unique paywall.

Design

In the Design tab you’ll be able to:

• Add the title for your paywall. Make sure to come up with something hooky and transparent to the user at the same time.
• Upload the background image. Pay attention to the size of the file, it shouldn’t be more than 2MB. The supported formats are JPG and PNG.
• Select if you want your paywall to be soft (with a closing button in the corner) or hard (without the closing button).
• Choose to apply the dark mode if the rest of your app is also designed this way.
• Choose the color scheme for your paywall by selecting the primary and secondary accent colors. Make sure to have them line well with the main image.
• Put down the text for the purchase button, also called the CTA button. It’s important to be compliant with the rules of the store in regards to naming the CTA button, as it shouldn’t confuse the users.
• Enter the text for the highlight tag. This tag is automatically placed on the first product on the paywall, so make sure to place your products correctly.

It’s important to mention that the color menu was made extremely user-friendly which enables you to choose colors either manually or by pasting the desired hex code, which is pretty helpful when you want to use a specific color or get a perfect complimentary match.

Features

The Features tab basically shows three main competitive features of your app. You can move the text fields up and down to your liking. As a piece of advice for the copy – make sure to make the features transparent and showing the true value of your app, so that the user clearly understands why they need to buy your product.

Buttons & Links

The Buttons & Links section enables you to place all of your legal links, such as terms and conditions or privacy policy. There’s also a restore purchase button which is required by some stores.

After you adjust the paywall to your liking, click Save & Publish to apply all the changes.

Other features

There are also a few important features placed at the top of the preview panel that will become clickable after you save and publish the paywall.

The Metrics button takes you to a new page where you can see the main metrics for the paywall, such as revenue, proceeds, ARPPU, ARPAS, and many more. Clicking Convert to A/B test will actually enable you to quickly use your current paywall to set up a paywall experiment. Click Duplicate if you want to create a copy of the current paywall for changing one or two elements to run an A/B test. And, of course, you have the possibility to delete the paywall by clicking the corresponding button. You may also check how your paywall will look on a certain device by selecting the model in the device drop-down bar right above the paywall preview.

The remote config feature will also still work for you, if you need it. To find more information on how to get the most out of it, check our tutorial.

So, after we filled all the fields, uploaded the desired image, and chose the suitable colors, here’s the final result we got:

Conclusion

Adapty’s paywall builder is an easy-to-use tool that enables you to quickly design native paywalls in a WYSIWYG manner. It’s not only helpful when it comes to creating paywalls, but is also irreplaceable for fast and autonomous A/B testing that is sure to boost your conversions and increase the app revenue.

The current version of the builder works only with iOS, Android, Flutter, and React Native apps and supports only one template (which is still the best there is) but we’re diligently working on introducing other platforms and adding new templates to give you even more flexibility and room for experimentation.