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
Abschnitt betitelt „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.
Ersetze cal_XXXXXXXXXXXX durch die ID deines Kalenders. Demo-Abo-Seite öffnen
Snippet
Abschnitt betitelt „Snippet“<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
Abschnitt betitelt „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
Abschnitt betitelt „Was der Button tut und was nicht“- Er zeigt die gleiche App-Auswahl wie die Abo-Seite. „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
Abschnitt betitelt „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.
Ohne eigenes Analytics siehst du die Zahl der Klicks auch in der Statistik.
Page-Builder und Single-Page-Apps
Abschnitt betitelt „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.
Content-Security-Policy
Abschnitt betitelt „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.