Settings

To configure settings for your paywall, click the Settings button from the sidebar:

Use this menu for paywall-wide presentation and behavior settings. The fields shown can vary by platform and account features, but each setting starts with a default value.

Presentation Style

Toggle the presentation style of your paywall. Available options are:

1. Fullscreen: The paywall will cover the entire device screen.
2. Push: The paywall will push onto a hierarchy, such as a UINavigationController on iOS.
3. Modal: The paywall presents with the platform's default modal API.
4. No Animation: The paywall presents modally, but without any animation.
5. Drawer: The paywall presents from a bottom drawer with customizable height and corner radius.
6. Popup: The paywall presents as a modal popup with customizable width, height, and corner radius from the center of the screen.

Presentation Style Examples

These examples use the same paywall so the presentation differences are easier to compare.

Fullscreen fills the device screen.

Push presents the paywall through the app's navigation stack.

Modal uses the platform's default modal presentation.

No Animation presents modally without the transition animation.

Drawer presents from the bottom of the screen.

Popup presents in the center of the screen with configurable sizing.

Drawer Configuration

When using the Drawer presentation style, you can configure:

• Height: Set the height of the drawer as a percentage of the screen (default: 70%).
• Corner Radius: Set the corner radius for the drawer corners (default: 15px).
• Scrolling: Enable or disable scrolling within the drawer.

Popup Configuration

When using the Popup presentation style, you can configure:

• Width: Set the width of the popup as a percentage of the screen (default: 80%).
• Height: Set the height of the popup as a percentage of the screen (default: 60%).
• Corner Radius: Set the corner radius for the popup corners (default: 15px).

Scrolling

Toggle the scrolling behavior of your paywall. Available options are:

1. Enabled (Default): The paywall can scroll its contents when presented on a device.
2. Disabled: Disables all scrolling behavior on the paywall.

iPhone Duo Safe Area

iPhone Duo has a camera strip along one edge of its screen. By default, your paywall goes underneath it, so a button near that edge can end up hidden.

Use iPhone Duo safe area to keep your paywall clear of the strip:

1. Full screen (Default): The paywall goes under the camera strip. Anything near that edge can be hidden.
2. Fill with background: The paywall stops before the camera strip, and the strip is filled with your paywall's background color. Good for solid-color backgrounds.
3. Black edge: The paywall stops before the camera strip, and the strip is black. The paywall's corners next to the strip are rounded. Good for image backgrounds.
4. Full screen, env() only: The paywall looks exactly like Full screen, but the CSS safe-area variables report where the camera strip is. Use this when you want the paywall to stay full screen and only keep a few elements, like a close button, clear of the strip.

The strip is on the right side when the phone is closed. When the phone is open, it's along the top if you hold it upright, and on the right if you turn it sideways.

Here's the same paywall in the iPhone Duo (closed) preview with each option:

Full screenFill with backgroundBlack edge

Keeping single elements clear of the strip

With Full screen, env() only, env(safe-area-inset-top), env(safe-area-inset-right), env(safe-area-inset-bottom) and env(safe-area-inset-left) give you the size of the camera strip and home indicator on iPhone Duo. Add them to an element's position or margin to move just that element. For example, to keep a close button 16px from the strip, set its right to:

calc(env(safe-area-inset-right) + 16px)

On every other iPhone and iPad, and in Full screen mode, these values are 0, so the same style is safe everywhere. With Fill with background and Black edge, the paywall already stops before the strip, so the top and side values are 0 and only the bottom one reports the home indicator.

A few things to know:

• Only iOS apps see this setting.
• It only changes your paywall on iPhone Duo. On every other iPhone and iPad, nothing changes.
• It doesn't affect paywalls that use the Popup presentation style.
• You don't need to update the Superwall SDK for real iPhone Duo devices. It works with the version your app already has.

Previewing on iPhone Duo

To see how your paywall looks, pick iPhone Duo (closed) or iPhone Duo (open) from the device menu at the bottom of the editor. The preview shows the camera strip and your safe area setting, so it matches what people see on a real iPhone Duo. These options show for iOS apps in Device view and Canvas view, which are the Device and Flow buttons in the editor's toolbar.

Game Controller Support

Toggle game controller support for paywalls — obviously, ideal for paywalls shown in games where controllers may be in use. Available options are:

1. Enabled: The paywall can scroll its contents when presented on a device.
2. Disabled (Default): Disables all scrolling behavior on the paywall.

Learn more about game controller support here.

Feature Gating

Feature gating allows you to control whether or not placements should restrict access to features. Using either method, the paywall will still be presented if a user isn't subscribed:

1. Non Gated: Placements will always fire your feature block. Specifically, once the paywall is dismissed.
2. Gated: Placements will only fire your feature block if the user is subscribed. Note that if they are subscribed, the paywall will not be presented.

For example:

// With non gated - `logCaffeine()` is still invoked
Superwall.shared.register(placement: "caffeineLogged") {
  logCaffeine()
}

// With gated - `logCaffeine()` is invoked only if the user is subscribed
Superwall.shared.register(placement: "caffeineLogged") {
  logCaffeine()
}

This is useful to dynamically change what is paywalled in production without an app update. For example, in a caffeine tracking app — perhaps you might run a weekend campaign where logging caffeine is free. You'd simply change the paywall to be Non Gated. Then, the paywall would still be presented, but users would be able to continue and log caffeine.

For information on how this behaves when offline, view this section.

Cache on Device

If enabled, Superwall's SDK will cache the paywall on device. This can be useful if you have a paywall that could take a few seconds to fetch and present (i.e. if there is a video as part of your design). On-device caching can lead to quicker presentation.

Identifier

The identifier for the paywall. Non-editable.

Present Paywall

You can have a paywall present under two different conditions when a placement is matched:

1. Check User Subscription: Present the paywall only if the user's subscription is not active.
2. Always: Present the paywall regardless of the user's subscription status.

Reroute back button

If enabled, allows you to run custom logic on back button press and consuming the event. To use it, once the option has been enabled, use the PaywallOptions.onBackPressed and return true to consume the back press event or false to let the SDK handle it.