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.

Live preview

ColorButton text

Loading the button…

Snippet for your websiteCopy

Replace cal_XXXXXXXXXXXX with the id of your calendar. Open the demo subscribe page

Snippet

<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. “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.

Without your own analytics you also see the number of clicks in the statistics.

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.

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.