Übersicht über Einbettungsoptionen

Entwickler-Einbettungscode verwenden

Durch einen JavaScript-API-Aufruf können Sie eine Inline-Einbettung bei Bedarf erstellen. Dadurch können Sie das Erscheinungsbild der Einbettung verzögern, bis bestimmte Aktionen abgeschlossen sind oder bis Informationen erfasst werden, die zum Vorausfüllen des Buchungsformulars verwendet werden.

Erstellen Sie einen div-Container mit einer bestimmten ID auf Ihrer Website. Fügen Sie auch die Calendly-Javascript-Datei irgendwo auf Ihrer Website ein:

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"</script

Verwenden Sie dann diesen API-Aufruf und stellen Sie sicher, dass Sie den Mustertext durch Ihre div-ID ersetzen:

Calendly.initInlineWidget({
 url: 'https://calendly.com/YOURLINK',
 parentElement: document.getElementById('SAMPLEdivID'),
 prefill: {},
 utm: {}
});

Laden Sie die Inline-Einbettung automatisch, während Sie noch Fragen vorab ausfüllen oder UTM-Parameter festlegen. Verwenden Sie den folgenden Code:

<!-- Calendly inline widget begin --

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

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"/

<script
Calendly.initInlineWidget({
url: 'https://calendly.com/YOURLINK',
parentElement: document.getElementById('calendly-embed')
});
</script

<!-- Calendly inline widget end --

Achten Sie darauf, das parentElement einzufügen, da sonst die Einbettung immer ganz unten auf Ihrer Webseite geladen wird.

Ereignisdetails ausblenden

Entfernen Sie alle Informationen, die durch den Inhalt Ihrer Webseite dupliziert werden, indem Sie die Ereignisdetails ausblenden, wie z. B. Ihr Calendly-Kontobild, Ihren Namen oder den Ereignisort. Fügen Sie dem Code je nach Art des Planungslinks, den Sie einbetten, einen der folgenden URL-Parameter hinzu:

Einen Profil- oder Teamseitenlink:

Einen für den Ereignistyp spezifischen Link:

Das Cookie-Banner in der Einbettung ausblenden

Standardmäßig wird im Rahmen der Seite, die Calendly lädt, ein Cookie-Banner angezeigt. Ohne Änderungen an Ihrer Website bleiben Sie mit dem Banner mit den Datenschutzbestimmungen weltweit (DSGVO, CCPA usw.) konform, wenn Benutzer Ihre Seite besuchen und mit dem Calendly-Widget interagieren. Calendly bietet Ihnen die Möglichkeit, das Cookie-Banner als konfigurierbare Eigenschaft auszublenden, wenn Sie Ihre Calendly-Buchungsseite einbetten.

Durch das Ausblenden des Banners übernimmt Ihre Website jedoch die Verantwortung für die Verwaltung der Kundenpräferenzen, um die Einhaltung der globalen Datenschutzbestimmungen zu gewährleisten. Wenn Calendly eingebettet und das Banner ausgeblendet ist, verwendet Calendly weiterhin Cookies. Daher empfehlen wir, das Laden von Calendly zu verhindern, es sei denn, die Benutzer haben sich aktiv per Opt-in für Performance-Cookies entschieden.

So blenden Sie das Cookie-Banner in Ihrem vorhandenen Einbettungscode aus:

1. Wenn Sie Calendly bereits auf Ihrer Website eingebettet haben, greifen Sie im HTML-Editor auf Ihrer Website auf Ihren Calendly-Einbettungscode zu.
2. Fügen Sie Ihrem Calendly-Link in Ihrem Einbettungscode den folgenden Paramter hinzu: hide_gdpr_banner=1

Der endgültige Code sieht etwa wie folgt aus:

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT?hide_gdpr_banner=1" style="min-width:320px;height:630px;"</div<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"</script

So blenden Sie das Cookie-Banner aus, wenn Sie einen neuen Einbettungscode für Ihre Website erstellen:

Folgen Sie den Schritten unter Calendly auf Ihrer Website einbetten. Wählen Sie unbedingt Hide Cookie Banner (Cookie-Banner ausblenden) aus, bevor Sie den Code kopieren:

Übergeordnetes Fenster benachrichtigen

Auf der eingebetteten Planungsseite wird das übergeordnete Fenster während des Buchungsablaufs über wichtige Ereignisse benachrichtigt. Als Entwickler können Sie diese Benachrichtigungen abonnieren, um Analyseereignisse auszulösen oder den Status Ihrer App zu ändern.

Wir verwenden window.postMessage(), um Ereignisse im übergeordneten Fenster zu posten. Bei der Ereignis-Payload handelt es sich um ein JavaScript-Objekt des folgenden Formats, wobei XXX der Name des Buchungsablauf-Ereignisses ist:

{ event: 'calendly.XXX' }

Hier sind die Ereignisse, die Calendly auslöst, wenn eine eingeladene Person dem Buchungsablauf folgt:

Dieser Beispielcode hört auf diese Ereignisse und protokolliert sie in der Konsole:

function isCalendlyEvent(e) {
  return e.origin === "https://calendly.com" && e.data.event && e.data.event.indexOf("calendly.") === 0;
};
 
window.addEventListener("message", function(e) {
  if(isCalendlyEvent(e)) {
    /* Beispiel, um den Namen des Ereignisse abzurufen */
    console.log("Event name:", e.data.event);
    
    /* Beispiel, um Payload des Ereginisses abzurufen */
    console.log("Event details:", e.data.payload);
  }
});

Fragen im Voraus ausfüllen 

Falls Sie bereits Informationen von Besuchern Ihrer Website erfasst haben, können Sie diese auf dem Buchungsformular vorpopulieren, indem Sie die Javascript-Aufrufe im Einbettungscode ändern. Vorfüllparameter werden mit der folgenden Struktur festgelegt:

prefill: {
    name:
    email:
    customAnswers:
}

Verwendet Ihr Ereignistyp separate Vor- und Nachnamenfelder, können Sie firstName und lastName statt name verwenden.

Sie können auch benutzerdefinierte Antworten auf Fragen der eingeladenen Personen festlegen, die Ihrem Ereignistyp hinzugefügt werden. Jede benutzerdefinierte Antwort wird in Folge nummeriert als a1, a2, a3 usw. bis zu a10.

prefill: {
    customAnswers: {
        a1:
        a2:
        a3:
    }  
}

<script
    Calendly.initInlineWidget({
        url: 'https://calendly.com/YOUR_LINK/30min',
        prefill: {
            name: "John Doe",
            email: "john@doe2.com",
            customAnswers: {
                a1: "Yes",
                a2: "At the Starbucks on 3rd and 16th"
            }
        }         
   });
</script