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. 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.

StreamLayer SDK Advertisement Guide

Start by reading:

The StreamLayerSDKAdvertisement component renders advertisements in your app.

It displays ad cards in various formats based on type and can show advertisement notifications.

Usage

General

The SDK controls which ad type is rendered.

You should place sidebar, overlay, and banner components, define their direction.

Background `StreamLayerProvider.containerId`

Set containerId to the HTML id of the single wrapper element that contains your video player and all StreamLayer SDK UI (ads, overlays, etc.).

When an advertisement is active, the SDK uses this container to apply the advertisement background image. It should be the same container you treat as the “player root” (the one that can be fullscreened/resized), not an inner ad-only element.

Example:

import { StreamLayerProvider } from '@streamlayer/react'
import { StreamLayerSDKAdvertisement } from '@streamlayer/react/advertisement'

<StreamLayerProvider {...providerProps} containerId="SL-Ad-Container">
  <div class="advertisement" id="SL-Ad-Container">
    {/* Your video player element should be inside this container */}
    <video />
    <div class="sidebar">
      <StreamLayerSDKAdvertisement sidebar="left" layoutMode="side-by-side" />
    </div>
    <div class="banner">
      <StreamLayerSDKAdvertisement banner="bottom" layoutMode="side-by-side" />
    </div>
    <div class="overlay">
      <StreamLayerSDKAdvertisement />
    </div>
  </div>
</StreamLayerProvider>

sidebar and banner: L-Bar format
overlay: Overlay format

Show Overlay in Sidebar and Vice Versa

If you want to render all ads in the sidebar or overlay, you can avoid multiple components by using the skipTypeCheck prop.

Example:

<StreamLayerSDKAdvertisement sidebar="left" skipTypeCheck />
<StreamLayerSDKAdvertisement skipTypeCheck />

Notification

To show a notification before the full ad appears:

Enable notifications in StreamLayerProvider:
```
<StreamLayerProvider withAdNotification />
```
Render ad notification in StreamLayerSDKAdvertisement:
```
<StreamLayerSDKAdvertisement notification />
```

Other Options

Show Advertisement Every Time

The SDK marks an ad as viewed and skips it by default.

Use the persistent prop to show the ad every time:

<StreamLayerSDKAdvertisement persistent />

Layout for Device Type

By default, the SDK renders a desktop layout.

To render a mobile variant, use the isMobileScreen prop:

<StreamLayerSDKAdvertisement isMobileScreen />

Auto-Close Mode

Moderators can enable auto-close timers for ads.

Behavior when enabled:

Card closes after the configured time.
Close button is disabled during timer.

You can disable this behavior with the skipAutoClose prop:

<StreamLayerSDKAdvertisement skipAutoClose />

Handling Activated Advertisements

StreamLayerProvider provides the onContentActivate callback.

This callback triggers when an advertisement is activated.

Params:

type Params = {
  stage: 'activate' | 'deactivate'
  id: string
  isViewed?: boolean
  hasNotification?: boolean
  hasBanner?: boolean
  type: 'advertisement'
}

Mute Video Ads

You can control the audio for video advertisements using the mute prop. Set it to true to ensure the ad plays without sound.

<StreamLayerSDKAdvertisement muted />

You can use this callback to track ad activations and perform actions without rendering the StreamLayerSDKAdvertisement component.

Example use case:

Track when an ad card is activated.
Render StreamLayerSDKAdvertisement only when needed.