Interactive Paywall Preview

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

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:

Object	Description	Example	User Sees
`primary`	Product 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
`secondary`	Product information relating to the secondary product defined in the Product section	`Subscribe for only {{secondary.price}} per {{secondary.period}}`	Subscribe for only $4.99 per month
`tertiary`	Product information relating to the tertiary product defined in the Product section	`That's only {{tertiary.weeklyPrice}} per week!`	That's only $2.49 per week!
`user`	User attributes your SDK implementation sets on the user. See Setting User Attributes	`Hey {{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 :)
`params`	Parameters defined when triggering a paywall. See Triggering Paywalls and Tracking Events	`Oh 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 Behavior	Functionality
Do nothing	This won't do anything if the user taps on it.
Open deep link	This 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 URL	This will open a URL from within the paywall.
Open URL externally	This will open the provided URL in the user's browser.
Close the paywall	Closes the paywall.
Restore	Restores purchases via the `restorePurchases(completion:)` delegate method.
Custom action	Sends 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 primary	Initiates the delegate method `purchase(product:)` with your primary product identifier.
Purchase secondary	Initiates the delegate method `purchase(product:)` with your secondary product identifier.
Purchase tertiary	Initiates 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: