# Button einbauen

Mit dem Button abonnieren Besucher deinen Kalender direkt auf deiner Website. Ein Klick öffnet die Auswahl der Kalender-App, ein zweiter Klick legt das Abo an.

## Live-Vorschau

Probier Farbe, Text und Sprache aus. Der Button unten ist echt und gehört zu einem Demo-Kalender. Das Snippet darunter kopierst du auf deine Website.

<SubscribeButtonPreview />

## Snippet

```html
<div class="ks-subscribe" data-calendar="cal_XXXXXXXXXXXX"></div>
<script src="https://app.kalender-sync.de/embed/v1/button.js" async></script>
```

Ersetze `cal_XXXXXXXXXXXX` durch die ID deines Kalenders. Die ID steht in deinem Plugin oder in der API-Antwort beim Anlegen (`id`). Das `<script>` brauchst du nur einmal pro Seite, auch bei mehreren Buttons.

## Optionen

| Attribut | Wirkung | Standard |
|---|---|---|
| `data-calendar` | ID deines Abo-Kalenders. Pflicht. | |
| `data-color` | Farbe des Buttons als Hex-Wert, z. B. `#0f766e`. Die Schriftfarbe passt sich für gute Lesbarkeit an. | `#2563eb` |
| `data-label` | Eigener Button-Text, z. B. „Alle Kurse abonnieren“. | „Kalender abonnieren“ |
| `data-lang` | Sprache des Menüs: `de` oder `en`. | Sprache deiner Seite |

## Was der Button tut und was nicht

- Er zeigt die gleiche App-Auswahl wie die [Abo-Seite](https://docs.kalender-sync.de/abo-kalender/abo-seite/#unterstützte-kalender-apps). „Andere App“ öffnet die Abo-Seite in einem neuen Tab, dort gibt es den Feed-Link mit Kopier-Button. Der Button selbst schickt dafür keine Anfrage an uns.
- Er setzt **keine Cookies**, speichert nichts im Browser und lädt nichts nach außer dem Script selbst. Du brauchst dafür keinen Eintrag im Cookie-Banner.
- Er rendert in einem eigenen Bereich (Shadow DOM). Das CSS deiner Seite verändert ihn nicht, und sein CSS verändert deine Seite nicht.
- Die Einträge im Menü sind normale Links zu Kalender Sync. Erst der Klick legt das Abo an und leitet zur Kalender-App weiter.

## Klicks in deinem eigenen Analytics

Wir tracken keine Besucher. Wenn du wissen willst, wie oft der Button genutzt wird, kannst du das selbst messen, auf deiner Seite und unter deiner Einwilligung. Bei jedem Klick auf eine App feuert der Button das Event `ks:subscribe`. Wie du es abgreifst, steht unter [Button und ks:subscribe](https://docs.kalender-sync.de/api/button/#das-event-kssubscribe).

Ohne eigenes Analytics siehst du die Zahl der Klicks auch in der [Statistik](https://docs.kalender-sync.de/abo-kalender/statistik/).

## Page-Builder und Single-Page-Apps

Rendert deine Seite Inhalte erst später (Elementor, Divi, React, Vue …), ruf nach dem Einfügen des Buttons `window.KalenderSync.mountButtons()` auf. Details unter [Button und ks:subscribe](https://docs.kalender-sync.de/api/button/#seiten-die-später-rendern).

## Content-Security-Policy

Setzt deine Website eine Content-Security-Policy, muss sie das Script erlauben. Schränkt sie auch Styles und Bilder ein, braucht der Button zusätzlich Inline-Styles und `data:`-Bilder (das Microsoft-Icon ist im Script eingebettet):

```
script-src https://app.kalender-sync.de;
style-src 'unsafe-inline';
img-src data:;
```

Ergänze die Werte in deinen bestehenden Direktiven, statt sie zu ersetzen. `connect-src` und `frame-src` brauchst du nicht: Der Button schickt keine Anfragen, und die Menüeinträge sind normale Links.