# KickBot-Overlay in OBS hinzufügen

> Füge jedes KickBot-Overlay, etwa Chat, Alerts oder TTS, als Browser-Source in OBS Studio, Streamlabs Desktop oder Meld Studio hinzu, mit Größe, Audio und Hilfe bei Problemen.

Source: https://kickbot.com/de/docs/getting-started/add-browser-source-obs

Jedes KickBot-Overlay ist ein Weblink. Um es in deinem Kick-Stream zu zeigen, kopierst du den Link aus dem KickBot-Dashboard und fügst ihn in deiner Streaming-Software als **Browser-Source** hinzu. Das funktioniert gleich für Chat-Overlay, Alerts, TTS, Tip-Alerts und AI-Bilder, in OBS Studio, Streamlabs Desktop, Meld Studio und anderen Apps, die Browser-Sources unterstützen. Du musst nichts installieren.

## Den Overlay-Link finden

Jede Funktion hat ihren eigenen Link. Kopiere ihn von der passenden Seite unten.

| Overlay | Wo du den Link kopierst | Mehr Hilfe |
|---|---|---|
| Chat-Overlay, Alerts, Zähler und andere Widgets | **Widgets** > **Gespeicherte Widgets**, nachdem du ein Widget aus der Widget-Bibliothek installiert hast | [Widget-Bibliothek](https://kickbot.com/de/docs/widgets/widget-library), [Chat-Overlay](https://kickbot.com/de/docs/widgets/chat-overlay) |
| Text-to-Speech | **TTS** > **Einstellungen**, **Browser-Source für OBS** | [TTS einrichten](https://kickbot.com/de/docs/tts/set-up-tts) |
| Tip-Alerts | **Tipping** > **Widget** | [Tip-Alerts](https://kickbot.com/de/docs/tipping/tip-alerts) |
| AI-Bilder | **Chat Bot** > **AI-Bilder**, **Widget** | [AI-Bilder](https://kickbot.com/de/docs/ai/ai-images) |

> **Caution:** Halte Overlay-Links privat. Ein Link funktioniert für jeden, der ihn hat. Poste ihn nicht im Chat und zeig ihn nicht im Stream.

## Die Größe wählen

Ein Widget aus der Widget-Bibliothek zeigt seine Größe unter **Größe im Stream**, zum Beispiel 800 × 600 px. Nutze diese Breite und Höhe für die Browser-Source. Dieselbe Größe steht auch am Widget unter **Gespeicherte Widgets**.

![Die Karte Über dieses Widget in der Widget-Bibliothek mit Größe im Stream 800 × 600 px](https://kickbot.com/docs/images/getting-started/add-browser-source-obs/01-size-on-stream.webp "Nutze die Werte unter Größe im Stream als Breite und Höhe der Browser-Source.")

Wenn eine Seite keine Größe zeigt, stell die Browser-Source auf die Größe deiner Leinwand ein, zum Beispiel 1920 × 1080. Verschiebe die Quelle dann in deiner Szene oder ändere ihre Größe. Die meisten Overlays haben einen transparenten Hintergrund, sodass im Stream nur der Inhalt zu sehen ist.

## OBS Studio

1. Klick in der Box **Quellen** (Sources) deiner Szene auf **+** und wähle **Browser**.
2. Gib einen Namen ein, zum Beispiel „KickBot-Chat“, und bestätige.
3. Füge im Eigenschaften-Fenster den Overlay-Link in **URL** ein.
4. Stell **Breite** und **Höhe** (Width und Height) auf die Größe des Overlays ein.
5. Für Overlays mit Ton (TTS, Alerts, Tip-Alerts) schalte **Audio über OBS steuern** (Control audio via OBS) ein. Die Quelle erscheint dann im **Audiomixer** (Audio Mixer), wo du ihre Lautstärke ändern kannst.
6. Klick auf **OK**. Zieh die Quelle an die gewünschte Stelle auf der Leinwand.

Weitere Optionen der Browser-Source in OBS:

- **Quelle herunterfahren, wenn nicht sichtbar** (Shutdown source when not visible): entlädt das Overlay, wenn seine Szene nicht live ist. Lass das für Alerts und TTS aus, damit nichts verloren geht, während du in einer anderen Szene bist.
- **Browser aktualisieren, wenn Szene aktiv wird** (Refresh browser when scene becomes active): lädt das Overlay jedes Mal neu, wenn du zur Szene wechselst. Eine Nachricht, die gerade abgespielt wird, stoppt beim Neuladen.
- **Cache der aktuellen Seite aktualisieren** (Refresh cache of current page): ein Button, der das Overlay sofort neu lädt. Nutze ihn, nachdem du Einstellungen in KickBot geändert hast oder wenn das Overlay falsch aussieht.

OBS beschreibt jede Option in seinem [Guide zur Browser-Source](https://obsproject.com/kb/browser-source) (auf Englisch).

> **Gut zu wissen:** Um dieselben Overlays in vielen Szenen zu nutzen, pack sie in eine eigene Szene, zum Beispiel „KickBot-Overlays“. Füge diese Szene dann als Quelle in deine anderen Szenen ein. So fügst du jeden Link nur einmal hinzu.

## Streamlabs Desktop

1. Klick in der Studio-Ansicht auf **+** neben **Sources** (Quellen).
2. Wähle **Browser Source**, gib einen Namen ein und klick auf **Add Source** (Quelle hinzufügen).
3. Füge in den Einstellungen der Quelle den Overlay-Link in das URL-Feld ein und stell Breite und Höhe ein.
4. Schließ die Einstellungen und schieb die Quelle an ihren Platz.

Streamlabs Desktop hat dieselben Optionen **Shutdown source when not visible** und **Refresh browser when scene becomes active** wie OBS. Siehe den Artikel von Streamlabs zu [Browser-Sources](https://streamlabs.com/content-hub/post/introducing-browser-source-interaction-for-streamlabs-desktop). Wenn du ein Overlay nicht hörst, prüf, ob es im Audiomixer stummgeschaltet ist.

## Meld Studio

1. Klick im Panel **Layers** (Ebenen) auf **+** und wähle **Browser**.
2. Füge den Overlay-Link in das Feld **URL** im **Inspector** ein.
3. Ändere die Größe der Ebene auf der Leinwand oder stell W und H im Inspector ein.
4. Für Overlays mit Ton schalte unter dem URL-Feld **Add an audio track for the source** (Audiospur für die Quelle hinzufügen) ein. Meld fügt für Browser-Ebenen nicht von selbst eine Audiospur hinzu.

Du kannst einen Link auch direkt auf die Meld-Leinwand einfügen, um eine Browser-Ebene zu erstellen. Das Neuladen-Symbol neben dem URL-Feld lädt das Overlay neu. Meld erklärt Ebenen in seiner [Doku zu Layers](https://meldstudio.co/docs/layers/) (auf Englisch).

## Fehlerbehebung

**Die Quelle ist leer.**
- Viele Overlays zeigen erst etwas, wenn es etwas zu zeigen gibt. Ein Chat-Overlay bleibt leer, bis jemand im Chat schreibt. Ein Alert erscheint erst, wenn ein Event passiert.
- Kopiere den Link noch einmal aus dem Dashboard und füge ihn in die Quelle ein. Wenn du ein Widget gelöscht und neu installiert hast, hat es einen neuen Link.
- Lade das Overlay neu: **Cache der aktuellen Seite aktualisieren** in OBS oder das Neuladen-Symbol in Meld.
- Prüf, ob die Quelle nicht ausgeblendet ist (das Augen-Symbol) und nicht in der Liste hinter einer anderen Quelle liegt.

**Kein Ton von TTS oder Alerts.**
- OBS: Schalte in den Eigenschaften der Quelle **Audio über OBS steuern** ein und prüf dann, ob die Quelle im **Audiomixer** nicht stummgeschaltet ist.
- Meld: Schalte **Add an audio track for the source** ein.
- Prüf die Lautstärke-Einstellungen der Funktion in KickBot, zum Beispiel die TTS-Lautstärke in den [TTS-Einstellungen](https://kickbot.com/de/docs/tts/set-up-tts).
- Um das Overlay beim Streamen in OBS selbst zu hören, öffne **Bearbeiten** > **Erweiterte Audioeigenschaften** (Edit > Advanced Audio Properties) und stell **Audioüberwachung** (Audio Monitoring) für die Quelle auf **Monitor und Ausgabe** (Monitor and Output). Deine Zuschauer hören es so oder so.

**Änderungen in KickBot erscheinen nicht im Stream.** Lade das Overlay mit **Cache der aktuellen Seite aktualisieren** neu. Manche Overlays lesen ihre Einstellungen nur beim Laden.

**Das Overlay ist abgeschnitten oder zu klein.** Stell Breite und Höhe der Quelle auf die Größe des Overlays ein, so wie sie unter **Größe im Stream** steht. Ändere die Größe in den Eigenschaften der Quelle, nicht durch Ziehen auf der Leinwand, damit Text scharf bleibt.

## Häufige Fragen

**Wie füge ich den Kick-Chat in OBS hinzu?**

Installiere ein Chat-Widget aus der Widget-Bibliothek, kopiere seinen Link unter **Gespeicherte Widgets** und füge ihn in OBS als **Browser**-Quelle mit der Größe hinzu, die am Widget steht. Siehe [Chat-Overlay](https://kickbot.com/de/docs/widgets/chat-overlay).

**Funktionieren KickBot-Overlays mit Streamlabs und Meld?**

Ja. Jede Streaming-Software, die Browser-Sources unterstützt, funktioniert, auch OBS Studio, Streamlabs Desktop und Meld Studio.

**Kann ich einen Overlay-Link in mehreren Szenen nutzen?**

Ja. Füge dieselbe Quelle in jede Szene ein, oder pack deine Overlays in eine Szene und füge diese Szene in die anderen ein.

**Machen Overlays meinen PC langsamer?**

Overlays sind leichte Webseiten. Die Arbeit, zum Beispiel das Erzeugen des TTS-Audios, passiert auf den Servern von KickBot. Die Browser-Source zeigt und spielt nur das Ergebnis ab.