# Embed the button

With the button, visitors subscribe to your calendar right on your website. One click opens the choice of calendar app, a second click creates the subscription.

## Live preview

Try color, text and language. The button below is real and belongs to a demo calendar. Copy the snippet underneath into your 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>
```

Replace `cal_XXXXXXXXXXXX` with the id of your calendar. You find it in your plugin or in the API response when the calendar was created (`id`). You need the `<script>` only once per page, even with several buttons.

## Options

| Attribute | Effect | Default |
|---|---|---|
| `data-calendar` | Id of your subscribe calendar. Required. | |
| `data-color` | Button color as a hex value, e.g. `#0f766e`. The text color adapts for good contrast. | `#2563eb` |
| `data-label` | Custom button text, e.g. "Subscribe to all classes". | "Subscribe to calendar" |
| `data-lang` | Menu language: `de` or `en`. | Language of your page |

## What the button does and doesn't do

- It shows the same app menu as the [subscribe page](https://docs.kalender-sync.de/en/abo-kalender/abo-seite/#supported-calendar-apps). "Other app" opens the subscribe page in a new tab, where the feed link has a copy button. The button itself sends no request to us for this.
- It sets **no cookies**, stores nothing in the browser and loads nothing besides the script itself. You don't need an entry in your cookie banner for it.
- It renders in its own space (shadow DOM). Your page's CSS doesn't change it, and its CSS doesn't change your page.
- The menu entries are plain links to Kalender Sync. Only the click creates the subscription and forwards to the calendar app.

## Clicks in your own analytics

We don't track visitors. If you want to know how often the button is used, you can measure it yourself, on your site and under your consent. On every click on an app, the button fires the `ks:subscribe` event. How to listen to it: [Button and ks:subscribe](https://docs.kalender-sync.de/en/api/button/#the-kssubscribe-event).

Without your own analytics you also see the number of clicks in the [statistics](https://docs.kalender-sync.de/en/abo-kalender/statistik/).

## Page builders and single-page apps

If your page renders content later (Elementor, Divi, React, Vue …), call `window.KalenderSync.mountButtons()` after inserting the button. Details under [Button and ks:subscribe](https://docs.kalender-sync.de/en/api/button/#pages-that-render-later).

## Content Security Policy

If your website sets a Content Security Policy, it must allow the script. If it also restricts styles and images, the button additionally needs inline styles and `data:` images (the Microsoft icon is embedded in the script):

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

Add the values to your existing directives instead of replacing them. You don't need `connect-src` or `frame-src`: the button sends no requests, and the menu entries are plain links.