Chat Overlay Widget – Twitch-Chat als Browser-Source mit Styling #93

New issue

Open

opened 2026-07-15 21:15:01 +02:00 by frank · 0 comments

frank commented

2026-07-15 21:15:01 +02:00

Owner

Kontext

StreamElements, Own3d und Primrose bieten einen gestylten Chat-Overlay-Browser-Source. Streamertool hat aktuell keinen eigenen Chat-Overlay – Streamer müssen entweder die Twitch-Chat-URL oder externe Tools (Chatty, Restream Chat) nutzen, die nicht ins Branding passen.

Ein Builtin-Chat-Overlay gehört zu den meistgenutzten Widgets überhaupt und ist für viele Streamer der erste Grund, eine Overlay-Lösung zu nutzen.

Ziel

Chat Overlay Widget als Overlay-Endpoint mit eigenem Styling:

1. Chat-Quelle & Empfang

Event-Bus-Integration: Der Chat wird über den bestehenden Twitch-Event-Bus empfangen (via EventSub channel.chat.message)
WebSocket-Stream: Live-Updates zum Overlay via WebSocket/SSE
Nachrichtentypen: Normale Nachrichten, Highlights, Sub-Nachrichten, Announcements, First-User-Chat
Emotes: Twitch-Emotes + BTTV/FFZ/7TV werden gerendert (auch animierte)

2. Overlay-Styling

Design-Presets:
- Kompakt – Nur Text, kleiner Avatar, minimale UI
- Twitch-Stil – Wie der native Twitch-Chat mit Dark-Mode
- Modern – Abgerundete Karten, Schatten, Avatar-Rahmen
- Minimal – Nur Text, kein Avatar, monospace
CSS-Tokens: Alle Farben, Schriftarten, Abstände, Größen über CSS-Variablen konfigurierbar
Eigene Schriftart: Google-Font oder Upload einer TTF/OTF
Avatar-Größe: Klein/Mittel/Groß/Kein Avatar
Badge-Stil: Kompakt (Nebeneinander) oder Gestapelt (Übereinander, Standard)

3. Filter & Anzeige-Modi

Highlight-only-Modus: Nur angepinnte/gehighlightete Nachrichten (für !so, Announcements)
Mod-Only-Modus: Nur Mod-Chat (für Mod-Screens/Brb-Overlay)
Keyword-Filter: Nur Nachrichten anzeigen, die bestimmte Keywords enthalten (z. B. !so-Aufrufe)
Nachrichten-Blacklist: Bestimmte Benutzer/Keywords ausblenden
Max-Lines: Maximale Anzahl angezeigter Zeilen (überlaufen scrollen)
Nachrichten-Timeout: Nach X Sekunden verschwinden Nachrichten
Fade-Out: Ältere Nachrichten werden langsam transparent

4. Spezial-Effekte

Sub-Animation: Sub-Nachrichten haben eine eigene Hintergrundfarbe/Glow
Highlight-Farben: Eigene Farbe für Subs, Mods, VIPs, Broadcaster
Message-Glow: Nachrichten mit Cheermotes/Bits bekommen einen Glow-Effekt
Animated Avatars: Falls animierte Avatars (BTTV/7TV) – diese werden abgespielt
Sound bei neuer Nachricht: Optionaler Benachrichtigungston

5. Admin-UI

Live-Vorschau: Der Chat wird im Admin-Panel live angezeigt (WebSocket)
Preset-Selector: Zwischen den Design-Presets wechseln
CSS-Editor: Eigene CSS-Regeln eingeben (für Fortgeschrittene)
Export/Import: Chat-Overlay-Konfiguration als JSON exportieren/importieren
Reset-Button: Auf Standard zurück

6. Overlay-Endpoint

URL: /overlay/chat?style=modern&lines=10&timeout=30
Transparenter Hintergrund (OBS-kompatibel)
Einstellbare Framerate für Animationen (30/60fps)

Technische Leitplanken

Kein externer Twitch-IRC-Chat-Client – nutzt den bestehenden Event-Bus (EventSub channel.chat.message)
DOM-basiertes Rendering (kein Canvas) – einfacher zu stylen, barrierefreier
Emote-Rendering via <img>-Tags mit Lazy-Load
Nachrichten-Puffer: Max 200 Nachrichten im Cache (Browser-Arbeitsspeicher)
WebSocket-Reconnect bei Verbindungsabbruch (exponential backoff)
Fallback auf SSE falls WebSocket nicht verfügbar

Akzeptanz

Chat-Nachrichten werden live im Overlay angezeigt
4+ Design-Presets sind vorkonfiguriert und auswählbar
CSS-Tokens und eigene Schriftarten sind konfigurierbar
Filter-Modi (Highlight, Mod-only, Keyword) funktionieren
Spezial-Effekte für Subs, Mods, Bits funktionieren
Admin-UI mit Live-Vorschau und Preset-Selector
Overlay funktioniert als OBS-Browser-Source mit Transparenz
BTTV/7TV-Emotes werden korrekt gerendert

Referenzen

StreamElements Chat Box: SE_API, HTML/CSS/JS Custom Widgets
Primrose Chat Overlay: Browser-based overlay hosting
Own3d Chat Module: Part of premium overlay suite

## Kontext StreamElements, Own3d und Primrose bieten einen gestylten Chat-Overlay-Browser-Source. Streamertool hat aktuell keinen eigenen Chat-Overlay – Streamer müssen entweder die Twitch-Chat-URL oder externe Tools (Chatty, Restream Chat) nutzen, die nicht ins Branding passen. Ein Builtin-Chat-Overlay gehört zu den meistgenutzten Widgets überhaupt und ist für viele Streamer der erste Grund, eine Overlay-Lösung zu nutzen. ## Ziel **Chat Overlay Widget** als Overlay-Endpoint mit eigenem Styling: ### 1. Chat-Quelle & Empfang - **Event-Bus-Integration**: Der Chat wird über den bestehenden Twitch-Event-Bus empfangen (via EventSub `channel.chat.message`) - **WebSocket-Stream**: Live-Updates zum Overlay via WebSocket/SSE - **Nachrichtentypen**: Normale Nachrichten, Highlights, Sub-Nachrichten, Announcements, First-User-Chat - **Emotes**: Twitch-Emotes + BTTV/FFZ/7TV werden gerendert (auch animierte) ### 2. Overlay-Styling - **Design-Presets**: - *Kompakt* – Nur Text, kleiner Avatar, minimale UI - *Twitch-Stil* – Wie der native Twitch-Chat mit Dark-Mode - *Modern* – Abgerundete Karten, Schatten, Avatar-Rahmen - *Minimal* – Nur Text, kein Avatar, monospace - **CSS-Tokens**: Alle Farben, Schriftarten, Abstände, Größen über CSS-Variablen konfigurierbar - **Eigene Schriftart**: Google-Font oder Upload einer TTF/OTF - **Avatar-Größe**: Klein/Mittel/Groß/Kein Avatar - **Badge-Stil**: Kompakt (Nebeneinander) oder Gestapelt (Übereinander, Standard) ### 3. Filter & Anzeige-Modi - **Highlight-only-Modus**: Nur angepinnte/gehighlightete Nachrichten (für !so, Announcements) - **Mod-Only-Modus**: Nur Mod-Chat (für Mod-Screens/Brb-Overlay) - **Keyword-Filter**: Nur Nachrichten anzeigen, die bestimmte Keywords enthalten (z. B. !so-Aufrufe) - **Nachrichten-Blacklist**: Bestimmte Benutzer/Keywords ausblenden - **Max-Lines**: Maximale Anzahl angezeigter Zeilen (überlaufen scrollen) - **Nachrichten-Timeout**: Nach X Sekunden verschwinden Nachrichten - **Fade-Out**: Ältere Nachrichten werden langsam transparent ### 4. Spezial-Effekte - **Sub-Animation**: Sub-Nachrichten haben eine eigene Hintergrundfarbe/Glow - **Highlight-Farben**: Eigene Farbe für Subs, Mods, VIPs, Broadcaster - **Message-Glow**: Nachrichten mit Cheermotes/Bits bekommen einen Glow-Effekt - **Animated Avatars**: Falls animierte Avatars (BTTV/7TV) – diese werden abgespielt - **Sound bei neuer Nachricht**: Optionaler Benachrichtigungston ### 5. Admin-UI - **Live-Vorschau**: Der Chat wird im Admin-Panel live angezeigt (WebSocket) - **Preset-Selector**: Zwischen den Design-Presets wechseln - **CSS-Editor**: Eigene CSS-Regeln eingeben (für Fortgeschrittene) - **Export/Import**: Chat-Overlay-Konfiguration als JSON exportieren/importieren - **Reset-Button**: Auf Standard zurück ### 6. Overlay-Endpoint - URL: `/overlay/chat?style=modern&lines=10&timeout=30` - Transparenter Hintergrund (OBS-kompatibel) - Einstellbare Framerate für Animationen (30/60fps) ## Technische Leitplanken - Kein externer Twitch-IRC-Chat-Client – nutzt den bestehenden Event-Bus (EventSub `channel.chat.message`) - DOM-basiertes Rendering (kein Canvas) – einfacher zu stylen, barrierefreier - Emote-Rendering via `<img>`-Tags mit Lazy-Load - Nachrichten-Puffer: Max 200 Nachrichten im Cache (Browser-Arbeitsspeicher) - WebSocket-Reconnect bei Verbindungsabbruch (exponential backoff) - Fallback auf SSE falls WebSocket nicht verfügbar ## Akzeptanz - [ ] Chat-Nachrichten werden live im Overlay angezeigt - [ ] 4+ Design-Presets sind vorkonfiguriert und auswählbar - [ ] CSS-Tokens und eigene Schriftarten sind konfigurierbar - [ ] Filter-Modi (Highlight, Mod-only, Keyword) funktionieren - [ ] Spezial-Effekte für Subs, Mods, Bits funktionieren - [ ] Admin-UI mit Live-Vorschau und Preset-Selector - [ ] Overlay funktioniert als OBS-Browser-Source mit Transparenz - [ ] BTTV/7TV-Emotes werden korrekt gerendert ## Referenzen - StreamElements Chat Box: SE_API, HTML/CSS/JS Custom Widgets - Primrose Chat Overlay: Browser-based overlay hosting - Own3d Chat Module: Part of premium overlay suite

frank added this to the Overlays & Widgets milestone

2026-07-15 21:15:01 +02:00

frank self-assigned this

2026-07-15 21:15:02 +02:00

frank referenced this issue

2026-07-15 21:15:08 +02:00

Overlay Theme System – Zentrale CSS-Tokens, Themes & Presets für alle Widgets #96

frank added the

priority:medium

effort:medium

area:overlays

labels