Interactive Paywall Preview

The interactive paywall preview shows how your paywall looks on certain iOS devices, for different configurations:

17461746

The top bar allows you to change the localization of the paywall and the device that it's displayed on:

As you mouse-over the paywall, you'll see blue boxes appear highlighting the elements of the paywall that are editable. These are HTML elements that have a data tag attached. Clicking on one of these will bring up an editor to the right:

This is where you define what the end user sees for the selected element. It contains fields that are relevant to the type of element that's selected. For example, text can be edited in a textfield, and images and videos can be replaced.

Above this, you'll see two buttons: Default and Free Trial:

You can click these to toggle between the free trial and default (no free trial) behaviour of the selected element. This also toggles the device preview. When the SDK detects a free trial in the primary product, and the user hasn't already used a free trial within the product's subscription group, it will use the content supplied in the free trial tab. Otherwise it will use the content in the default tab. The free trial tab automatically inherits from the default tab.

Adding Variables

You can show product, user, or device data within text elements by adding a Variable. This uses a language called Liquid to substitute in data at runtime.

Click the + Add Variable button to choose a variable:

This opens a navigation menu from which you can select the data you want to display, along with a preview of what that data looks like:

Clicking on a variable row will insert it inside your textfield with double curly brackets, which tells the device to replace it with real data:

The following objects can be referenced and templated within your paywalls:

ObjectDescriptionExampleUser Sees
primaryProduct information relating to the primary product defined in the Product section{{primary.trialPeriodDays}} days free then only {{primary.price}} per {{primary.period}}7 days free then only $89.99 per year
secondaryProduct information relating to the secondary product defined in the Product sectionSubscribe for only {{secondary.price}} per {{secondary.period}}Subscribe for only $4.99 per month
tertiaryProduct information relating to the tertiary product defined in the Product sectionThat's only {{tertiary.weeklyPrice}} per week!That's only $2.49 per week!
userUser attributes your SDK implementation sets on the user. See Setting User AttributesHey {{user.firstName}}! FitnessAI offers tons of {{user.fitnessGoal}} workouts to help you reach your goals :)Hey Sam! FitnessAI offers tons of calorie burning workouts to help you reach your goals :)
paramsParameters defined when triggering a paywall. See Triggering Paywalls and Tracking EventsOh no, you lost! The secret word was {{params.gameAnswer}}. Start a free trial to play again!Oh no, you lost! The secret word was MONEY. Start a free trial to play again!

You can also do complex math on these variables using liquid. Take a look at their documentation for more on how to do that.

Setting Visibility

You can hide or show a selected element by using the Visibility dropdown:

If you have hidden an element, to retrieve it you can find it by clicking the element selector drop down at the top:

Setting Click Behavior

You can set the click behavior of an element by using the Click Behavior dropdown:

You choose from the following types of click behavior:

Click BehaviorFunctionality
Do nothingThis won't do anything if the user taps on it.
Open deep linkThis will open a deep link. After selecting this you can specify the link to use. We recommend sending deep links to the SDK: Deep Links & In-App Previews.
Open URLThis will open a URL from within the paywall.
Open URL externallyThis will open the provided URL in the user's browser.
Close the paywallCloses the paywall.
RestoreRestores purchases via the restorePurchases(completion:) delegate method.
Custom actionSends the custom action name you provide to the SDK's delegate method handleCustomPaywallAction(withName:). You can use this to perform custom logic from your app as discussed in Custom Paywall Actions.
Purchase primaryInitiates the delegate method purchase(product:) with your primary product identifier.
Purchase secondaryInitiates the delegate method purchase(product:) with your secondary product identifier.
Purchase tertiaryInitiates the delegate method purchase(product:) with your tertiary product identifier.

Customizing design

You can customize the layout, typography, layer, size, margin, padding, corners, effects and background image using the fields below the click behavior: