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 sized for the 10-foot UI. 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 selects 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/web-os 1.3.0 or later.

Prerequisites

Complete the Integration Guide before adding Lower-Third ads. The unit renders inside StreamLayerSDKTv, so the provider and the TV element must already wrap your player.

Integration

On TV platforms the SDK owns the layout. A Lower-Third promotion activated in StreamLayer Studio renders without any host changes:

import { StreamLayerProvider, StreamLayerSDKTv } from '@streamlayer/web-os'
import '@streamlayer/web-os/style.css'

export const Main = () => (
  <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id">
    <StreamLayerSDKTv>
      <video />
    </StreamLayerSDKTv>
  </StreamLayerProvider>
)

The SDK places the bar in its bottom-anchored region, removes the usual notification inset so the bar is flush with the player's bottom edge, and shows it immediately instead of applying the TV notification delay.

If you use Split Components, mount the notification component — the Lower-Third renders through the same bottom-anchored region as ad notifications.

Remote-Control Behavior

A TV remote has no pointer, so the call to action differs from the browser:

Send to User and Add-On Content also render a Dismiss control beside the CTA. The CTA owns initial focus, Left/Right moves between the CTA and Dismiss, and after a successful send the focus moves to Dismiss. Basic (QR) and No Button have no Dismiss control.

A sponsor logo configured in Studio is shown as a brief sponsor splash before the bar appears. Dismiss becomes available only after the bar itself is on screen.

Dismissal

The unit 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 remote key press resets the window; passive playback does not count.
• Dismiss — on Send to User and Add-On Content units.
• Replacement — a newer unit from the event feed retires it.

Host-Provided VAST Creatives

A Lower-Third can be driven from your own ad stack with the externalAdData prop on StreamLayerSDKTv and uiType: 'lower-third'. The SDK builds the title, description, key art, click-through (as a QR code), and CTA label from the VAST response and reports impression, quartile, click, and close beacons.

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

<StreamLayerSDKTv externalAdData={externalAdData}>
  <video />
</StreamLayerSDKTv>

See External VAST Ads for the externalAdData contract and the streamlayer VAST extension that supplies branding.

Legacy Engines

The bar uses a blurred glass background on engines that support backdrop-filter. Older TV browsers (Chromium 53 and earlier) get an opaque dark fill instead, so the copy stays readable. No configuration is needed.

Key Points

• Requires @streamlayer/web-os 1.3.0+.
• No layout work: StreamLayerSDKTv positions the bar and skips the notification delay.
• Basic CTAs render as a QR code; Send to User and Add-On Content are D-pad targets with a Dismiss control.
• Pass a videoPlayerController if your creatives carry audio, so the host stream is muted while the ad plays.

Related

• TV SDK Integration Guide — Complete setup and configuration
• Split Components — Mounting individual SDK UI elements
• External VAST Ads — externalAdData and the VAST streamlayer extension
• Web SDK Lower-Third Ad — The same unit in the browser Web SDK
• Changelog — Release notes for 1.3.0