Platform

Overlays & Graphics

Overlays and graphics are visual elements displayed on top of the broadcast video. They allow hosts to add branding, information, interactive elements, and dynamic content to their live streams.

Overlay Types

Banners

Text-based overlays for announcements, messages, or status updates. Hosts can create banners on the fly during a broadcast.

  • Create custom text banners from the broadcast dashboard.
  • Send a banner to display it on the stream.
  • Clear the active banner to remove it.
  • Edit or delete banners at any time.
  • Drag and drop to reorder saved banners.

HTML Overlays

Custom HTML-based overlays that can display dynamic, data-driven content. These are created and managed through the Overlay Editor (see below).

HTML overlays support:

  • Chat feed overlay — Live chat messages rendered on the video.
  • Pinned chat overlay — A pinned chat message displayed prominently.
  • Poll overlay — Active poll with real-time vote counts.
  • Banner overlay — Styled text banners with custom formatting.
  • Custom content — Any HTML/CSS content designed to your specifications.

Image Overlays

Static image overlays (logos, graphics, infographics) displayed on top of the video. See Media Integration for details on image management.

Overlay Editor

The Overlay Editor is a dedicated admin interface for creating and managing overlay templates.

Creating a Template

  1. Navigate to the Overlay Editor page.
  2. Click Create New Template.
  3. Configure the template:
    • Name — A descriptive name for the template.
    • Type — Banner, Select, or Radio.
    • Orientation — Landscape (16:9) or Portrait (9:16).
    • HTML Content — The HTML code that renders the overlay.
  4. Preview the template in the live preview panel.
  5. Save the template.

Template Requirements

Overlay templates are HTML documents rendered at 1920x1080 (landscape) or 1080x1920 (portrait). To ensure proper rendering:

  • Use percentage-based positioning (e.g., top: 5%, left: 2.6%) so overlays scale correctly.
  • Use viewport width (vw) units for font sizes (e.g., font-size: 2.5vw) for proportional text.
  • Include the overlay update script for real-time data binding.
  • Design for a 16:9 or 9:16 aspect ratio as appropriate.

Managing Templates

| Action | Description | |--------|-------------| | Edit | Modify the HTML, name, type, or orientation of a template. | | Activate / Deactivate | Toggle a template between active and inactive states. Only active templates are available during broadcasts. | | Set as Default | Mark a template as the default for its type. | | Delete | Remove a template permanently. |

Using Overlays During Broadcasts

From the Creator Studio

  1. Open the Graphics tab in the Creator Studio left panel.
  2. Browse available overlays organized by type (Images and Overlays sub-tabs).
  3. Click an overlay to add it to the broadcast.
  4. The overlay appears on the composed video output, visible to all viewers.
  5. Click to remove an overlay when done.

Banners

  1. Open the Banners section in the Creator Studio.
  2. Type your banner text and click Create.
  3. Click Send on a banner to display it on the stream.
  4. Click Clear to remove the active banner.

With External Streaming Tools (RTMP)

When using Advanced Mode with external tools like OBS or Streamlabs:

  1. Open the Graphics tab.
  2. Find the overlay you want to use (Chat, Pinned Chat, Poll, Banner, Vertical).
  3. Click the Copy URL button to copy the overlay URL.
  4. In your streaming tool, add a Browser Source and paste the URL.
  5. The overlay renders in real time within your external tool, updating automatically.

This allows hosts to use HotMic overlays even when streaming through third-party software.

Real-Time Updates

Overlay content updates in real time during broadcasts:

  • Banner changes — Instantly reflected when a host sends, edits, or clears a banner.
  • Chat overlay — New messages appear as they are posted.
  • Poll overlay — Vote counts update as viewers respond.
  • Pinned chat — Updates when a message is pinned or unpinned.

Control events for overlays are delivered via HotMic real-time messaging platform, ensuring near-instant updates across all viewers and the Composer Service.

Multi-Host Considerations

When multiple co-hosts are on a broadcast, overlay control follows the same media lock system described in Media Integration. Only one host can modify overlays at a time to prevent conflicts.

Technical Notes

  • All overlay composition is handled server-side by the Composer Service (AWS EC2 instances running headless Chrome + FFmpeg).
  • Overlay templates are scoped to your organization — each tenant has its own template library.
  • HTML overlays auto-refresh data every 2-5 seconds for live content (chat, polls, banners).
  • Overlays render at full 1920x1080 resolution and are scaled via CSS transforms to fit different container sizes.
  • Portrait overlays (9:16) are available for mobile-first broadcast orientations.
PreviousAI ProducerNextBackground Removal