In-App Previews

You can preview your paywall on-device before going live by utilizing paywall previews. This uses a deep link to render a preview of a paywall you've configured on the Superwall dashboard on your device.

To handle deep links, you'll need to add a custom URL scheme for your app. To do this, open Xcode. In your info.plist, add a row called URL Types. Expand the automatically created Item 0, and inside the URL identifier value field, type your Bundle ID, e.g. com.superwall.SuperwallSwiftUIExample. Add another row to Item 0 called URL Schemes and set its Item 0 to a url scheme you'd like to use for your app, e.g. exampleapp. Your structure should look like this:

With this example, it means that the app will open in response to a deep link with the format exampleapp://. You can view Apple's documentation to learn more about custom URL schemes.

Next, you'll need to pass the deep link from your app to the Superwall SDK by using Paywall.track(_:_:). We recommend implementing this in your PaywallService.swift file that handles all Paywall related functions:

extension PaywallService {
  static func trackDeepLink(url: URL) {
    Paywall.track(.deepLinkOpen(deepLinkUrl: url))
  }
}

Then, you'll need to call this function when your app is opened via a deep link. There are different ways to do this, depending on whether you're using a SceneDelegate, AppDelegate, or writing an app in SwiftUI:

@main
struct MyApp: App {
  @UIApplicationDelegateAdaptor(AppDelegate.self) private var appDelegate
  
  var body: some Scene {
    WindowGroup {
      ContentView()
        .onOpenURL { url in
          PaywallService.trackDeepLink(url: url)
        }
    }
  }
}

// Track Your Deep Links
func application(
  _ app: UIApplication, 
  open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  PaywallService.trackDeepLink(url: url)
  return true
}

// for cold launches
func scene(
  _ scene: UIScene, 
  willConnectTo session: UISceneSession, 
  options connectionOptions: UIScene.ConnectionOptions
) {
  ...
  
  for context in connectionOptions.urlContexts {
    PaywallService.trackDeepLink(url: context.url)
  }
}

// for when your app is already running
func scene(
  _ scene: UIScene, 
  openURLContexts URLContexts: Set<UIOpenURLContext>
) {
  for context in URLContexts {
    PaywallService.trackDeepLink(url: context.url)
  }
}

Next, build and run your app on your phone.

Then, head to the Superwall Dashboard. Click on the cog icon in the top right corner, then select Settings:

With the General tab selected, type your custom URL scheme, without slashes, into the Apple URL Scheme field:

Next, open your paywall from the dashboard and click Preview. You'll see a QR code appear in a pop-up:

On your device, scan this QR code. You can do this via Apple's Camera app. This will take you to a paywall viewer within your app, where you can preview all your paywalls in different configurations.

Here's an example of the full paywall preview flow once you're up and running: