Website-Embed
Add to Calendar Button einbinden: kein Plugin, zwei Zeilen Code
Ein Add to Calendar Button bringt dein Event mit wenigen Klicks in Google, Outlook, Office 365, Yahoo oder Apple Kalender. ThisEvent liefert dir dafür ein fertiges Snippet aus zwei Zeilen Code, das du in deine Website kopierst.
Was macht ein Add to Calendar Button?
Der Button öffnet eine Auswahl der unterstützten Kalender. Nach der Auswahl wird der Termin entweder in einem Web-Kalender vorausgefüllt oder als ICS-Datei geöffnet. Der Gast muss Titel, Zeit, Ort und Beschreibung nicht selbst übertragen.
Ein einzelner Google-Kalender-Link reicht dafür nicht. Auf einer öffentlichen Website kennst du den Kalender deiner Besucher nicht. Der Button löst genau diese Auswahl an einer Stelle und hält deine Seite übersichtlich.
ThisEvent bietet Apple Kalender, Google Kalender, Office 365, Outlook Desktop, Outlook.com und Yahoo Kalender. Die passenden URLs und Dateien entstehen automatisch aus den Daten deines Events.
Button in fünf Schritten auf der Website einbinden
- Event erstellen: Lege Titel, Zeit, Zeitzone, Ort und Beschreibung in ThisEvent an.
- Event prüfen: Öffne die öffentliche Seite und teste die Kalenderauswahl mit den wichtigsten Zielkalendern.
- Embed auswählen: Im Dashboard kannst du den reinen Kalender-Button oder das größere Widget mit RSVP-Formular wählen.
- Code kopieren: Kopiere das bereitgestellte Snippet – ein Skript-Tag und ein Platzhalter-Element – in den HTML- oder Embed-Bereich deiner Website.
- Live testen: Prüfe den Button auf Desktop und Mobil, öffne das Menü vollständig und kontrolliere, ob deine Plattform eigenes HTML und Skripte erlaubt.
Du musst kein eigenes JavaScript schreiben und keine Kalender-API konfigurieren. Das eingebundene Skript lädt automatisch die aktuellen Daten deines Events. Änderungen am Event erscheinen dadurch im Button, ohne dass du den Code erneut kopieren musst.
Welches Widget passt zu deinem Zweck?
| Variante | Inhalt | Einbindung | Geeignet für |
|---|---|---|---|
| Kalender-Button | Button plus Auswahl von sechs Kalenderzielen | Skript-Tag plus Platzhalter-Element, fügt sich ohne festes Maß in dein Layout ein | Landingpages mit vorhandenem Anmeldeprozess |
| RSVP-Widget | Kalender-Button, Eventzeile und Zu-/Absageformular | iframe, 360 × 720 Pixel | Websites, auf denen Gäste direkt antworten sollen |
Beim RSVP-Widget (iframe) gibt die Höhe dem Formular und möglichen Fehlermeldungen genug Platz – verkleinere das Seitenverhältnis nicht so stark, dass Inhalte abgeschnitten werden. Der Kalender-Button hat dagegen kein festes Maß: Er steht als normales Element in deinem Layout und ist nur so breit wie sein Text. Das Dropdown misst beim Öffnen selbst, wie viel Platz nach unten bleibt.
Soll das größere Widget direkt Antworten sammeln, zeigt dir der Ratgeber, wie du einen RSVP-Link erstellst. Für reine Downloads findest du die Details im Ratgeber zur ICS-Datei.
Snippet, Plugin oder eigener Code?
| Ansatz | Vorteil | Nachteil |
|---|---|---|
| ThisEvent-Snippet | Schnell eingebaut, kein eigener Code und keine Providerlogik im eigenen Projekt | Für ein individuelles Design brauchst du eigenes CSS oder data-styling="none" |
| CMS-Plugin | Kann sich tief in WordPress oder ein anderes CMS integrieren | Zusätzliche Updates, Rechte und mögliche Konflikte mit dem Theme |
| Eigene Implementierung | Volle Kontrolle über Gestaltung und Datenfluss | Mehrere Kalenderformate, Zeitzonen und ICS müssen selbst gepflegt werden |
ThisEvent ist kein WordPress-Plugin. In WordPress, Webflow, Wix oder ähnlichen Systemen brauchst du einen Bereich für benutzerdefiniertes HTML oder ein Embed-Element. Wenn deine Plattform eigene Skripte oder HTML-Snippets blockiert, verlinke stattdessen die öffentliche Eventseite.
Warum der Button in E-Mails anders funktioniert
Einen Skript- oder iframe-Embed solltest du nicht in eine E-Mail kopieren. Viele E-Mail-Clients entfernen JavaScript und eingebettete Elemente aus Sicherheitsgründen. Was im Browser funktioniert, kann im Postfach leer bleiben oder vollständig verschwinden.
Verwende in E-Mails einen normalen Text- oder Bildlink zur öffentlichen Eventseite. Dort steht derselbe Add to Calendar Button bereit. Für eine Zielgruppe, die ausschließlich Microsoft 365 verwendet, kannst du zusätzlich einen direkten Outlook-Link anbieten.
Mehr zu den einzelnen Linkformaten findest du imRatgeber zum Erstellen von Kalenderlinks.
Barrierefreiheit: Der Button muss mehr als gut aussehen
Ein Kalender-Button ist eine zentrale Aktion. Er muss deshalb auch mit Tastatur und Screenreader verständlich bleiben. Ein sichtbarer Fokus, ein echter Button als Auslöser und klare Linkziele sind wichtiger als eine aufwendige Animation.
- Der Auslöser benennt die Aktion „Zum Kalender hinzufügen“.
- Der geöffnete Zustand wird technisch bekanntgegeben.
- Alle Kalendereinträge sind per Tabulatortaste erreichbar.
- Escape schließt das Menü und bringt den Fokus zum Auslöser zurück.
- Die Kalenderlogos sind nicht die einzige Information; jedes Ziel hat Text.
Diese Punkte sind im ThisEvent-Widget umgesetzt. Teste trotzdem, ob dein Website-Builder um das eingebundene Snippet herum einen sichtbaren Fokus oder einen unerwarteten Scrollbereich erzeugt.
Typische Probleme nach dem Einbetten
Das Menü wird abgeschnitten
Der Kalender-Button misst beim Öffnen automatisch, wie viel Platz nach unten bleibt, und klappt notfalls nach oben auf. Bleibt das Menü trotzdem abgeschnitten, prüfe einen umliegenden Container mit overflow: hidden. Nutzt du stattdessen das RSVP-Widget als iframe, verwende zuerst die von ThisEvent ausgegebenen 360 × 720 Pixel, bevor du sie anpasst.
Der Button ist auf Mobilgeräten zu breit
Der umgebende Container muss schrumpfen dürfen. Vermeide feste Mindestbreiten auf der Website und teste mindestens bei etwa 390 Pixel Viewportbreite.
Der Website-Builder entfernt den Code
Manche Editoren erlauben HTML nur in speziellen Embed-Blöcken oder in bezahlten Tarifen. Nutze den vorgesehenen HTML-Bereich. Wenn das nicht möglich ist, bleibt ein normaler Link zur Eventseite die robuste Alternative.
Änderungen erscheinen nicht
Das Widget lädt die Eventdaten von ThisEvent. Aktualisiere das Event im Dashboard und lade deine Website neu. Bereits von Gästen gespeicherte Kalendertermine ändern sich dadurch nicht automatisch.
Häufige Fragen zum Add to Calendar Button
Brauche ich für den Button ein Plugin?
Nein. ThisEvent liefert ein zweizeiliges Snippet – ein Skript-Tag und ein Platzhalter-Element –, das du in einen HTML- oder Embed-Bereich kopierst. Eine native CMS-Erweiterung ist nicht nötig.
Kann ich nur einen Kalender anzeigen?
Das Widget ist für die Auswahl aus allen unterstützten Kalendern gedacht. Einzelne Direktlinks findest du sowohl im Dashboard als auch auf der öffentlichen Eventseite und kannst sie als normalen Link verwenden.
Kann ich das Aussehen vollständig anpassen?
Ja. Der Button rendert sich als normales Element auf deiner Seite, nicht als iframe. Mit eigenem CSS auf den Klassen thisevent-atc, thisevent-atc__button, thisevent-atc__dropdown und thisevent-atc__item überschreibst du die Standardoptik. Mit data-styling="none" am Platzhalter-Element verzichtest du ganz auf das mitgelieferte Design und übernimmst die Gestaltung komplett selbst.
Werden Klicks gezählt?
ThisEvent zählt anonym, wie oft Kalenderziele auf der Eventseite und im Embed angeklickt werden. Im Dashboard siehst du die Aufteilung nach Anbieter und Quelle.