Skip to main content

Overlay Integration

Overview​

This section walks you through integrating overlays into your Maestro Roku SDK implementation. Overlays provide animated, contextual notifications that enhance user engagement during live events.

Integration Steps​

1. Trigger Test Overlays​

During development, you can trigger test overlays:

' Trigger a fantasy overlay test
m.lib.sendTestOverlay = "fantasy"

' Trigger a bet overlay test
m.lib.sendTestOverlay = "bet"

2. Handle Panel Opened Through Overlay​

Monitor when a panel is opened through an overlay interaction:

m.lib.observeField("panelOpenedThroughOverlay", "onPanelOpenedThroughOverlay")

function onPanelOpenedThroughOverlay(event as Object)
    wasOpened = event.getData()
    if wasOpened then
        print "Panel was opened by clicking an overlay"
    end if
end function

Overlay Configuration​

Overlays are configured through the Maestro backend and automatically appear based on event triggers. However, you can control some aspects:

Display QR Codes​

Enable or disable QR code display in overlays:

m.lib.displayQRCodes = true  ' Enable QR codes
m.lib.displayQRCodes = false ' Disable QR codes

Best Practices​

  • Don't Block User Interaction: Overlays should enhance the experience, not interrupt it
  • Test Overlay Timing: Use test overlays during development to ensure proper timing and positioning
  • Handle Overlay Misalignment: Double-check overlay configuration coordinates and ensure they fit within the panel's width and height

Example: Complete Overlay Integration​

sub onLibraryLoadStatusChanged()
    if m.componentLibrary.loadStatus = "ready"
        m.lib = createObject("roSGNode", "MaestroPanelLib:MaestroPanel")

        ' Observe overlay events
        m.lib.observeField("panelOpenedThroughOverlay", "onPanelOpenedThroughOverlay")

        ' Configure the SDK
        m.lib.config = {
            siteID: "your-site-id",
            eventID: "your-event-id",
            useProdEnv: true
        }

        ' Enable QR codes in overlays
        m.lib.displayQRCodes = true

        ' Set panel size
        m.lib.width = 1280
        m.lib.height = 720

        m.top.appendChild(m.lib)
    end if
end sub

function onPanelOpenedThroughOverlay(event as Object)
    wasOpened = event.getData()
    if wasOpened then
        print "User clicked overlay and opened panel"
        ' You might want to track this interaction
    end if
end function

Troubleshooting​

Overlays Not Appearing: Ensure your event is properly configured in the Maestro dashboard with overlay triggers.

Overlay Misaligned: Verify the panel width and height are set correctly before displaying overlays.

Test Overlays Not Working: Make sure sendTestOverlay is set with a valid value ("fantasy" or "bet") after the SDK is fully loaded.

Last updated on