Haptic Feedback on Paywalls

A paywall can play a haptic, a short vibration, when someone taps a button or any other element. You pick the haptic for each tap behavior in the paywall editor, and the Superwall SDK plays the native iOS or Android haptic on the device. You don't need to change your app's code.

The SDK also plays a haptic of its own for some paywall actions, such as starting a purchase or closing the paywall. You can turn those off in PaywallOptions.

Requirements

Haptics you pick in the editor need these SDK versions:

Flutter and Expo play haptics through the iOS and Android SDKs they bundle, so they behave the same as those SDKs on each platform.

Add a haptic to a tap

1. Open the paywall in the editor and select the element.
2. Open its tap behavior.
3. Choose an option from the Haptics dropdown.
4. Publish the paywall.

When you pick a haptic, the editor shows the SDK version it needs for your app's platform.

The haptic plays as soon as the element is tapped, before the tap's actions run.

Haptic types

Each option maps to a native haptic on the device:

On iOS, the impact options use UIImpactFeedbackGenerator, Success, Warning and Error use UINotificationFeedbackGenerator, and Selection uses UISelectionFeedbackGenerator. On Android, the values are HapticFeedbackConstants played on the paywall's view.

The SDK's own haptics

Without any setup, the SDK plays a short haptic when the user:

• starts a purchase or a restore,
• opens a URL or a deep link from the paywall,
• closes the paywall.

On Android, it also plays one when the paywall requests a store review.

To turn these off, set isHapticFeedbackEnabled on PaywallOptions to false. It's true by default on every SDK.

let options = SuperwallOptions()
options.paywalls.isHapticFeedbackEnabled = false

Superwall.configure(apiKey: "MY_API_KEY", options: options)

val options = SuperwallOptions().apply {
    paywalls.isHapticFeedbackEnabled = false
}

Superwall.configure(this, "MY_API_KEY", options = options)

final options = SuperwallOptions();
options.paywalls.isHapticFeedbackEnabled = false;

Superwall.configure("MY_API_KEY", options: options);

<SuperwallProvider
  apiKeys={{ ios: "ios_key", android: "android_key" }}
  options={{ paywalls: { isHapticFeedbackEnabled: false } }}
>
  {/* your app */}
</SuperwallProvider>

What the option turns off depends on the platform:

Game controller support works the same way. With isGameControllerEnabled set to true, the SDK's own haptics are off on both platforms, and the editor's haptics are also off on Android.

Framework paywalls

Paywalls built with Superwall Framework, which is in beta, play haptics from code with useHaptics(). It has the same seven types.

Things to know

• A tap can play two haptics. If a purchase button has a haptic picked in the editor, the user feels that haptic and the SDK's own purchase haptic. Set isHapticFeedbackEnabled to false if you only want the one you picked.
• On iOS, isHapticFeedbackEnabled doesn't stop the haptics you pick in the editor. To remove them, set Haptics to None and publish the paywall.
• On Android 10 and earlier, Success and Error fall back to other haptics, as shown in the table above.
• visionOS has no haptics, so none play there.

Related

• Tap behaviors
• Configuring the SDK
• Game Controller Support
• useHaptics() for Framework paywalls