Advertising (React Native)

Test Advertising:* This integration is available to quickly integrate StreamLayer’s advertising capabilities. This feature allows a moderator to manually or automatically insert contextual ads relevant to game action or based upon a pre-determined cadence (i.e., every 5 minutes). Ads can be received via notification and overlay or in a squeeze-back L-bar format. Depending on the ad format, viewers can take certain actions from the ads like saving a promotion to wallet, scanning a QR code, or linking out to another application or web page. The typical StreamLayer launch menu and other feature sub-menu options will be hidden. This test would require a moderator to utilize StreamLayer Studio to create and activate ads and is a good way for your team to explore how this feature’s interactivity could be deployed over various types of programming. For this test implementation, the StreamLayer team will provide you access to StreamLayer Studio to create and moderate relevant advertising content.

If the Test Advertising Feature is of interest, the StreamLayer development team is on-hand and available to ensure the integration is done smoothly and properly. The steps to get started that are covered in this guide are:

• Prerequisites and SDK API key setup
• Install the StreamLayer test SDK. This can be done via the Carthage Package Manager or manually.
• Initialize the SDK.
• Create the StreamLayer View Container.
• Set up an “Event” in StreamLayer Studio.
• Position the overlay within your video experience.

Obtain an SDK API Key

Provide [email protected] with your email. We will use this to create a new organization for you on our backend platform, StreamLayer Studio. You will then receive an invitation email with a link for authentication. After receiving access to the admin panel, the StreamLayer team will generate an API key for your organization. This API authenticates your application with our servers and is required for all interactions.

Once you have authenticated and accessed your organization within StreamLayer Studio, you can view, create content for, and moderate events using our platform. See an overview of StreamLayer Studio here.

Partial Integration Steps

1. Install the StreamLayer SDK

To enable partial integration (e.g., ads-only mode), you must first complete the full core integration. Please follow the setup instructions provided here:

React Native & Expo Old Architecture Integration Guide

For New Architecture React Native

Only after completing the base integration should you proceed with customizing features like gamification, ads-only mode, or tooltips.

Add StreamLayer View Configuration Extension

The following additional keys should be added inside the getViewConfig() function's return object in your React Native or web integration

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

    // 🔽 Additional optional view configuration:
    integrationMode: "ADS_ONLY",           // 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
  }
}

Use a sideBar

In order to enable sideBar when the bottom content of LBar is not provided apply config:

    lbarMode: "FULL"/"FULLFLEXIBLE"   

• LBar mode "FULL::
  Use this mode when you want the L-bar to always occupy the lower space, regardless of whether there is a banner present. This ensures that the reserved space for the L-bar remains constant, even if no banner is displayed.
• 

• LBar mode "FULLFLEXIBLE:
  Use this mode when you want the L-bar to only occupy space when a banner exists. If no banner is present, the lower space will not be shown, allowing the content to fully utilize the space.