Skip to main content

Stream Overlay Action

Display visual alerts on your stream through TipLink's built-in overlay system. Show custom messages with images, videos, GIFs, and fully customizable styling.

What You Need​

  • At least one Overlay Canvas created in TipLink (Settings → Overlays)
  • The overlay browser source added to OBS/Streamlabs (or other streaming software)
  • Media files (images/videos/GIFs) saved locally if you want to use them

Quick Start​

  1. Create or edit an alert
  2. Add the Stream Overlay action
  3. Select your overlay canvas(es)
  4. Enable Media Alert Box Widget
  5. Set message and optionally add media
  6. Choose animations and styling
  7. Save and test
Screenshot Coming Soon

Configuration interface screenshot will be added here.

Configuration Options​

Canvas Selection​

Select Overlay Canvases

  • Choose which overlay canvas(es) to display on
  • Can select multiple canvases for multi-scene setups
  • Must create canvases in Settings → Overlays first
Browser Source URL

Each canvas has a unique URL. Copy it from Settings → Overlays and add it as a browser source in OBS with these settings:

  • Width: 1920
  • Height: 1080
  • FPS: 60 (or match your stream FPS)
  • ✅ Shutdown source when not visible
  • ✅ Refresh browser when scene becomes active

Media Alert Box Widget​

Enable Media Alert Box Widget

  • Toggles the standard alert box on/off
  • Shows message with optional media
  • Supports animations and styling

Duration (seconds)

  • How long the alert stays visible
  • Minimum: 1 second
  • Default: 4 seconds
  • Media playback time adds to this duration

Animations​

Start Animation

  • How the alert appears on screen
  • Options:
    • Snap In: No animation, instant appearance
    • Fade In: Gradually becomes visible
    • Slide from Top/Bottom/Left/Right: Slides in from edge

End Animation

  • How the alert disappears from screen
  • Options:
    • Snap Out: No animation, instant removal
    • Fade Out: Gradually becomes invisible
    • Slide to Top/Bottom/Left/Right: Slides out to edge
Screenshot Coming Soon

Animation preview screenshot will be added here.

Layout​

Layout Style

  • Controls arrangement of text and media
  • Options:
    • Text Above Media: Message on top, media below (default)
    • Row: Text and media side-by-side, text first
    • Row Reverse: Text and media side-by-side, media first
    • Column: Vertical stack, text then media
    • Column Reverse: Vertical stack, media then text

Font Position (Text Above Media layout only)

  • Where the message appears in the alert box
  • Options: Top, Middle, Bottom
  • Only visible when layout is "Text Above Media"

Message & Content​

Message

  • The text to display in the alert
  • Supports dynamic placeholders (e.g., {username}, {amount})
  • Can be empty if you only want to show media
  • Default: "This is a standard alert box message."
Dynamic Placeholders

Use placeholders to make alerts dynamic:

  • {username} - Viewer's name
  • {amount} - Tip/sub amount
  • {message} - Viewer's message
  • {event_type} - Type of event

Media / Image

  • Local file path to image, video, or GIF
  • Supports: PNG, JPG, GIF, MP4, WEBM
  • Must be a file on your computer
  • Leave empty for text-only alerts

Media Transparency (0-100%)

  • Controls opacity of the media
  • 100% = fully opaque (default)
  • 0% = invisible
  • Useful for subtle watermarks or background media

Text Styling​

Font

  • Select from Google Fonts library
  • Default: Roboto
  • Searchable dropdown with hundreds of options
  • Font is loaded from Google Fonts CDN

Font Weight

  • Controls boldness of text
  • Options: Lighter, Normal, Bold, Bolder, 100-900
  • Not all fonts support all weights
  • Default: Normal

Font Size

  • Size in pixels
  • Minimum: 1px
  • Default: 24px
  • Scales with your overlay resolution

Font Alignment

  • Text justification within the alert box
  • Options: Left, Center, Right
  • Default: Center

Setup Guide​

Basic Text Alert​

  1. Create Overlay Canvas

    • Settings → Overlays → Add Canvas
    • Name it (e.g., "Main Alerts")
    • Copy the browser source URL

  2. Add to OBS

    • Add Browser Source to scene
    • Paste the canvas URL
    • Set width: 1920, height: 1080
    • Set FPS to match stream

  3. Configure Alert

    • Create/edit alert
    • Add Stream Overlay action
    • Select your canvas
    • Enable Media Alert Box

  4. Customize Message

    • Set message: Thank you {username} for ${amount}!
    • Choose font and size
    • Set duration (4-6 seconds)

  5. Add Animations

    • Start: Slide from Bottom
    • End: Fade Out
    • Test and adjust

Media Alert with Image​

  1. Prepare Media

    • Save image/GIF to your PC
    • Note the full file path
    • Recommended size: 500x500px or smaller

  2. Configure Alert Box

    • Enable Media Alert Box
    • Set message text
    • Click file picker for Media/Image
    • Select your media file

  3. Choose Layout

    • Try "Row" for side-by-side
    • Or "Text Above Media" for stacked
    • Adjust font position if stacked

  4. Adjust Duration

    • Base duration: 4 seconds
    • Add extra time for GIFs (e.g., 6-8 seconds)
    • Videos play fully regardless of duration

Multi-Canvas Setup​

For different alert types on different scenes:

  1. Create Multiple Canvases

    • Canvas 1: "Gaming Alerts"
    • Canvas 2: "Chatting Alerts"
    • Canvas 3: "BRB Alerts"

  2. Add to OBS Scenes

    • Add Canvas 1 to gaming scene
    • Add Canvas 2 to chatting scene
    • Add Canvas 3 to BRB scene

  3. Configure Alerts

    • Tip alert: Select all 3 canvases
    • Follow alert: Select Canvas 1 & 2 only
    • Sub alert: Select Canvas 1 only

  4. Unique Styling Per Alert

    • Different fonts/colors per alert type
    • Different animations for variety
    • Different durations based on importance

Common Use Cases​

Simple Tip Alert

  • Message: {username} tipped ${amount}! Thanks!
  • Font: Montserrat, 32px, Bold
  • Duration: 5 seconds
  • Animation: Slide from bottom → Fade out

Subscriber Alert with Media

  • Message: Welcome {username}!
  • Media: Custom subscriber badge image
  • Layout: Row
  • Duration: 6 seconds
  • Animation: Fade in → Slide to top

Large Donation Alert

  • Message: 🎉 {username} donated ${amount}! 🎉
  • Font: Impact, 48px, Bolder
  • Duration: 8 seconds
  • Animation: Slide from top → Slide to top
  • Font alignment: Center

GIF Celebration

  • Message: {username} is awesome!
  • Media: Celebration GIF
  • Layout: Text Above Media
  • Font Position: Top
  • Duration: 7 seconds (let GIF play)

Minimal Text-Only

  • Message: Thanks {username}!
  • No media
  • Font: Roboto, 28px, Normal
  • Duration: 3 seconds
  • Animation: Fade in → Fade out

Troubleshooting​

Overlay not showing in OBS

  • Verify browser source URL is correct
  • Check browser source dimensions (1920x1080)
  • Ensure browser source is not hidden/locked
  • Right-click source → Refresh (or toggle scene)

Alert appears but no text visible

  • Check message field has content
  • Verify font color isn't same as background
  • Increase font size
  • Check font loaded correctly (open browser source properties, click Interact)

Media not displaying

  • Verify file path is correct and complete
  • Ensure file exists at that location
  • Check file format is supported (PNG, JPG, GIF, MP4, WEBM)
  • Try a different media file to isolate issue

Alert shows on wrong canvas

  • Check selected canvases in action settings
  • Verify correct canvas URL in OBS browser source
  • May need to refresh browser source

Animation looks choppy

  • Increase browser source FPS to 60
  • Check PC performance/GPU usage
  • Reduce overlay complexity
  • Disable hardware acceleration in OBS browser source settings

Text is cut off

  • Reduce font size
  • Shorten message
  • Change font alignment
  • Adjust layout style

Alert duration too short/long

  • Adjust duration setting
  • For videos: duration auto-extends to video length
  • For GIFs: increase duration to see full loop

Best Practices​

Performance:

  • Keep media files under 5MB for fast loading
  • Use compressed images (optimize PNGs, use JPGs)
  • Limit GIF resolution to 500x500px or smaller
  • Avoid multiple simultaneous alerts on same canvas

Design:

  • Use readable fonts (avoid overly decorative fonts)
  • Ensure good contrast between text and background
  • Keep messages concise (under 50 characters)
  • Test alerts at stream resolution

User Experience:

  • Don't use overly long durations (max 10 seconds)
  • Match animation style to stream theme
  • Use consistent styling across alert types
  • Consider colorblind-friendly color choices

Testing:

  • Test alerts before going live
  • Check visibility on different stream scenes
  • Verify with actual event data (use test tip)
  • Review VODs to see alerts in context

Technical Reference​

Supported Media Formats:

  • Images: PNG, JPG, GIF, WEBP, SVG
  • Videos: MP4, WEBM, OGG
  • Max recommended size: 5MB

Browser Source Settings:

  • Width: 1920px (1080p) or 3840px (4K)
  • Height: 1080px (1080p) or 2160px (4K)
  • FPS: 60 (or match stream FPS)
  • Custom CSS: Not required (styling built-in)

Animation Durations:

  • Slide animations: ~500ms
  • Fade animations: ~300ms
  • Total display time = start animation + duration + end animation

Font Loading:

  • Fonts loaded from Google Fonts CDN
  • First load may take 1-2 seconds
  • Fonts cached after first use
  • Fallback to system font if load fails

Layout Dimensions:

  • Alert box auto-sizes to content
  • Max width: 80% of canvas width
  • Max height: 60% of canvas height
  • Padding: 20px around content