Setup Guide — Three Little Witches

GETTING STARTED

Quick Setup

01

Add the Widget to StreamElements

Go to StreamElements → My Overlays → New Overlay. Set the size to 1920 × 1080. Click Add Widget → Custom Widget, then upload all four files from the release/ folder: widget.html, widget.css, widget.js, widget.json.

02

Enter Your Channel Name REQUIRED

Open the widget settings panel in StreamElements. In the Setup group, enter your Twitch channel name (lowercase, no @).
nightwitchtv

03

Add as Browser Source in OBS

Copy the overlay URL from StreamElements. In OBS add a Browser Source, paste the URL, set width 1920 and height 1080. The background is transparent by default — the game sits on top of your scene.

💡

To enable the built-in background art, type !bg in chat, or set Background On by Default → On in the widget settings.

04

Go Live — Your Chat Joins Automatically

The widget connects to your Twitch chat as soon as the overlay loads. Viewers type a class command to join the fight. No bot token or OAuth needed.

CHAT COMMANDS

Viewer Commands

!blue

Join as Blue Witch — Defender. High HP and defence. Protects the party from boss attacks.

ALL VIEWERS

!red

Join as Red Witch — Attacker. Maximum damage output. Low defence — high risk, high reward.

ALL VIEWERS

!white

Join as White Witch — Support. Keeps the coven alive. Heals and buffs between rounds.

ALL VIEWERS

!stats

Show your stats. Displays your current level, XP, class, and HeadBuster score in the overlay.

ALL VIEWERS

ℹ️

Command names are fully customisable in the widget settings. If you change !blue to !defender, update your stream panel accordingly.

MOD / BROADCASTER

Stream Control Commands

!test

Trigger a test battle. Runs a full fight cycle without waiting for viewer joins. Useful for checking that the widget is working correctly.

MOD · BROADCASTER

!scene

Change the background scene. Pass a number 1–5 to switch location mid-stream. !scene 1 · !scene 2 · !scene 3 · !scene 4 · !scene 5

MOD · BROADCASTER

!speed

Change battle speed. Accepts 1, 2, 4, or 8. Use higher speeds for long streams with many fights. !speed 1 · !speed 2 · !speed 4 · !speed 8

MOD · BROADCASTER

!bg

Toggle the background art on or off. Useful when you want the game to sit over a green screen or an existing scene layer.

MOD · BROADCASTER

!hide

Hide the widget overlay. Hides everything — useful during gameplay or cutscenes. The game keeps running in the background.

MOD · BROADCASTER

!show

Show the widget overlay after it was hidden with !hide.

MOD · BROADCASTER

WIDGET SETTINGS

All Settings

Setup

Twitch Channel Name

Your channel name in lowercase. The widget uses this to connect to your chat. Required — the widget won't work without it.

—

Commands

Blue Witch Command

Chat command viewers type to join as the Defender class.

!blue

Red Witch Command

Chat command viewers type to join as the Attacker class.

!red

White Witch Command

Chat command viewers type to join as the Support class.

!white

Stats Command

Viewers use this to display their level and stats in the overlay.

!stats

Test Command

Mods and the broadcaster can trigger a test fight cycle to verify the widget is working.

!test

Stream Control Commands

Scene Command

Mods type this followed by a number (1–5) to switch the background scene live.

!scene

Hide Command

Hides the entire overlay. The game keeps running in the background.

!hide

Show Command

Makes the overlay visible again after !hide.

!show

Speed Command

Mods type this followed by 1, 2, 4, or 8 to change battle speed.

!speed

Background Toggle Command

Toggles the built-in background art on and off.

!bg

Display Settings

Background On by Default

Whether the built-in background art shows when the overlay loads. Set to Off if you want a transparent overlay over your own scene.

Off

Starting Background Scene

The scene shown when the overlay first loads. Options: Gothic Arena, Castle Gate, Dead Forest, Moon Garden, Throne Room.

Gothic Arena

Battle Speed

Default battle speed at startup. Can be changed live with the !speed command. Options: ×1 Normal, ×2 Fast, ×4 Turbo.

×1 Normal

Battle Results Duration

How long (in seconds) the victory or defeat screen stays visible before resetting. Set to 0 to keep it on screen until the next fight starts.

5 sec