Handling Deep Links

Previewing paywalls on your device before going live.
Deep linking to specific campaigns.
Web Checkout Post-Checkout Redirecting

Setup

There are two ways to deep link into your app: URL Schemes and Universal Links (iOS only).

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.Superwall-SwiftUI. 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, 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.

Android

Add the following to your AndroidManifest.xml file:

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="exampleapp" />
    </intent-filter>
</activity>

This configuration allows your app to open in response to a deep link with the format exampleapp:// from your MainActivity class.

In your pubspec.yaml file, add the uni_links package to your dependencies:

dependencies:
  uni_links: ^0.5.1

Then, run flutter pub get to install the package. Next, in your Flutter app, use the Superwall SDK to handle the deep link via Superwall.shared.handleDeepLink(theLink);. Here's a complete example:

import 'package:flutter/material.dart';
import 'package:superwallkit_flutter/superwallkit_flutter.dart';
import 'package:uni_links/uni_links.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  MyApp();

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    Superwall.configure('YOUR_SUPERWALL_API_KEY');
    _handleIncomingLinks();
  }

  void _handleIncomingLinks() {
    uriLinkStream.listen((Uri? uri) {
      if (uri != null) {
        Superwall.shared.handleDeepLink(uri);
      }
    }, onError: (Object err) {
      print('Error receiving incoming link: $err');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Deep Link Preview Example',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Previewing Paywalls

Next, build and run your app on your phone.

Then, head to the Superwall Dashboard. Click on Settings from the Dashboard panel on the left, then select General:

With the General tab selected, type your custom URL scheme, without slashes, into the Apple Custom 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.

Using Deep Links to Present Paywalls

Deep links can also be used as a placement in a campaign to present paywalls. Simply add deepLink_open as an placement, and the URL parameters of the deep link can be used as parameters! You can also use custom placements for this purpose. Read this doc for examples of both.

Handling Deep Links — Use handleDeepLink with the deepLink_open standard placement and dashboard campaign rules to present paywalls from deep links, without hardcoding routing logic in your app.
Using Superwall Deep Links — Trigger paywalls or custom in-app behavior using Superwall-hosted URLs at *.superwall.app/app-link/....

Handling Deep Links

Setup

Adding a Custom URL Scheme

iOS

Android