Lower-Third Ad

Overview

The Lower-Third is a standalone ad unit: a translucent "glass" bar that sits flush to the bottom edge of the video player and spans its full width. It shows key art bleeding above the bar, a title and description, an optional sponsor logo, and a call to action. The viewer keeps watching the stream while the unit is on screen — there is nothing to open, the bar is the ad.

It is a different unit from the Lower Third notification mode of a standard ad, which is a card the viewer taps to open a sidebar ad. That mode is unchanged. The standalone unit is created in StreamLayer Studio as its own promotion type and is routed by the SDK automatically.

Requires @streamlayer/react 2.4.0 or later.

Prerequisites

Complete the Integration Guide and the Advertising setup first. The unit renders through StreamLayerSDKAdvertisement, so StreamLayerProvider and containerId must already be in place.

Integration

Step 1 — Mount the notification slot

The Lower-Third renders in the bottom-anchored notification slot — the same region an ad notification uses. A host that mounts only a sidebar slot will not render this unit. Mount the notification instance of StreamLayerSDKAdvertisement inside your player container:

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

export const Player = () => (
  <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id" containerId="SL-Ad-Container">
    <div id="SL-Ad-Container" style={{ position: 'relative' }}>
      <video src="https://example.com/stream.m3u8" autoPlay controls />

      {/* Sidebar / overlay slots as described in the Advertising guide */}
      <StreamLayerSDKAdvertisement sidebar="right" />
      <StreamLayerSDKAdvertisement />

      {/* Bottom-anchored slot: ad notifications AND the Lower-Third unit */}
      <StreamLayerSDKAdvertisement notification />
    </div>
  </StreamLayerProvider>
)

The notification instance must be able to span the full player width at the player's bottom edge. The SDK positions the bar inside it; no extra layout work is required.

Keeping the instance mounted at all times is the simplest setup — it renders nothing until a Lower-Third or an ad notification is active.

Step 2 — Gate the slot on uiState (optional)

If your layout mounts the notification slot only when the SDK asks for it, read these flags from useStreamLayerUI:

A Lower-Third does not raise uiState.promotionSidebar. Hosts that already gate on promotionNotification need no change.

Button Modes

The call to action is configured per promotion in StreamLayer Studio:

A sponsor logo configured in Studio is shown as a brief sponsor splash before the bar appears. The bar's auto-close timer starts only after the splash.

Dismissal

The browser unit has no close control. It leaves the screen in one of these ways:

• Auto-close timer — when one is configured for the promotion in Studio.
• Two minutes of inactivity — when no timer is configured. Any mouse, touch, wheel, or key event in the page resets the window; passive playback does not count.
• Replacement — a newer unit from the event feed retires it.

The skipAutoClose prop on StreamLayerSDKAdvertisement disables both the configured timer and the inactivity rule:

<StreamLayerSDKAdvertisement notification skipAutoClose />

Phone Portrait

There is no bar in phone portrait layouts. A Lower-Third promotion is shown in the existing portrait ad sheet, with the description copied into the sheet body and the Add-On Content button kept. The same timers apply.

Host-Provided VAST Creatives

A Lower-Third can be driven from your own ad stack with the externalAdData prop and uiType: 'lower-third'. The SDK builds the title, description, key art, click-through, and CTA label from the VAST response and reports impression, quartile, click, and close beacons through the same tracker as the sidebar formats.

const externalAdData = useMemo(
  () => ({ vastUrl: 'https://example.com/vast.xml', uiType: 'lower-third' as const }),
  []
)

<StreamLayerSDKAdvertisement notification externalAdData={externalAdData} />

Because an injected ad arrives as an external ad rather than a Lower-Third promotion, uiState.promotionLowerThird is not raised for it. If you gate the notification slot on uiState, also check externalLowerThird from useExternalAdPlacement:

const { externalLowerThird } = useExternalAdPlacement(uiState.promotionExternalAd)
const showNotificationSlot = uiState.promotionNotification || externalLowerThird

See External VAST Ads for the full externalAdData contract and slot-placement rules.

Key Points

• Requires @streamlayer/react 2.4.0+.
• Mount <StreamLayerSDKAdvertisement notification />; the unit never renders in a sidebar-only host.
• uiState.promotionNotification is raised for the unit; uiState.promotionLowerThird identifies it.
• No programmatic (GAM) Lower-Third inventory exists — the externalAd programmatic slot never renders this unit.
• Pass a videoPlayerController if your creatives carry audio, so the host stream is muted while the ad plays.

Related

• Advertising — StreamLayerSDKAdvertisement setup and slot layout
• External VAST Ads — externalAdData and useExternalAdPlacement
• UI Context — uiState flags for layout decisions
• TV Lower-Third Ad — The same unit on StreamLayerSDKTv
• Changelog — Release notes for 2.4.0