Overlays

Introduction

The Maestro Web SDK supports interactive overlays that display contextual information and notifications to users during live events. Overlays use Rive technology to provide rich, animated experiences with dynamic content such as winning bet notifications and fantasy player updates.

Overview

Overlays are lightweight, animated UI components that appear on top of your application to provide timely information without disrupting the main viewing experience. They support:

• Animated content using Rive animations
• Auto-dismiss functionality with customizable timing
• Click-to-action behaviors for user interaction
• Positioning control with flexible placement options
• Queueing system for multiple overlays

Overlay Types

The SDK currently supports the following overlay types:

Bet Win Overlay

Displays winning bet notifications with customizable messaging and amounts.

SDK Interface

interface OverlayViewModel {
  /**
   * Observable for overlay visibility state
   */
  get isVisible(): Observable<boolean>;
  
  /**
   * Observable for currently displayed overlay
   */
  get currentOverlay(): Observable<IMaestroOverlayEvent | null>;
  
  /**
   * Observable for queued overlays
   */
  get overlayQueue(): Observable<IMaestroOverlayEvent[]>;
  
  /**
   * Get the title text for the current overlay
   */
  get overlayTitle(): string;
  
  /**
   * Get the metadata text for the current overlay
   */
  get overlayMetadata(): string;
  
  /**
   * Displays an overlay with the specified configuration
   */
  showOverlay(overlayEvent: IMaestroOverlayEvent): void;
  
  /**
   * Hides the currently visible overlay
   */
  hideOverlay(): void;
  
  /**
   * Handles overlay click interactions
   */
  handleOverlayClick(): void;
  
  /**
   * Track that overlay was viewed (called automatically)
   */
  trackOverlayViewed(): void;
  
  /**
   * Track that overlay was clicked (called automatically)
   */
  trackOverlayClicked(): void;
  
  /**
   * Handle overlay viewed event (internal use)
   */
  handleOverlayViewed(overlayType: string): void;
  
  /**
   * Handle overlay action event (internal use)
   */
  handleOverlayAction(overlayType: string): void;
  
  /**
   * Clean up overlay resources
   */
  cleanup(): void;
}

Table of Contents

• Integration Guide - Complete setup and implementation
• Overlay Types - Detailed overlay type documentation
• Rive Configuration - Working with Rive animations
• Positioning and Styling - Layout and appearance options

Getting Started

To start using overlays in your application:

1. Access the Overlay View Model through the SDK's view models
2. Configure overlay events with size, position, and content
3. Handle overlay interactions in your event delegate
4. Customize positioning and appearance as needed

For detailed implementation steps, see the Integration Guide.