# 1.b Mobile app embed

## 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](https://kbase.whitelabel-loyalty.com/product/interfaces/white-label-interfaces/loyalty-microsite/loyalty-microsite-setup/3.-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.

```xml
<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:

```swift
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.

```markup
<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](https://github.com/white-label-loyalty/microsite-web-example) for detailed setup instructions.