Skip to content

Getting Started

This guide walks through how to sign in, create your first overlay, and begin using AlertForge with Streamer.bot.

1. Sign In

To access AlertForge, sign in using one of the available authentication methods:

  • Twitch Login — recommended if you're using Twitch triggers
  • Google Login — useful for cross-platform overlays or alt accounts

Once logged in, you'll be directed to your dashboard.

2. Create an Overlay

From your dashboard, choose one of the three available methods to create an overlay:

  • Cast New Overlay
    Create a fresh overlay from scratch. You’ll name it, then manually edit its content using the code and config editors.

  • Quick Cast from Blueprint
    Use a pre-configured template (a "blueprint") with common settings already filled in. Great for quickly launching overlays like alerts, shoutouts, or labels.

  • Upload Overlay (ZIP)
    Import an overlay you've previously exported or received from someone else. The ZIP must contain valid template files and a configuration file.

After creation, you'll be directed to the overlay's view page, where you can edit, preview, and configure it.

3. Edit Overlay Content

Each overlay includes:

  • A code editor (Smithy) for advanced customization of HTML, CSS, and JavaScript
  • A template editor (Blueprint Editor) for adjusting configuration values via GUI
  • An optional preview area to simulate how the overlay will look live

4. Connect to Streamer.bot

To enable real-time overlay updates, AlertForge listens for events from Streamer.bot using its WebSocket Server.

Steps:

  1. Open Streamer.bot
  2. Go to the Servers/Clients tab
  3. Select WebSocket Server
  4. Enable Auto Start WebSocket Server
  5. Ensure the address is 127.0.0.1 and the port is 8080

No authentication is required. AlertForge will automatically connect to this WebSocket server when overlays are open in a browser or OBS.

✅ Tip: If you're running Streamer.bot on startup, enabling Auto Start ensures your overlays stay connected every time.

5. Embed in OBS

To display an overlay in OBS:

  1. Open your overlay’s View Page
  2. Click the OBS Link button to copy the overlay URL
  3. In OBS, add a new Browser Source
  4. Paste the copied URL
  5. Set the dimensions to match your layout (e.g. 1920x1080)

📋 The OBS Link is automatically formatted for browser source compatibility and will stream live overlay events when connected to Streamer.bot.

Next Steps

  • Customize your overlay layout and animations
  • Link multiple overlays to different event types
  • Explore how placeholders and config options work