# MidgardPlus streamer kit

Scenes, overlays, alerts and channel panels in the launcher's colours: royal gold `#E0B84C`, royal
purple `#8A4FFF` and red `#D7263D` on `#0D0911`, the Bifrost gradient, the Palatino wordmark, and
Odin's glowing eye. Everything is plain HTML, so it runs as an OBS **Browser source** with no
install, no account and no internet needed.

**Start here:** https://midgardplus.odinthered.dev/streamer-kit/ (the kit's `index.html`). It has the
OBS setup steps, a form for your channel and server details that builds every link for you, a Copy
and Open button for each scene and overlay, and downloads for the panel images and alert files.

Open `preview.html` in a browser to see every piece at once.

**Whole setup in one go:** `obs.html` builds an OBS scene collection file in your browser with every
scene already made. See "OBS in one go" below.

## What is in it

| File | What it is | OBS size |
|---|---|---|
| `scenes/starting.html` | Starting soon, with a countdown | 1920 x 1080 |
| `scenes/brb.html` | Be right back, an away timer and rotating MidgardPlus tips | 1920 x 1080 |
| `scenes/ending.html` | Thanks for watching, where to get the mod, Ko-fi, mead-givers | 1920 x 1080 |
| `scenes/live.html` | The whole gameplay layout in one source: bar, webcam frame, lower third, optional chat and ticker | 1920 x 1080 |
| `scenes/silent.html` | Silent stream: no camera, just the game, voice and music. Name card with a voice meter, Now playing, chat and alerts | 1920 x 1080 |
| `scenes/just-chatting.html` | Big webcam and chat slots on the MidgardPlus background, with a topic line | 1920 x 1080 |
| `scenes/technical.html` | Technical difficulties, with a down-for timer | 1920 x 1080 |
| `overlays/gameplay-bar.html` | Slim MidgardPlus bar over gameplay | 1920 x 1080 |
| `overlays/webcam-frame.html` | Bifrost frame with gold corners and a name tag | webcam width + 28 x height + 28 |
| `overlays/chat-frame.html` | Frame and "The Mead Hall" header for a chat box | chat width + 28 x height + 28 |
| `overlays/lower-third.html` | "Now playing MidgardPlus" that slides in every few minutes | 1920 x 1080 |
| `overlays/alert.html` | Follow, sub, mead and raid alerts | 1920 x 1080 |
| `overlays/alerts.html` | Real alerts straight from Streamlabs with your Socket API token, no Alert Box needed | 1920 x 1080 |
| `connect.html` | MidgardPlus Live: connect Twitch once and get your alerts and chat links | |
| `obs.html` + `assets/obs.js` | OBS in one go: download a whole scene collection, plus an optional OBS profile zip | |
| `overlays/live-alerts.html` | MidgardPlus Live alerts straight from Twitch: follows, subs, resubs, gift bombs, cheers, raids | 1920 x 1080 |
| `overlays/live-chat.html` | MidgardPlus Live chat straight from Twitch, with emotes | 448 x 668 |
| `assets/twitch-app.json` | The Twitch app's public Client ID that switches MidgardPlus Live on | |
| `overlays/ticker.html` | Scrolling bar: mead-givers, Ko-fi goal, where to get the mod | 1920 x 64 |
| `alerts/custom-widget.html` + `.css` | The alert design to paste into an alert service | set by the service |
| `streamlabs/<type>/` | Streamlabs Alert Box custom HTML, CSS and JS for follow, subscription, bits, raid, host and donation | set in Streamlabs |
| `streamlabs/midgardplus-streamlabs-alerts.zip` | All six Streamlabs packs in one zip | |
| `streamelements/<widget>/` | StreamElements custom widgets: `alerts`, `latest`, `goal` and `chat`, each with HTML, CSS, JS and Fields | set in StreamElements |
| `streamelements/midgardplus-streamelements-widgets.zip` | All four StreamElements widgets in one zip | |
| `panels/png/*.png` | Twitch panel images, 320 x 100 | upload directly |
| `panels/panels.html` | The panels as HTML, if you want to edit the words | |
| `previews/*.png` | Screenshots of every piece | |

## Adding one to OBS

**Use the website address.** The whole kit is hosted on the MidgardPlus site, so OBS loads it like any
web page and it reads live data from the same site: the newest MidgardPlus version and every
mead-giver on the Ko-fi list. Nothing to download, and it updates itself.

1. **Sources > + > Browser.**
2. Leave **Local file** unticked and paste the address, for example:

       https://midgardplus.odinthered.dev/streamer-kit/scenes/starting.html?minutes=10

3. Set **Width** and **Height** from the table.

Every page is at `https://midgardplus.odinthered.dev/streamer-kit/` followed by its path in the table,
so the webcam frame is `.../streamer-kit/overlays/webcam-frame.html`. The gallery of everything is
`.../streamer-kit/preview.html`.

The transparent overlays need nothing else: OBS browser sources are transparent by default.

**Working offline instead.** Tick **Local file** and pick the `.html` from this folder. It all still
works, but see "Live data" below.

## A full stream in OBS

Make these seven scenes. Every page address starts with `https://midgardplus.odinthered.dev/streamer-kit/`.
Add `overlays/alert.html` (1920 x 1080) to the top of **Live** and **Just chatting**, or make it its own
scene and nest it in both, so alerts show wherever you are.

| OBS scene | Sources, bottom to top |
|---|---|
| **Starting soon** | `scenes/starting.html?until=20:00`, then your music |
| **Live** | Game capture; your webcam at **x 1400, y 770, 480 x 270**; `scenes/live.html`; `overlays/alert.html` |
| **Silent stream** | Game capture; `scenes/silent.html?music=...` (the Silent stream link from `connect.html` brings chat and alerts with it); no webcam |
| **Just chatting** | `scenes/just-chatting.html?topic=...`; your webcam at **x 80, y 170, 1200 x 675**; your chat at **x 1340, y 170, 500 x 675**; `overlays/alert.html` |
| **Be right back** | `scenes/brb.html` |
| **Technical difficulties** | `scenes/technical.html` |
| **Ending** | `scenes/ending.html?next=Friday 8pm` |

**Live** settings: `camw=480&camh=270` if your webcam slot is another size (then place the webcam at
x `1920 - 40 - camw`, y `1080 - 40 - camh`); `chat=1` adds a chat frame on the right, with its chat at
**x 1500, y 294, 380 x 420** (380 x 384 with `ticker=1`), and moves the lower third to the left; `ticker=1` adds the ticker along the
bottom and lifts the webcam frame above it, so place the webcam at y `1080 - 104 - camh` (y 706 for the default 270 high); `nobar=1`, `nocam=1` and `nolower=1` take pieces out; `name=` and `text=` as on the separate
overlays.

**Just chatting** settings: `topic=`, `name=`, `title=`, and `nochat=1` for one big webcam slot.

### Silent stream

For streams with no camera: just the game and your voice, or music. Use it instead of **Live** when
the camera stays off. It is one source over the game capture, at
`https://midgardplus.odinthered.dev/streamer-kit/scenes/silent.html`, and it holds:

- the gameplay bar at the top centre, with the mod version and your server;
- a name card in the bottom right: "Silent stream", your name (and Twitch avatar with `twitch=`) with a
  voice meter next to it, the line "No cam, just the game and the tunes", and a "Now playing" line when
  you set one;
- MidgardPlus Live chat on the right below the minimap and Live alerts, when the link carries them;
- the ticker along the bottom with `ticker=1`.

**Chat and alerts.** On `connect.html` copy the **Silent stream scene** link. Like the other Live links,
the Twitch login sits after the `#`, and the scene hands it to the chat and alerts inside it. It also
takes your details from the kit page if you saved them there. Without a Live login and without
`test=`, chat and alerts stay out, so nothing odd shows. Then add `overlays/alert.html` or your alert
service on top if you use one. Treat that link like a password, same as the others.

**Settings:**

- `music=` the Now playing text, for example `music=Tavern songs by the fire`. Hidden when empty. The kit
  page, `obs.html` and `connect.html` each have a box for it.
- `title=` replaces "Silent stream"; `tag=` replaces the tag line; `notag=1` hides it; `name=`.
- `mic=1` makes the voice meter follow your mic, see below; `novoice=1` hides the meter.
- `nobar=1`, `nochat=1` and `noalerts=1` take pieces out.
- `chat=1` without a Live login adds an empty chat frame for your own chat source: frame at
  x 1546, y 228, 348 x 508, so place your chat at **x 1560, y 242, 320 x 480**.
- `ticker=1` adds the ticker and lifts the name card above it.
- `test=1` shows fake chat, fake alerts and a sample Now playing line, for lining things up. `test=raid`
  and the other kinds work as on `live-alerts.html`.
- Passed on to the chat inside: `accent`, `nocmd`, `max`, `fade`, `size`, `status`. Passed on to the alerts:
  `accent`, `show`, `minbits`, `seconds`, `top`, `sound`, `status`, `still`.

**The voice meter.** With no setup it plays a slow, gentle idle movement, so it always looks alive.
`mic=1` asks the browser for your default mic and moves the bars with your voice. OBS browser sources
usually have no mic access, so for real reactive bars start OBS with the `--enable-media-stream`
launch option (add it to the end of the Target box in the OBS shortcut's Properties). Some OBS
versions also need `--use-fake-ui-for-media-stream`. This hasn't been tried in every OBS version. If
the mic is blocked, missing, or stays at dead silence for the first 10 seconds, the bars just keep
their idle movement. Nothing ever shows an error on stream. Without the launch option, leave `mic=1`
off and use the idle movement.

Music you play on your PC comes through Desktop Audio or an Application Audio Capture of your music
player. In the one go setup, Desktop Audio starts muted when Valheim capture is on, so unmute it or add
the music player on its own.

## OBS in one go

`obs.html` makes an OBS scene collection file right in the browser. Nothing goes to our site. It
fills in your details from the kit page if you saved them there.

**Options:** canvas 1920 x 1080 or 2560 x 1440, Valheim capture on or off, webcam on or off, and
MidgardPlus Live alerts and chat. The Live links only get in if you came from `connect.html` and hit
**Build my OBS setup**. That hands them over in the browser tab's session storage, never in the
address. The page then warns that the downloaded file holds the Twitch login, because it does.

**What's in the file** (collection name `MidgardPlus Kit`):

| Scene | Sources, bottom to top |
|---|---|
| Starting Soon | `scenes/starting.html?minutes=10`, Live alerts |
| Live (Valheim) | Valheim game capture (fit to canvas), gameplay bar, webcam at x 1400, y 770, 480 x 270, webcam frame, Live chat on the right, Live alerts |
| Silent Stream | Valheim game capture (fit to canvas), `scenes/silent.html` (with `music=` if you filled it in), Live chat on the right at the same spot as in Live, Live alerts |
| Just Chatting | `scenes/just-chatting.html`, webcam in the big slot, Live chat in the chat slot (`nochat=1` if no chat), Live alerts |
| Be Right Back | `scenes/brb.html`, Live alerts |
| Technical Difficulties | `scenes/technical.html` |
| Ending | `scenes/ending.html` |

Every scene also holds Discord and Valheim game audio, so they carry across scene changes. Kit pages
are 1920 x 1080 Browser sources scaled to the canvas.

**Audio:** Desktop Audio (`wasapi_output_capture`, default device) and Mic (`wasapi_input_capture`,
default device, with RNNoise noise suppression and a noise gate) are the global mixer channels.
Discord is Application Audio Capture of `Discord.exe` and **starts muted**; click its speaker in the
mixer to put voice chat on stream. Valheim game audio is Application Audio Capture of `valheim.exe`.
With Valheim capture on, Desktop Audio starts muted so the game isn't heard twice.

**Browser sources** refresh when their scene becomes active and keep running when hidden. Chat has
Control audio via OBS off. Alerts has it on with Audio Monitoring set to Monitor Off, so the horn goes
to the stream once and never doubles through Desktop Audio. Transition is Fade, 300 ms.

**Webcam** is a Video Capture Device with no camera picked, so OBS doesn't grab the wrong one.

**Import:** Scene Collection > Import, pick the file, switch to it, then pick your devices under
Settings > Audio or each source's Properties. Stream key and output settings are left alone.

**Profile zip (optional):** a `MidgardPlus` folder with `basic.ini`: Simple output mode, x264 or NVENC,
6000 kbps video, 160 kbps audio, 60 fps, output 1920 x 1080, canvas as picked. Import with Profile >
Import and choose the unzipped folder, then add your stream key once in that profile.

**Limits:** Windows only for the capture and audio sources. Application Audio Capture needs OBS 28+ on
Windows 10 2004 or newer. Mac and Linux users keep the scenes but add their own game, camera and audio
sources. Live links still expire; paste new ones into the two Browser sources when they do.

## Where overlays sit around Valheim's HUD

Valheim puts the hotbar top left, the minimap top right, health and food bottom left, and the build
hints along the bottom middle. So the defaults keep clear of those: the gameplay bar sits **top
centre**, the lower third comes in on the **right** at a third of the way down, and the webcam frame
belongs **bottom right**.

The **Silent stream** scene follows the same rules. Its safe areas, on the 1920 x 1080 page:

| Piece | Where | Clear of |
|---|---|---|
| Gameplay bar | top centre, y 12 to 68 | hotbar top left, minimap top right |
| Live chat | right edge, x 1545 to 1894, y 228 to 749 | minimap above it |
| Name card, voice meter, Now playing | bottom right, 26 in from the right and bottom, up to 600 wide and about 170 high (90 up from the bottom with the ticker) | health and food bottom left |
| Alerts | drop in across the top middle at y 120 for a few seconds | same as on Live |
| Ticker (`ticker=1` only) | the whole bottom edge, 64 high | check it clears your food bar |

The middle of the screen, where the crosshair, hover text and build hints sit, is left empty, and so
are the top left and bottom left corners. Valheim's inventory and build menu cover the middle when
open, which the overlay can't help.

## Settings

Every setting is optional. Separate several with `&`.

**All scenes:** `title=`, `version=`.

**Your details, on every scene and overlay.** The home page form fills these in for you. Leave any of
them out and the page shows its normal text.

| Setting | What it does | Where it shows |
|---|---|---|
| `twitch=` | Your Twitch channel name. Turns on the Twitch info below | starting, ending, ticker, gameplay bar, just chatting |
| `name=` | Your display name, instead of "Odin the Red" | starting, gameplay bar, webcam frame, just chatting, live |
| `server=` | Your server's name | starting, live, gameplay bar, ticker, just chatting, brb |
| `address=` | Server address or join code | same as `server=` |
| `password=` | Server password. `password=ask` shows "Password: ask in chat" | starting, gameplay bar, ticker, just chatting |
| `discord=` | Discord invite, for example `discord.gg/abc123` | starting, ending, brb, technical, ticker |
| `schedule=` | When you stream, for example `Fridays 8pm` | ticker, ending ("Next ride" when `next=` is not set) |
| `accent=` | `purple`, `red`, `frost` or `green` instead of gold | everywhere the gold accent is used |

`scenes/live.html` passes all of these on to the pieces inside it.

**Twitch info.** With `twitch=` set, pages read public channel info from
[decapi.me](https://decapi.me) with no login or key: avatar, stream title, game, follower count, and
whether you are live and for how long. It is checked at most once a minute. If decapi.me is down or
does not know the channel, the pages quietly keep their normal text.

**Staying up to date without refreshing.** Every page keeps polling on its own: mod version and
mead-givers every five minutes, Twitch info every minute, and it updates in place. Each page also
reads `assets/kit-version.txt` every five minutes. When that changes, because a new version of the
kit was put on the site, open sources reload themselves with the same settings. Change the text in
that file whenever you deploy new overlay code. `noupdate=1` turns the reload check off.

- `starting.html`: `minutes=5` for a countdown, or `until=20:00` to count to a time of day; `nocount=1`
  hides it; `sub=` and `eyebrow=` replace those lines.
- `brb.html`: `tip=` to show your own line instead of the rotating tips; `tipseconds=9`.
- `ending.html`: `next=Friday 8pm` adds a "Next ride" line; `names=` lists mead-givers.
- `gameplay-bar.html`: `pos=top-center`, `top-left`, `bottom-center` or `bottom-right`; `text=` replaces
  "by Odin the Red", for example `text=!mod for the link`.
- `webcam-frame.html`: `w=640&h=360` is your webcam's size in OBS; `name=`; `tag=top`; `noname=1`.
- `chat-frame.html`: `w=420&h=640`; `title=`; `clearbg=1` removes the dark glass behind chat.
- `lower-third.html`: `pos=right` or `left`; `top=600`; `every=10` minutes between showings, `0` for
  once; `hold=12` seconds on screen; `stay=1` to leave it up; `sub=` and `eyebrow=`.
- `alert.html`: `seconds=7` on screen; `test=follow`, `sub`, `mead` or `raid` with `name=`, `amount=` and
  `message=` to fire a test; `loop=1` repeats the test.
- `ticker.html`: `text=` adds your own line; `speed=90` pixels a second; `names=`. It rebuilds itself
  when mead-givers or Twitch info change, so it no longer reloads every 30 minutes.

Size the webcam and chat frames by the thing inside them. For a 640 x 360 webcam, set the browser
source to 668 x 388 and line the webcam up 14 pixels in from its top left corner.

## Live data

Loaded from the website, pages read `supporters.json` and the site's own stats feed, which carries the
newest version on Thunderstore. They check again every five minutes, so a new mead-giver or a new
release shows up during a stream without touching OBS. `poll=` changes the minutes.

The site's stats feed refreshes from Thunderstore on its own schedule, so a brand new release can take
a little while to appear.

Loaded as a local file, OBS may block reading the site, because the site does not yet send the header
that allows it. Nothing breaks: the version line reads "for Valheim" and the mead-givers row stays
hidden. Pass them yourself if you need them offline:

    ?version=1.9.10&names=Lopikgary,Tera277

## MidgardPlus Live (easiest)

Our own take on StreamElements: connect Twitch once, paste a link into OBS, done. No server of ours
is involved. The pages talk to Twitch directly from your OBS browser source, and our site only hands
out the files.

1. Open https://midgardplus.odinthered.dev/streamer-kit/connect.html and hit **Connect with Twitch**.
2. Say yes on Twitch. You land back on the page, which says who you're connected as and when the
   link runs out.
3. Pick what shows, copy the alerts link and the chat link, and add each to OBS as a Browser source:
   `overlays/live-alerts.html` at 1920 x 1080 and `overlays/live-chat.html` at 448 x 668.

**What it covers:** follows, new subs, resubs with the viewer's message, gifted subs (a gift bomb
shows once, not once per sub), cheers and raids, plus chat with emotes. Deleted messages, timeouts
and bans vanish from chat too. It doesn't do tips or donations, because those never go through
Twitch. Keep Streamlabs, StreamElements or Ko-fi for those and switch off their Twitch alerts so
nothing plays twice.

**What it asks Twitch for:** `moderator:read:followers` for follows, `channel:read:subscriptions` for
subs and gifts, `bits:read` for cheers and `chat:read` for chat. Raids need nothing. It can't post,
change anything or see your email.

**The links are passwords.** The Twitch login sits after the `#` (`#t=...&c=...`). Browsers never
send that part to a website, and every Live page sets `no-referrer`. Don't show the connect page or
your OBS source settings on stream. To kill a link, disconnect the app at
twitch.tv/settings/connections. Logins made this way run out after a while and the connect page
shows the date. When one runs out, connect again and paste the new links over the old ones. With
`status=1` the overlays show a small "Reconnect MidgardPlus Live" tag when that happens; without it
they just go quiet, so nothing odd pops up on stream.

Settings for `live-alerts.html`, before the `#`:

- `show=follow,sub,resub,gift,cheer,raid` picks the kinds; leave it out for all of them.
- `minbits=100` skips smaller cheers; `seconds=7` on screen; `top=120` pixels from the top.
- `accent=purple`, `red`, `frost` or `green` paints every alert in that one colour.
- `sound=1` plays a short horn made in the browser, no sound file needed.
- `status=1` shows whether it's connected and anything Twitch refused.
- `test=1` plays fake alerts, or `test=follow`, `sub`, `resub`, `gift`, `cheer` or `raid` for one kind;
  `still=1` with `test=` freezes one for screenshots.

Settings for `live-chat.html`: `nocmd=1` hides lines starting with `!`; `max=30` lines kept, with the
older ones fading; `fade=60` removes lines after that many seconds; `size=20` text size; `title=`;
`nohead=1`; `clearbg=1`; `accent=`; `status=1`; `test=1`.

Both pages read `assets/kit-version.txt` like the rest of the kit and reload with the whole link
kept, the `#` part included.

**For the site owner.** The app's Client ID lives in `assets/twitch-app.json`. Until it's filled in,
every Live page just says "MidgardPlus Live isn't switched on yet. The site owner needs to add the
Twitch app." and nothing else breaks. A Client ID isn't a secret, and there's no client secret
anywhere. To switch it on, register an application at dev.twitch.tv/console with the OAuth Redirect
URL `https://midgardplus.odinthered.dev/streamer-kit/connect.html`, category Broadcaster Suite, and
client type Public, name it MidgardPlus Live, then paste its Client ID into that file.

## Alerts

`overlays/alert.html` is the full design, with embers and a rune for each kind of alert. On its own
it only shows tests, because follows and subs come from Twitch through an alert service. Two ways to
use it for real:

- **Paste it into your alert service.** Streamer.bot and similar services let you give an
  alert your own HTML and CSS. Open `alerts/custom-widget.html` and `alerts/custom-widget.css`, paste
  them in, and swap the `{name}`, `{amount}` and `{message}` placeholders for the variables your
  service uses. Each service names its variables a little differently. On Streamlabs, use the
  ready made packs below instead.
- **Drive `alert.html` yourself.** Anything that can run JavaScript in the page can call
  `showAlert({ type: 'mead', name: 'Lopikgary', amount: '$5', message: 'Skål' })`. Alerts queue,
  so a raid and three follows at once play one after another.

To check the look: `overlays/alert.html?test=mead&name=Lopikgary&amount=$5&loop=1`.

## Streamlabs (alternative)

Two ways. Use one, not both, or every alert plays twice.

**1. Our alerts overlay, straight from Streamlabs (easiest).** `overlays/alerts.html` talks to the
Streamlabs Socket API itself, so you don't need a Streamlabs Alert Box in OBS at all.

1. On streamlabs.com go to **Settings > API Settings > API Tokens** and copy **Your Socket API Token**.
2. Paste it into the Streamlabs box on the kit home page and hit **Copy**. The link looks like

       https://midgardplus.odinthered.dev/streamer-kit/overlays/alerts.html#slsocket=YOUR_TOKEN

3. Add it to OBS as a Browser source, 1920 x 1080, above your game and webcam.

It shows Twitch follows, subs, resubs, gifted subs, bits and raids, plus Streamlabs donations, one
at a time, with the viewer's message when there is one. Hosts show too if Streamlabs still sends them.

**Your token is a password.** Anyone who has it can read your alerts. It sits after the `#` in the
link, and browsers never send that part to a website, so our site never sees it. The home page
doesn't save it either. It also works as `?slsocket=` if you'd rather, but then it does go to our
server with the page request, so stick with `#`. Don't show the link or your OBS source settings on
stream, and if it leaks, make a new token in Streamlabs. The overlay never prints the token anywhere.

Settings for `alerts.html`:

- `test=1` plays fake alerts every few seconds without connecting to anything, so you can place it
  in OBS. `test=follow`, `subscription`, `bits`, `raid`, `host` or `donation` tests just one kind.
- `seconds=7` on screen; `top=120` pixels from the top.
- `status=1` shows a small tag saying whether it's connected. Take it off when you're done.
- `still=1` with `test=` freezes one alert for screenshots.

It loads the socket.io 2.0.3 client from cdnjs, the version Streamlabs' own docs use, pinned with an
integrity hash. It also reads `assets/kit-version.txt` like every other page and reloads itself when
the kit updates, keeping the token.

**2. Paste into Streamlabs.** `streamlabs/` has a folder per alert type: `follow`, `subscription`
(new subs, resubs and gifted subs in one), `bits`, `raid`, `host` and `donation`. Each has
`alert.html`, `alert.css`, `alert.js` and a `README.txt`. Or grab them all in
`streamlabs/midgardplus-streamlabs-alerts.zip`.

1. Open your **Alert Box** on streamlabs.com and pick the alert type.
2. Turn on **Enable Custom HTML/CSS**.
3. Paste `alert.html` into the **HTML** tab, `alert.css` into **CSS** and `alert.js` into **JS**.
4. Set the alert duration to 8 seconds, save and test.

Each one has a Norse entrance and exit: a rune that flares in for follows and hosts, a shield slam
for subs, a spinning rune with a double gold sweep for bits and donations, and a longship slide then
slam for raids. The first line of `alert.html` has `data-hold="7"` for seconds on screen and
`data-useimage="1"` to put your Streamlabs alert image in the rune circle.

They read these Streamlabs variables: `{name}`, `{amount}`, `{months}`, `{gifter}`, `{count}`,
`{userMessage}`, `{message}`, `{messageTemplate}`, `{img}` and `{image}`. Each pack only lists the ones
that make sense for it, and anything Streamlabs leaves empty is skipped. Viewer text always goes on
screen as plain text.

No sounds are bundled. Each README.txt suggests one.

## StreamElements (alternative)

Same MidgardPlus look for StreamElements, as custom widgets. Everything is in `streamelements/`, one
folder per widget, or all of it in `streamelements/midgardplus-streamelements-widgets.zip`.

**Pick one for alerts.** Use the Streamlabs alerts or the StreamElements alerts widget, not both, or
every alert plays twice. The latest, goal and chat widgets don't clash with anything, and the kit's
scenes and overlays work with either service.

| Folder | What it is | Size in the overlay |
|---|---|---|
| `streamelements/alerts/` | Follows, subs, resubs, gifted subs, gift bombs, cheers, raids and tips, one at a time | at least 1000 x 320 |
| `streamelements/latest/` | Cycles your latest follower, sub and tip | about 640 x 110 |
| `streamelements/goal/` | Follower or sub goal bar, this stream or all time, with your own goal number | about 760 x 130 |
| `streamelements/chat/` | Chat inside the Mead Hall frame, with emotes, badges and deleted messages removed | 448 x 668 |

Each folder has `widget.html`, `widget.css`, `widget.js`, `fields.json` and a `README.txt`.

1. On streamelements.com open **My Overlays** and open your overlay.
2. Click **+** (Add widget), pick **Static / Custom**, then **Custom widget**.
3. Select the widget, and under **Settings** click **Open Editor**.
4. Paste `widget.html` into **HTML**, `widget.css` into **CSS**, `widget.js` into **JS** and `fields.json`
   into **FIELDS**, replacing what's there.
5. Click **Done**, then **Save**. The settings are in the left panel.

The alerts widget has tick boxes per kind, the smallest cheer and tip to show, seconds on screen,
accent colour, a sound link and volume (empty, so no sound until you add one), your own wording per
kind with `{name}`, `{amount}`, `{sender}` and `{tier}`, and a **Play a test alert** button.
**Emulate** in the editor works too. Alerts queue one at a time, and the widget tells StreamElements
to move on as soon as each one has left. A gift bomb shows as one alert, not one per gift.

The widgets use StreamElements' custom widget events: `onWidgetLoad` for your settings and session
data, `onSessionUpdate` for the goal and latest names, and `onEventReceived` with the
`follower-latest`, `subscriber-latest`, `cheer-latest`, `raid-latest`, `tip-latest`, `message`,
`delete-message`, `delete-messages` and `widget-button` listeners. Anything a viewer typed goes on
screen as plain text, and emotes and badges only load from `https` links.

## Fonts and art

The wordmark uses Palatino Linotype, which ships with Windows. The runes use Segoe UI Historic, which
also ships with Windows. The portrait is `assets/odin.jpg`, the same art as the launcher header.