Calendly Embed Generator

Fügen Sie Ihren Calendly-Link ein und erhalten Sie einen kostenlosen Einbettungscode, der Ihren Buchungskalender auf Ihrer Website anzeigt – mit Ihrer Farbe und den Angaben, die Sie zeigen möchten. Keine Registrierung nötig.
Calendly Embed Generator
Ihre Terminseite oder der Link zu einem einzelnen Termin, z. B. https://calendly.com/your-name/30min
Mindestens 630 px, damit der Kalender nicht innen scrollt.

Buchungsseite einbetten

<div class="calendly-inline-widget" data-url="https://calendly.com/calendly-demo" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Erstellt mit <a href="https://de.elfsight.com/tools/calendly-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Klicken Sie oben auf Code kopieren, um ihn zu kopieren.
  2. Öffnen Sie die HTML-Datei oder die Vorlage der Seite.
  3. Fügen Sie den Code innerhalb von <body> ein, dort wo der Inhalt erscheinen soll.
  4. Speichern und laden Sie die Seite hoch und öffnen Sie sie zur Kontrolle im Browser.
Appointment Booking Widget

Nehmen Sie Buchungen direkt auf Ihrer Website entgegen

Zeigen Sie die Verfügbarkeit in Echtzeit und nehmen Sie Buchungen ohne Anrufe, E-Mails oder manuelle Abstimmung an. Leistungen, Preise und Dauer stehen auf einer Karte, sodass Kunden in Sekunden buchen.

  • Buchungen rund um die Uhr

  • Leistungen mit Preisen und Dauer

  • Zweiseitige Synchronisierung mit Google Calendar

Widget kostenlos erstellen
Keine Kreditkarte erforderlich
Mehr über Appointment Booking

Generator vs. Calendlys Share → Add to website

Beide erzeugen den offiziellen Calendly-Einbettungscode mit demselben Skript. Der Unterschied liegt darin, wo Sie ihn erstellen und welche Optionen Sie ohne manuelle Code-Bearbeitung festlegen können.
Calendlys Share → Add to website
Dieser Generator
Wo Sie den Code erstellen
In Ihrem Calendly-Konto
Hier, mit jedem öffentlichen Terminlink, ohne Anmeldung
Einbettungstypen
Inline-Embed, Popup-Widget, Popup-Text
Dieselben drei: Inline, Popup über Button oder Link, schwebendes Badge
Termindetails und Cookie-Banner ausblenden
Kontrollkästchen vor dem Kopieren des Codes
Schalter, die hide_event_type_details=1 und hide_gdpr_banner=1 hinzufügen
Name und E-Mail vorausfüllen
Bearbeiten Sie den Link von Hand oder nutzen Sie die JavaScript-Option prefill von Calendly
Felder, die name=, email= und a1= zum Link hinzufügen
Farben
Hintergrund-, Text- und Button-Farben in kostenpflichtigen Tarifen
Schreibt dieselben Farbparameter; Calendly wendet sie nur in kostenpflichtigen Tarifen an

Wo Sie den Code erstellen

Calendlys Share → Add to website

In Ihrem Calendly-Konto

Dieser Generator

Hier, mit jedem öffentlichen Terminlink, ohne Anmeldung

Einbettungstypen

Calendlys Share → Add to website

Inline-Embed, Popup-Widget, Popup-Text

Dieser Generator

Dieselben drei: Inline, Popup über Button oder Link, schwebendes Badge

Termindetails und Cookie-Banner ausblenden

Calendlys Share → Add to website

Kontrollkästchen vor dem Kopieren des Codes

Dieser Generator

Schalter, die hide_event_type_details=1 und hide_gdpr_banner=1 hinzufügen

Name und E-Mail vorausfüllen

Calendlys Share → Add to website

Bearbeiten Sie den Link von Hand oder nutzen Sie die JavaScript-Option prefill von Calendly

Dieser Generator

Felder, die name=, email= und a1= zum Link hinzufügen

Farben

Calendlys Share → Add to website

Hintergrund-, Text- und Button-Farben in kostenpflichtigen Tarifen

Dieser Generator

Schreibt dieselben Farbparameter; Calendly wendet sie nur in kostenpflichtigen Tarifen an

Calendly-Link-Parameter

Diese stehen nach dem ? in Ihrem Terminlink, verbunden mit &. Der Generator fügt sie für Sie hinzu; Sie können sie auch in jeden Calendly-Link eintippen.
Option
Was sie bewirkt
Werte
Hinweise
hide_event_type_details
Blendet Ihr Foto, Ihren Namen, die Termindauer, den Ort und die Beschreibung aus
1
Für einen Link zu einem Termintyp. Alle Tarife.
hide_landing_page_details
Blendet dieselben Angaben auf einer Seite aus, die alle Ihre Termine auflistet
1
Für eine persönliche oder Team-Landingpage. Bei beiden Parametern wird die Terminbeschreibung unter Umständen weiterhin angezeigt.
hide_gdpr_banner
Blendet das Cookie-Banner von Calendly aus
1
Nur, wenn Ihre eigene Website die Cookie-Einwilligung übernimmt (DSGVO, CCPA).
background_color, text_color, primary_color
Hintergrund, Text sowie Button- und Linkfarbe der Terminseite
Hex ohne #, z. B. 0069ff
Nur in kostenpflichtigen Calendly-Tarifen. Die Button-Beschriftung wechselt für den Kontrast zu Schwarz oder Weiß.
name, first_name, last_name, email
Füllt das Buchungsformular aus
Text; Leerzeichen als %20
Verwenden Sie first_name und last_name, wenn Ihr Formular sie getrennt abfragt.
a1, a2 …
Antworten auf Ihre eigenen Buchungsfragen
Text; bei Kontrollkästchen und Optionsfeldern die Nummer der Option, z. B. a3=2,3
Die Nummer ist die Position der Frage im Formular. „Sonstiges“-Felder und Nummern für SMS-Erinnerungen können nicht vorausgefüllt werden.
Button-text, color, textColor
Beschriftung und Farben des schwebenden Badges
Text; Hex mit #, z. B. #0069ff
Optionen von Calendly.initBadgeWidget, keine Link-Parameter. Calendly führt Farb- und Button-Textänderungen als Funktionen kostenpflichtiger Tarife auf.
branding
Fügt dem Badge die Zeile „powered by Calendly“ hinzu
true oder false
Nur für das Badge.
Inline-Größe
Der Rahmen, in dem der Inline-Scheduler sitzt
min-width:320px, Höhe etwa 700px
Erhöhen Sie die Höhe, wenn eine Scrollleiste erscheint, oder fügen Sie data-resize="true" hinzu, damit er mitwächst.

hide_event_type_details

Was sie bewirkt

Blendet Ihr Foto, Ihren Namen, die Termindauer, den Ort und die Beschreibung aus

Werte

1

Hinweise

Für einen Link zu einem Termintyp. Alle Tarife.

hide_landing_page_details

Was sie bewirkt

Blendet dieselben Angaben auf einer Seite aus, die alle Ihre Termine auflistet

Werte

1

Hinweise

Für eine persönliche oder Team-Landingpage. Bei beiden Parametern wird die Terminbeschreibung unter Umständen weiterhin angezeigt.

hide_gdpr_banner

Was sie bewirkt

Blendet das Cookie-Banner von Calendly aus

Werte

1

Hinweise

Nur, wenn Ihre eigene Website die Cookie-Einwilligung übernimmt (DSGVO, CCPA).

background_color, text_color, primary_color

Was sie bewirkt

Hintergrund, Text sowie Button- und Linkfarbe der Terminseite

Werte

Hex ohne #, z. B. 0069ff

Hinweise

Nur in kostenpflichtigen Calendly-Tarifen. Die Button-Beschriftung wechselt für den Kontrast zu Schwarz oder Weiß.

name, first_name, last_name, email

Was sie bewirkt

Füllt das Buchungsformular aus

Werte

Text; Leerzeichen als %20

Hinweise

Verwenden Sie first_name und last_name, wenn Ihr Formular sie getrennt abfragt.

a1, a2 …

Was sie bewirkt

Antworten auf Ihre eigenen Buchungsfragen

Werte

Text; bei Kontrollkästchen und Optionsfeldern die Nummer der Option, z. B. a3=2,3

Hinweise

Die Nummer ist die Position der Frage im Formular. „Sonstiges“-Felder und Nummern für SMS-Erinnerungen können nicht vorausgefüllt werden.

Button-text, color, textColor

Was sie bewirkt

Beschriftung und Farben des schwebenden Badges

Werte

Text; Hex mit #, z. B. #0069ff

Hinweise

Optionen von Calendly.initBadgeWidget, keine Link-Parameter. Calendly führt Farb- und Button-Textänderungen als Funktionen kostenpflichtiger Tarife auf.

branding

Was sie bewirkt

Fügt dem Badge die Zeile „powered by Calendly“ hinzu

Werte

true oder false

Hinweise

Nur für das Badge.

Inline-Größe

Was sie bewirkt

Der Rahmen, in dem der Inline-Scheduler sitzt

Werte

min-width:320px, Höhe etwa 700px

Hinweise

Erhöhen Sie die Höhe, wenn eine Scrollleiste erscheint, oder fügen Sie data-resize="true" hinzu, damit er mitwächst.

Calendly Help Center: So passen Sie Ihr Embed an ↗

Wenn der Scheduler nicht richtig aussieht

Der Inline-Scheduler hat eine eigene Scrollleiste oder ist abgeschnitten

Erhöhen Sie die Höhe im Code, z. B. auf 750px, oder fügen Sie data-resize="true" hinzu. Calendly empfiehlt nur ein automatisch skalierendes Embed pro Seite und dabei keine Dropdown-Fragen.

Auf der Seite erscheint nichts

Ihr Website-Baukasten entfernt möglicherweise <script>-Tags. Fügen Sie den Code in einen HTML- oder Custom-Code-Block ein, der Skripte beibehält, und prüfen Sie, ob sich der Link im Browser öffnet.

Das Popup öffnet sich als einfache Seite oder wirkt ungestaltet

Popup und Badge benötigen außerdem das Stylesheet von Calendly: Behalten Sie die Zeile widget.css aus dem generierten Code bei.

Farben ändern sich nicht

Farboptionen funktionieren nur in kostenpflichtigen Calendly-Tarifen. Schreiben Sie im Link Hex-Werte ohne #: primary_color=0069ff.

Ihr Name und die Termindetails erscheinen doppelt

Aktivieren Sie Termindetails ausblenden. Verwenden Sie hide_event_type_details=1 für einen Termin und hide_landing_page_details=1 für eine Seite mit allen Terminen.

Vorausgefüllte Felder bleiben leer

Prüfen Sie die Parameternamen (name, email, a1) und schreiben Sie Leerzeichen als %20. Antworten werden anhand der Position der Frage in Ihrem Buchungsformular zugeordnet.

Das schwebende Badge verdeckt einen anderen Button

Das Badge sitzt in der unteren rechten Ecke. Verschieben Sie es mit CSS: .calendly-badge-widget { right: auto !important; left: 20px !important; }

Inline, Popup oder Badge – was wählen

Typ
Was Besucher sehen
Gut geeignet für
Zu beachten
Inline
Die Terminseite direkt in Ihrer Seite
Eine eigene Seite „Anruf buchen“ oder „Kontakt“, auf der die Buchung die Hauptaktion ist
Braucht Platz: mindestens 320 px Breite und etwa 700 px Höhe
Popup über Button oder Link
Ihr eigener Button oder Textlink; der Scheduler öffnet sich über der Seite
Preis- und Leistungsseiten, auf denen die Buchung nur eine von mehreren Optionen ist
Platzieren Sie den Button dort, wo Menschen sich entscheiden; er übernimmt den Button-Stil Ihrer Website
Badge
Ein schwebender Button in einer Ecke jeder Seite, auf der er eingebunden ist; der Scheduler öffnet sich über der Seite
Websites, auf denen Besucher von jeder Seite aus buchen möchten
Kann sich mit einem Chat- oder Cookie-Button überlappen; verschieben Sie es mit CSS

Inline

Was Besucher sehen

Die Terminseite direkt in Ihrer Seite

Gut geeignet für

Eine eigene Seite „Anruf buchen“ oder „Kontakt“, auf der die Buchung die Hauptaktion ist

Zu beachten

Braucht Platz: mindestens 320 px Breite und etwa 700 px Höhe

Popup über Button oder Link

Was Besucher sehen

Ihr eigener Button oder Textlink; der Scheduler öffnet sich über der Seite

Gut geeignet für

Preis- und Leistungsseiten, auf denen die Buchung nur eine von mehreren Optionen ist

Zu beachten

Platzieren Sie den Button dort, wo Menschen sich entscheiden; er übernimmt den Button-Stil Ihrer Website

Badge

Was Besucher sehen

Ein schwebender Button in einer Ecke jeder Seite, auf der er eingebunden ist; der Scheduler öffnet sich über der Seite

Gut geeignet für

Websites, auf denen Besucher von jeder Seite aus buchen möchten

Zu beachten

Kann sich mit einem Chat- oder Cookie-Button überlappen; verschieben Sie es mit CSS

Alle drei laden dasselbe Skript, https://assets.calendly.com/assets/external/widget.js, und zeigen dieselbe Buchungsseite mit denselben Link-Parametern.

So betten Sie Calendly in Ihre Website ein

  1. Calendly-Link kopieren

    Kopieren Sie in Calendly den Link zu Ihrer Terminseite oder zu einem einzelnen Termin.

  2. Optionen wählen

    Wählen Sie die Farbe und was ausgeblendet werden soll.

  3. Code einfügen

    Fügen Sie den Code in einen HTML-Block ein, wo der Kalender erscheinen soll.

Häufig gestellte Fragen

Weitere Einbettungscode-Generatoren

YouTube-Einbettungscode-Generator

Fügen Sie einen beliebigen YouTube-Link ein und erhalten Sie in Sekunden einen responsiven Einbettungscode.YouTube-Einbettungscode-Generator

Video-Einbettungscode-Generator

Betten Sie ein Video ein, das überall liegen kann: MP4, Google Drive, Dropbox, Loom oder Wistia.Video-Einbettungscode-Generator

iFrame-Generator

Erstellen Sie einen responsiven iFrame für jede Seite, jedes Formular oder jede App.iFrame-Generator

PDF-Einbettungsgenerator

Zeigen Sie eine PDF-Speisekarte, Preisliste oder Broschüre direkt auf der Seite.PDF-Einbettungsgenerator