Erweiterte Calendly-Einbettung für Entwickler

Steuern Sie, wie Calendly auf Ihrer Website funktioniert. Verwenden Sie die erweiterte JavaScript-Einbettung, um anzupassen, wie und wann Calendly erscheint. Sie können Informationen zu eingeladenen Personen vorab ausfüllen, Ereignisse verfolgen, Details ausblenden und mehr.

Einbetten mit JavaScript einrichten

Fügen Sie Calendly zu einem bestimmten Element Ihrer Seite hinzu:

Calendly.initInlineWidget({
url: 'https​:​//calendl​y.com/YOUR​_LINK',
parentElement: document.getElementById('calendly-embed')
});

Erforderliche Einrichtung:

1. Fügen Sie das Calendly-Skript in Ihr HTML-Dokument ein:

<script src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js" type="text/javascript"></script>

2. Fügen Sie ein Container-Element zum Einbetten hinzu:

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>

Fügen Sie parentElement ein, um zu steuern, wo die Einbettung erscheint. Ohne sie wird Calendly am Ende Ihrer Webseite geladen.

Buchungsantworten vorab ausfüllen

Erfahren Sie mehr über das vorher Ausfüllen von Buchungsantworten.

Die Größe der Calendly-Einbettung automatisch anpassen.

Standardmäßig hat die Einbettung eine feste Höhe. Wenn der Inhalt länger ist, kann er innerhalb des Widgets gescrollt werden. Sie können die Höhe automatisch anpassen.

Standard-Einbettung verwenden

<div class="calendly-inline-widget"
data-url="https​:​//calendl​y.com/YOUR​_LINK"
data-resize="true"
style="min-width:320px;height:700px;"></div>

Erweiterte JavaScript-Einbettung verwenden

Calendly.initInlineWidget({
url: 'https​:​//calendl​y.com/YOUR​_LINK',
parentElement: document.getElementById('calendly-embed'),
resize: true
});

Wichtig:

• Verwenden Sie nur eine automatische Größenanpassungseinbettung pro Seite, um Layoutprobleme zu vermeiden.
• Vermeiden Sie Dropdowns in Buchungs- oder Weiterleitungsformularen, wenn Sie die automatische Größenanpassung verwenden.

Profilinformationen oder das Cookie-Banner ausblenden

Erfahren Sie, wie Sie Ihre Einbettung anpassen können, um Profilinformationen oder das Cookie-Banner auszublenden. 

Aktionen mit postMessage verfolgen

Calendly sendet Ereignisse, wenn jemand mit der Einbettung interagiert. Sie können diese überwachen, um Aktionen auszulösen oder das Verhalten zu verfolgen.

Gesendete Ereignisse:

• calendly.profile_page_viewed
• calendly.event_type_viewed
• calendly.date_and_time_selected
• calendly.event_scheduled

Beispiel:

function isCalendlyEvent(e) {
return e.origin === "https​:​//calendl​y.com" && e.data.event?.startsWith("calendly.");
}

window.addEventListener("message", function(e) {
if (isCalendlyEvent(e)) {
console.log("Calendly Event:", e.data.event);
console.log("Event Details:", e.data.payload);
}
});

Calendly verwendet window.postMessage(), um diese Ereignisse an das übergeordnete Fenster zu senden.

Ein Iframe verwenden (alternative Methode)

Calendly lädt standardmäßig in einem iFrame. Wenn Sie möchten, können Sie Calendly mit direktem iFrame-Code einbetten:

<iframe src="https​:​//calendl​y.com/YOUR​_SCHEDULIN​G_LINK"
style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>

Hinweis: Iframes unterstützen keine automatische Größenanpassung oder Ereignisverfolgung via postMessage.