1.b Mobile app embed

Guide to embedding the Loyalty Microsite in your mobile app using a WebView. Covers setup for permissions, UI handlers, session token handling, and platform-specific examples for iOS and Android.

Embed the Loyalty Microsite in an app

Embedding the Loyalty Microsite in a mobile app enables your loyalty program to integrate directly with your app’s user interface, providing a smooth experience without needing a deep-level API integration.

To configure a mobile WebView for the Loyalty Microsite, complete the following key steps:

1. Set up the correct permissions for the app’s platform (iOS or Android).

2. Ensure necessary UI handlers, such as dialogs and file access, are supported.

3. Pass the generated session token within the WebView request.

4. Load the appropriate URL based on the user’s locale.

The root URL to load within the WebView is the custom domain your microsite lives on.

---

iOS configuration

Permissions

Add the following permissions to the Info.plist to ensure correct functionality. Camera and photo permissions are needed if using receipt scanning.

<dict>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>NSCameraUsageDescription</key>
    <string>Camera access required to scan receipts.</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Location verification needed for voucher redemption.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Photo library access required to select receipt photos.</string>
</dict>

UI handlers

The view controller housing the WebView should implement the WKUIDelegate protocol to handle native confirmation dialogs:

func webView(_ webView: WKWebView,
                 runJavaScriptConfirmPanelWithMessage message: String,
                 initiatedByFrame frame: WKFrameInfo,
                 completionHandler: @escaping (Bool) -> Void) {
        let alertController = UIAlertController(title: message,
                                                message: nil,
                                                preferredStyle: .alert)

        alertController.addAction(UIAlertAction(title: "OK",
                                                style: .default,
                                                handler: { (action) in
            completionHandler(true)
        }))

        alertController.addAction(UIAlertAction(title: "Cancel",
                                                style: .cancel,
                                                handler: { (action) in
            completionHandler(false)
        }))

        present(alertController, animated: true, completion: nil)
    }

---

Android configuration

Permissions

Include the following permissions in the Android manifest. Camera and photo permissions are required if you plan to enable receipt scanning.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

UI handlers

The Android WebView configuration requires additional setup. Refer to the example configuration in this repository for detailed setup instructions.