Overlay Types

Overview

The Maestro Web SDK supports multiple overlay types, each designed for specific use cases and content types. All overlays use Rive animations to provide smooth, engaging user experiences.

Bet Win Overlay

Description

The Bet Win overlay displays winning bet notifications to users, celebrating successful wagers with customizable messaging and visual feedback.

Type Definition

type OverlayType = 'winningBet';

interface IWinningBet {
  serverID: string;
  notificationText: string;
  amount: number;
  outcome: 'WIN' | 'LOSS' | 'PUSH';
}

Usage

import { OverlayType, IMaestroOverlayEvent } from '@maestro_io/maestro-web-sdk';

const betWinOverlay: IMaestroOverlayEvent = {
  type: OverlayType.WinningBet,
  size: { width: 570, height: 128 },
  position: { top: 50, right: 20 },
  winningBet: {
    serverID: 'bet-12345',
    notificationText: 'Your Lakers ML bet won!',
    amount: 250.75,
    outcome: 'WIN'
  }
};

// Display the overlay
const viewModels = SDK.getMaestroViewModels();
viewModels?.overlayViewModel?.showOverlay(betWinOverlay);

Properties

Property	Type	Description
serverID	string	Unique identifier for the bet from your backend
notificationText	string	Custom message to display to the user
amount	number	Winning amount (used for analytics and display)
outcome	'WIN' \| 'LOSS' \| 'PUSH'	Bet outcome (typically 'WIN' for this overlay type)

Default Behavior

• Title: "You won your bet!"
• Message: Uses the notificationText or defaults to "Click OK to view your winning bets."
• Auto-dismiss: 10.4 seconds
• Click action: Can be configured to navigate to betting panel

Animation Features

• Celebratory entrance animation
• Dynamic text updates during animation
• Interactive hover and click states
• Smooth exit transitions