Embedded Content

Present the content of a SceneA mobile app or web experience of one or more screens displayed with fully native UI components in real time, providing immediate, contextual responses to user behaviors. Scenes can be presented in full-screen, modal, or embedded format using the default swipe/click mode or as a Story. They can also contain survey questions. on any app screen. There are three primary components:

Once the Scene is triggered for display and matches the specified audience conditions, its content is available to users when visiting a screen that contains the AirshipEmbeddedView.

The view is populated with the content from all active Scenes with the matching ID, sorted based on priority. When an embedded view loads content, the highest priority Scene that is queued for display will be shown. The same content will be shown across app and web sessions until it is dismissed by the user or is no longer available. The view will then show the next Scene with the highest priority from the display queue.

Airship first prepares the content when the triggering event occurs and then refreshes it upon every app open or web session start. This ensures that users always experience the most up-to-date message. So, after updating active Embedded Content, users will see the latest version the next time they open the app or load the app or web page containing the view.

Embedded Content behavior is the same as In-App AutomationsMessages cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times. and modal and fullscreen Scenes:

• The content displays only within the app.
• When the app is terminated, the content is not automatically dismissed. It continues to display in the next app session.

Adding an embedded view

The EmbeddedView widget defines a place for Airship Embedded Content to be displayed. When defining an EmbeddedView, specify the embeddedId for the content it should display. The value of the embeddedId must be the ID of an Embedded Content view style in your project.

import 'package:airship_flutter/airship_flutter.dart';

// Show any "home_banner" Embedded Content
EmbeddedView(
  embeddedId: "home_banner"
)

Placeholders

If content is unavailable to display, the EmbeddedView will render nothing by default. You can customize this by providing a placeholder widget.

EmbeddedView(
  embeddedId: "home_banner",
  placeholder: Text("No content available"),
)

Sizing

The EmbeddedView will automatically size itself based on the content it displays. You can control the sizing behavior using a SizedBox or Container:

SizedBox(
  width: double.infinity,
  height: 200,
  child: EmbeddedView(
    embeddedId: "home_banner"
  ),
)

Observing available embedded content

Embedded Content is not always available, and even after being triggered, it still needs to be prepared before it can be displayed. An AirshipEmbeddedView will automatically update when content is available and transition from the placeholder to the content once content is available. If you need to query the availability of Embedded Content, you can use an AirshipEmbeddedObserver to watch for updates.

Use the embedded content stream to observe when embedded content is available:

import 'package:airship_flutter/airship_flutter.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<EmbeddedInfo> _embeddedInfos = [];
  StreamSubscription? _subscription;

  @override
  void initState() {
    super.initState();
    
    // Listen for embedded content updates
    _subscription = Airship.inApp.getEmbeddedInfoStream("home_banner").listen((infos) {
      setState(() {
        _embeddedInfos = infos;
      });
    });
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_embeddedInfos.isEmpty) {
      return Text("No banner available");
    }

    return Column(
      children: [
        Text("Banner available"),
        EmbeddedView(embeddedId: "home_banner"),
      ],
    );
  }
}

The getEmbeddedInfoStream method returns a stream of EmbeddedInfo objects in FIFO order, including any extras you set through the Scene composer when creating the content.