# Custom Views for the Cordova Plugin

Register custom native views to use within Scenes.

A *Custom View* is a native view from your mobile or web application embedded into a Scene. Custom Views can display any native content your app exposes, so you can reuse that existing content within any screen in a Scene.

Custom Views allow you to embed native iOS and Android views within Scenes, giving you full control over design and layout while leveraging Airship's targeting and orchestration capabilities.

## Requirements

To use Custom Views in Cordova, you must extend the native Airship modules by implementing native code on each platform.

## Registering Custom Views

Custom Views must be registered on each native platform separately:

### iOS

See the [Apple Custom Views documentation](https://www.airship.com/docs/developer/sdk-integration/apple/in-app-experiences/custom-views/) for detailed implementation instructions.

Custom Views should be registered after takeOff in your native iOS code. You can add this to your `AppDelegate.swift` or a custom plugin:

```swift
import AirshipKit

// In your AppDelegate or after Airship.takeOff
AirshipCustomViewManager.shared.register(name: "my-custom-view") { args in
    // Return your SwiftUI view
    MyCustomView(args: args)
}
```


### Android

See the [Android Custom Views documentation](https://www.airship.com/docs/developer/sdk-integration/android/in-app-experiences/custom-views/) for detailed implementation instructions.

Custom Views should be registered during the `onAirshipReady` callback in your native Android code. You can use Airship's `Autopilot` to register views at startup:

```kotlin
import com.urbanairship.AirshipCustomViewManager
import com.urbanairship.Autopilot
import com.urbanairship.UAirship

class CustomAutopilot : Autopilot() {
    override fun onAirshipReady(airship: UAirship) {
        // Register custom views
        AirshipCustomViewManager.register("my-custom-view") { context, args ->
            // Return your Android View
            MyCustomView(context, args)
        }
    }
}
```


Don't forget to register your `Autopilot` in `AndroidManifest.xml`:

```xml
<meta-data
    android:name="com.urbanairship.autopilot"
    android:value="your.package.name.CustomAutopilot" />
```


## Using Custom Views

Once registered, Custom Views can be added to Scenes in the Airship dashboard:

1. Create or edit a Scene
2. Add the **Custom View** content element to a screen
3. Enter the view name (e.g., `my-custom-view`) that matches the name you registered in your native code
4. Optionally add key-value pairs to pass custom properties to the view

The native view will be displayed within the Scene with the properties you configured.