# Mein erstes Overlay

# Mein erstes Overlay

Dieser Walkthrough geht durch ein einfaches "Just Chatting"-Setup mit Cam, Chat-Box, Follower-Alert. Zielzeit: 10 Minuten.

## Schritt 1: Overlay anlegen

1. Dashboard öffnen, links unter `« Overlays »`.
2. `« Neues Overlay »` klicken.
3. Modus: `« Builder »`.
4. Name vergeben: `Just Chatting v1`.
5. Starter-Vorlage `Just Chatting` wählen - das spart Tippen.

## Schritt 2: Cam-Frame anpassen

Der `Cam-Frame` ist standardmäßig oben links. Klick drauf, in der rechten Spalte:

- Position: `Oben links`
- Größe: `25%` der Breite
- Form: `Kreis` (oder rechteckig - Geschmack)
- Rahmen: `4px`, Farbe deiner Marke

In OBS musst du die echte Webcam **dahinter** als zweite Quelle legen - der Cam-Frame im Overlay ist nur das Bild-/Rahmen-Element, nicht das Webcam-Video. (Im Pro Editor gibt's das `Camera`-Widget mit echtem Video-Sync, siehe [Verfuegbare APIs im Overlay].)

## Schritt 3: Chat-Box

Klick auf das Chat-Widget. Eigenschaften:

- Position: `Rechts unten`
- Max. Nachrichten: `30`
- Schrift: `Inter`, `16px`
- Hintergrund: `transparent` (oder leicht abgedunkelt für Lesbarkeit)
- Animation: `Fade`

Chatlix erkennt automatisch deinen verbundenen Twitch- / YouTube-Channel und zieht den Live-Chat von dort. Wenn nichts kommt: in `/dashboard/integrations` die Verbindung prüfen.

## Schritt 4: Alert

Das Alert-Widget liegt mittig oben:

- Animation: `Slide from top`
- Dauer: `5 s`
- Sound: `Bell soft` (oder eigener Upload)
- Trigger: Follow, Sub, Cheer, Raid - alle an

Der Alert ist live testbar: rechte Spalte → `« Test-Alert »` → ein Beispiel-Follow wird im Preview gespielt **und** in OBS, wenn die Browser-Source aktiv ist.

## Schritt 5: Speichern und in OBS

1. Oben rechts `« Speichern »`.
2. `« Browser-Source-URL »` kopieren.
3. OBS öffnen, in deiner Szene `+` → Browser-Quelle.
4. URL einfügen, Width 1920, Height 1080, FPS 60.
5. `OK`.

Die Webcam-Quelle (echte Hardware) legst du **unter** die Browser-Source - so dass das Overlay drüber liegt.

## Schritt 6: Test

Im Dashboard `« Test-Alert »` klicken. Wenn der Alert in OBS erscheint: läuft. Wenn nicht: siehe [Pro Editor Troubleshooting].

## Was kommt danach?

- **Mehr Szenen** (Starting Soon, BRB, Ending): jeweils ein eigenes Overlay im Builder, jedes mit eigener URL. In OBS pro Szene eine Browser-Quelle.
- **Mehr Widgets pro Layout**: ab ~5 Widgets wird's im Builder unübersichtlich. Wechsel in den Pro Editor.
- **Animationen**: nur im Pro Editor.