# Embedded Content

Integrate Embedded Content into your Capacitor app to display Scene content directly within your app's screens. For information about Embedded Content, including overview, use cases, and how to create Embedded Content view styles and Scenes, see [Embedded Content]({{< ref "/guides/features/messaging/scenes/embedded-content.md" >}}).


## Dashboard view styles

Before you can display Embedded Content in your app, you must create an Embedded Content View Style in your Airship project:

1. In the Airship dashboard, navigate to **Settings** -> **Project Settings** -> **In-App Experiences** -> **Embedded Content View Styles**.
2. Create a new view style, and assign it a unique ID (e.g., `home_banner`). This ID must match the `embeddedId` specified in your Capacitor code.

> **Note:** When configuring your view styles, the dashboard allows you to define optional **Parent Width** and **Parent Height** constraints. These constraints do not govern Capacitor layouts—sizing in Capacitor is entirely HTML-driven based on your placeholder element's dimensions.


## Adding an embedded view

To render Airship Embedded Content inside your Capacitor app, use `Airship.inApp.createEmbeddedView`. This function creates a native view container overlaid on top of a specified HTML placeholder element.

Specify the `embeddedId` for the content it should display. The value of the `embeddedId` must match the ID of an Embedded Content view style in your project.

**Basic integration**


First, define a placeholder element in your HTML:

```html
<div id="embedded-placeholder" style="height: 200px;"></div>
```


Then, instantiate the embedded view programmatically:

```typescript
import { Airship } from '@ua/capacitor-airship';

// Create the embedded view
const embeddedView = await Airship.inApp.createEmbeddedView({
  embeddedId: 'home_banner',
  element: document.getElementById('embedded-placeholder'),
});

// To clean up and destroy the view when leaving the page or when no longer needed:
await embeddedView.destroy();
```


## Sizing

The sizing and dimensions of the native embedded view are **entirely HTML-driven**. The native view uses a `ResizeObserver` to track the bounds of your HTML placeholder element (`this.element`) and matches its dimensions and layout dynamically.

To configure or change the size of the embedded view, simply apply standard CSS properties (such as `width`, `height`, `min-height`, or media queries) directly to the placeholder HTML element. The native view will automatically resize itself to match.

**HTML-driven styling**

```html
<!-- Define a responsive placeholder height in your CSS or inline styling -->
<div id="embedded-placeholder" style="width: 100%; height: 250px;"></div>
```


## Checking if embedded content is ready

Use `Airship.inApp.isEmbeddedReady` to check if embedded content is currently available for a given ID:

```typescript
import { Airship } from '@ua/capacitor-airship';

const isReady = Airship.inApp.isEmbeddedReady('home_banner');
```


## Listening for embedded content updates

Use `Airship.inApp.addEmbeddedReadyListener` to listen for changes in the availability of embedded content for a given ID. The listener receives a boolean indicating whether content is ready to display. The listener is called immediately with the current state when first added, and then again whenever the state changes.

**Embedded ready listener**

```typescript
import { Airship } from '@ua/capacitor-airship';

const subscription = Airship.inApp.addEmbeddedReadyListener('home_banner', (isReady) => {
  console.log('home_banner is ready:', isReady);
});

// Remove the listener when no longer needed
subscription.remove();
```