Flutter Embedded Content

About Embedded Content

Present the content of a SceneA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes 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 and in the order in which the Scenes were triggered.

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., SurveysA question-and-answer experience used to collect and aggregate feedback or generate a net promoter score. Surveys are 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 AirshipEmbeddedView

The AirshipEmbeddedView is a Flutter widget that defines a place for Airship Embedded Content to be displayed. When defining an AirshipEmbeddedView, 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.

// Show any "home_banner" Embedded Content
AirshipEmbeddedView(
  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 render once the content is available. When no content is available, it will render as an empty view. You can query for when content is available to either show a placeholder or to remove the embedded view.

// Check if any "home_banner" Embedded Content is available
bool isAvailable = Airship.inApp.isEmbeddedAvailable(embeddedId: "home_banner");
// handle isAvailable

Airship.inApp.isEmbeddedAvailableStream(embeddedId: "home_banner")
  .listen((isAvailable) {
    // handle isAvailable
  });

Example Integration

Here is an example integration that renders an Embedded Content when available, and displays an image placeholder when unavailable:

import 'package:flutter/material.dart';
import 'package:airship_flutter/airship_flutter.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _isHomeBannerAvailable = false;

  @override
  void initState() {
    super.initState();
    _setupEmbeddedContentListener();
  }

  void _setupEmbeddedContentListener() {
    Airship.inApp.isEmbeddedAvailableStream(embeddedId: "home_banner")
      .listen((isAvailable) {
        setState(() {
          _isHomeBannerAvailable = isAvailable;
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _isHomeBannerAvailable
          ? AirshipEmbeddedView(
              embeddedId: "home_banner"
            )
          : Image.asset(
              'assets/images/airship-mark.png',
              fit: BoxFit.contain,
              width: double.infinity,
              height: 200,
            ),
    );
  }
}