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.

View as Markdown

Dashboard view styles

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

In the Airship dashboard, navigate to Settings -> Project Settings -> In-App Experiences -> Embedded Content View Styles.
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:

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

Then, instantiate the embedded view programmatically:

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

<!-- 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:

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

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();