Test Integration: Ads + Inplay Game (React Native)

Test Advertising and Games

This integration combines StreamLayer's advertising and gamification capabilities. A moderator can manually or automatically insert contextual ads and game prompts — polls, trivia, predictions, insights, and Highlights social content — relevant to game action or on a pre-determined cadence (for example, every five minutes).

Ads, game questions, and insights can be delivered with or without a notification and in a StreamLayer Element or squeeze-back L-bar format. From ads, depending on the format, viewers can take actions such as saving a promotion to their digital wallet, scanning a QR code, or linking out to another application or web page.

During testing the standard StreamLayer Launch Button and other feature sub-menus are hidden. However, you have the option to add a custom button that opens the Games home tab so viewers can access missed questions or view the leaderboard.

A moderator uses StreamLayer Studio to create and activate ads or game questions. The StreamLayer team will provide your team with Studio access so you can create, post, and moderate content.

Prerequisites

Obtain an SDK API Key

Provide your email address to the StreamLayer team. We will create an organization for you on our platform including a personal dashboard. You will receive an invitation email with a link to StreamLayer Studio and your authentication credentials. After gaining access, you can generate an API key in the development section of StreamLayer Studio. This key authenticates your application with StreamLayer servers and is required for all interactions.

Once authenticated, you can view, create content for, and moderate events using StreamLayer Studio. See About StreamLayer Studio for an overview.

Integration Steps

1. Complete the Core Integration

To enable a partial integration such as ads + gamification mode, you must first complete the full core integration. Follow the setup instructions for your architecture:

Only after completing the base integration should you proceed with the customization below.

2. Configure the StreamLayer View for Ads + Games

Add the following keys inside the getViewConfig() function's return object in your integration:

function getViewConfig(): StreamLayerViewConfiguration {
  return {
    viewNotificationFeatures: new Array(
      StreamLayerViewNotificationFeature.Games,
      StreamLayerViewNotificationFeature.Chat,
      StreamLayerViewNotificationFeature.Twitter
    ),
    isGamesPointsEnabled: true,
    isGamesPointsStartSide: false,
    isLaunchButtonEnabled: true,
    isMenuAlwaysOpened: false,
    isMenuLabelsVisible: true,
    isMenuProfileEnabled: true,
    isTooltipsEnabled: false,             // disables tooltip overlays (set to true to enable)
    isWhoIsWatchingViewEnabled: false,    // disables the "who is watching" panel
    isOverlayExpandable: true,
    overlayHeightSpace: 300,
    overlayWidth: 0,
    overlayLandscapeMode: StreamLayerViewOverlayLandscapeMode.Start,

    // 🔽 Additional optional view configuration:
    integrationMode: "ADS_INPLAY",         // indicate your part integration mode
    phoneContactsSyncEnabled: false,       // disables uploading/syncing user's contact list
    shouldIncludeTopGestureZone: false,    // disables top swipe zone to open overlay
    notificationsMode: "SILENT",           // disables sounds/vibrations on notifications
    isLBarEnabled: true,                   // enables L-bar by default for all ads
    lbarMode: "FULL"/"FULLFLEXIBLE"               // "FULL" = persistent full bar; "FULLFLEXIBLE" = adapts based on content
  }
}

3. Configure L-Bar Mode

If L-bar squeeze-back formats are desired, set the lbarMode property in your view configuration:

    lbarMode: "FULL"/"FULLFLEXIBLE"

FULL mode — The L-bar always occupies the lower space regardless of whether a banner is present. This keeps the reserved space constant even when no banner is displayed.

FULLFLEXIBLE mode — The L-bar only occupies space when a banner is present. If no banner is displayed, the content fully utilizes the available space.

4. If overlays are desired, position the overlay and handle system orientation.

Position the Overlay ViewController.

We have excerpted the implementation of orientation handling from the Sample Integrations found in the repository along with the SDK. In this example, we use SnapKit and RxSwift for simplicity. Neither of these is required, but it allows us to demonstrate the functionality of our framework quickly. You can position the overlay in whatever way best suits your current markup style. Please note that this example may not work with your integration if you perform a simple cut and paste. This example code works with the Sample Integrations it was pulled from. See the full demo application for additional details.

The complete demo source code is available here: https://github.com/StreamLayer/sdk-ios/tree/sample-games

Extend the file you've created in Step 5 with the following:

Visually this would result in the following representation:

A stands for your video player area
B stands for overlayVC.view
C stands for overlayView
Reference View is overlayReferenceView

5. Spoiler Prevention / Data-Syncing

If your video is timestamped, data syncing for ads and game content is available. To enable Spoiler Prevention, please reference the Spoiler Prevention Guide.

Integration Guide — Complete SDK setup instructions
Test Integration: Advertising — Advertising-only test setup
Test Integration: Ads + Inplay Game (Android) — Android test setup
Test Integration: Ads + Inplay Game (iOS) — iOS test setup