Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"paywall-editor-overview",
"paywall-editor-layout",
"paywall-editor-styling-elements",
"paywall-editor-local-resources",
"paywall-editor-stacks",
"paywall-editor-drawer-component",
"paywall-editor-navigation-component",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: "Local Resources"
description: "Use images, videos, and other media bundled in your app for faster paywall loading and offline support."
---

Local resources let you reference media files (such as images and videos) that are bundled directly in your app rather than hosted on a remote server. This means faster load times, no network dependency for those assets, and a smoother experience for your users.

<Note>
Local resources require **iOS SDK v4.13.0+** or **Android SDK v2.5.0+**. They are not available on
other platforms at this time.
</Note>

### How it works

Instead of pointing an image or video to a URL, you can point it to a **local resource ID**. This ID maps to a file that the developer has registered in the native SDK. When the paywall loads, the SDK intercepts the request and serves the file directly from the device. No network call is required.

The editor discovers which resource IDs are available by looking at device attribute events your app has reported in the last 7 days. This means at least one device running your app with the SDK configured must have reported its local resources before they appear in the editor.

### Setting a local resource on an image

To use a local resource for an image component:

1. **Select** the image component in the Layout tab or on the canvas.
2. In the component editor, find the image source property.
3. **Click** the **+ Add Local Resource** button.
4. A dropdown will appear listing all resource IDs that devices have reported recently. **Select** the one you want.

<Frame>![](/images/paywall-editor-local-resource.jpg)</Frame>

The image source will update to use the selected local resource. You can still provide a regular image URL as a **fallback**. If the local resource is unavailable (for example, in the web preview or on a device that hasn't registered that resource), the paywall will fall back to the remote URL automatically.

### Setting a local resource on a video

The same flow applies to video components. Select a video, click **+ Add Local Resource**, and choose the resource ID from the dropdown. A fallback URL is recommended for the same reasons as images.

### Fallback behavior

When a local resource is set, the paywall rendering follows this order:

1. **Try the local resource.** The SDK attempts to load the file from the device using the registered resource ID.
2. **Fall back to the remote URL.** If the local file isn't available (not registered, missing from the bundle, or running in the web preview), the regular image or video URL is used instead.

This means you can safely set a local resource without breaking the paywall for users on older SDK versions or other platforms.

### Availability in the editor

The resource ID dropdown is populated from device attribute events sent by your app. If you don't see any resource IDs:

- Make sure at least one test device is running your app with the local resources configured in the SDK (see the [iOS guide](/ios/guides/local-resources) for setup instructions).
- The device must have opened a paywall or otherwise triggered a device attributes event within the **last 7 days**.
- Only **iOS** and **Android** platforms support local resources. The dropdown will not appear for other platforms.

<Warning>
If a resource ID hasn't been reported by any device in the last 7 days, the editor will show a
warning. This usually means no active devices have that resource registered, so double-check your
SDK configuration.
</Warning>

### When to use local resources

Local resources are a great fit for:

- **Onboarding videos or hero images** that are critical to the first paywall experience and shouldn't depend on network conditions.
- **Large media files** where you want to avoid CDN costs or ensure instant loading.
- **Offline scenarios** where users may not have a reliable connection when the paywall is presented.

For smaller or frequently changing images, remote URLs are still the simpler choice since they don't require an app update to change.

### Related

- [iOS SDK: Local Resources Guide](/ios/guides/local-resources): How to register local resources in the iOS SDK.
- [Styling Elements](/paywall-editor-styling-elements): General component styling and image editing.
- [Liquid inside Image URLs](/paywall-editor-liquid#liquid-inside-image-urls): Using dynamic URLs for images.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions content/docs/ios/guides/local-resources.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: "Local Resources"
description: "Bundle images, videos, and other media in your app for use in paywalls, enabling faster load times and offline support."
---

Local resources allow you to register media files bundled in your app (images, videos, audio) so that paywalls can reference them by ID instead of loading them from a remote URL. The SDK serves these files directly from disk, which means instant loading and no network dependency.

<Note>
Local resources require **iOS SDK v4.13.0+**. Make sure you're on a compatible version before
using this feature.
</Note>

## Registering local resources

Set the `localResources` property on `SuperwallOptions` **before** calling `configure()`. Each entry maps a **resource ID** (a string you choose) to a local file URL:

```swift Swift
let options = SuperwallOptions()
options.localResources = [
"hero-image": Bundle.main.url(forResource: "hero", withExtension: "png")!,
"onboarding-video": Bundle.main.url(forResource: "onboarding", withExtension: "mp4")!
]

Superwall.configure(apiKey: "pk_your_api_key", options: options)
```

The resource IDs you choose here are the same IDs you'll select in the [paywall editor](/dashboard/dashboard-creating-paywalls/paywall-editor-local-resources) when configuring an image or video component.

<Warning>
Local resources must be set **before** calling `configure()`. Resources added after configuration
will not be available for paywalls that have already loaded.
</Warning>

## Supported file types

The SDK supports a wide range of media formats:

| Category | Formats |
| -------- | ------- |
| Images | PNG, JPEG, GIF, WebP, SVG, HEIC, HEIF, AVIF, BMP, TIFF |
| Videos | MP4, MOV, WebM, AVI, HEVC/H.265 |

## Choosing resource IDs

Resource IDs are simple strings that act as the key between your app and the paywall editor. A few tips:

- **Use descriptive names** like `"hero-image"` or `"onboarding-video"` rather than `"img1"`.
- **Keep them stable.** If you change a resource ID, you'll need to update any paywalls that reference it in the editor.
- **They're case-sensitive.** `"Hero-Image"` and `"hero-image"` are different IDs.

## Fallback behavior

In the paywall editor, you can set both a local resource and a remote URL on the same image or video component. If the local file can't be loaded (for example, the resource ID isn't registered or the file is missing from the bundle), the paywall automatically falls back to the remote URL. This ensures paywalls still work on older SDK versions or if a resource is accidentally removed from the app bundle.

## Debugging

The SDK includes a built-in debug view for verifying your local resources are set up correctly. It shows each registered resource ID, its file path, and a preview of the content.

<Tip>
If a resource isn't showing up in the paywall editor dropdown, make sure your test device has
opened a paywall (or otherwise triggered a device attributes event) after configuring
`localResources`. The editor only shows resource IDs reported in the last 7 days.
</Tip>

## Example: Onboarding paywall with a bundled video

A common use case is bundling an onboarding video so it loads instantly the first time a user sees your paywall:

```swift Swift
// In your app's initialization
let options = SuperwallOptions()
options.localResources = [
"onboarding-video": Bundle.main.url(forResource: "welcome", withExtension: "mp4")!,
"app-logo": Bundle.main.url(forResource: "logo", withExtension: "png")!
]

Superwall.configure(apiKey: "pk_your_api_key", options: options)
```

Then in the paywall editor, select "onboarding-video" as the local resource for your video component and "app-logo" for the logo image. Set remote URLs as fallbacks for both.

## Related

- [`SuperwallOptions`](/ios/sdk-reference/SuperwallOptions): Full configuration reference.
- [Paywall Editor: Local Resources](/dashboard/dashboard-creating-paywalls/paywall-editor-local-resources): How to use local resources in the paywall editor.
1 change: 1 addition & 0 deletions content/docs/ios/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"guides/experimental-flags",
"guides/testing-purchases",
"guides/test-mode",
"guides/local-resources",
"guides/embedded-paywalls-in-scrollviews",
"guides/superwall-deep-links",
"guides/app-privacy-nutrition-labels",
Expand Down
26 changes: 26 additions & 0 deletions content/docs/ios/sdk-reference/SuperwallOptions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ public final class SuperwallOptions: NSObject {
public var localeIdentifier: String?
public var shouldBypassAppTransactionCheck: Bool
public var testModeBehavior: TestModeBehavior
public var localResources: [String: URL]
}
```

Expand Down Expand Up @@ -79,6 +80,12 @@ public final class SuperwallOptions: NSObject {
"Controls when the SDK enters test mode. Options: `.automatic`, `.whenEnabledForUser`, `.always`, `.never`. See the [Test Mode guide](/ios/guides/test-mode) for details.",
default: ".automatic",
},
localResources: {
type: "[String: URL]",
description:
"A dictionary mapping resource IDs to local file URLs. Paywalls can reference these IDs to load images, videos, and other media directly from the app bundle instead of a remote URL. Must be set before calling `configure()`. See the [Local Resources guide](/ios/guides/local-resources) for details. Available in version 4.13.0+.",
default: "[:]",
},
}}
/>

Expand Down Expand Up @@ -197,6 +204,25 @@ func configureSuperwallForDebug() {
}
```

Local resources configuration:

```swift
let options = SuperwallOptions()

// Register bundled media for use in paywalls
options.localResources = [
"hero-image": Bundle.main.url(forResource: "hero", withExtension: "png")!,
"onboarding-video": Bundle.main.url(forResource: "onboarding", withExtension: "mp4")!
]

Superwall.configure(
apiKey: "pk_your_api_key",
options: options
)
```

See the [Local Resources guide](/ios/guides/local-resources) for a full walkthrough.

## Related

- [`PaywallOptions`](/ios/sdk-reference/PaywallOptions)
Expand Down