So füllen Sie die Informationen einer eingeladenen Person in einer Einbettung aus

Wenn Ihre Website bereits Informationen wie Name oder E-Mail-Adresse erfasst, können Sie diese Daten in Ihre Calendly-Einbettung übergeben. Dies spart Benutzern Zeit und sorgt für ein reibungsloseres Buchungserlebnis, da das Formular automatisch ausgefüllt wird.

In diesem Leitfaden wird gezeigt, wie Sie die erweiterte Einbettung von Calendly verwenden können, um Details zu eingeladenen Personen vorab auszufüllen.

Details, die Sie vorab ausfüllen können

Calendly unterstützt das Vorabausfüllen dieser Felder:

• Vollständiger Name oder Vor- und Nachname (wenn separat erfasst)
• E-Mail-Adresse
• Antworten auf bis zu 10 Fragen von eingeladenen Personen
• Benutzerdefinierte Felder (beschriftet mit a1–a10), die in Ihren Ereignisfragen verwendet werden

Fügen Sie Daten zum Ausfüllen in eine erweiterte Einbettung hinzu

Um Informationen von eingeladenen Personen auszufüllen, verwenden Sie die erweiterte JavaScript-Einbettung (Calendly.initInlineWidget) und fügen Sie das Feld zum Ausfüllen hinzu.

Beispiel:

<div id="calendly-embed-element"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
  Calendly.initInlineWidget({
    url: 'https://calendly.com/YOUR_USERNAME',
    parentElement: document.getElementById('calendly-embed-element'),
    prefill: {
      Name: 'John Doe',
      E-Mail: 'john@example.com',
      customAnswers: {
        a1: 'Ja',
        a2: 'Im Büro'
      }
    }
  });
</script>

Ersetzen Sie YOUR_USERNAME durch Ihren tatsächlichen Calendly-Link. Aktualisieren Sie die Felder mit den Informationen Ihrer eingeladenen Person.

Ein benutzerdefiniertes Formular oder eine URL vorab ausfüllen

Wenn Ihre Website Daten von einem Formular oder einer URL erfasst, verwenden Sie JavaScript, um diese Daten abzurufen und an die Einbettung weiterzugeben.

Beispiel: Werte von der URL abrufen

<script>
function getUrlVars() {
  const vars = {};
  window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,k,v) {
    vars[k] = decodeURIComponent(v);
  });
  return vars;
}

const nameValue = getUrlVars()["name"];
const emailValue = getUrlVars()["email"];

Calendly.initInlineWidget({
  url: 'https://calendly.com/YOUR_USERNAME',
  parentElement: document.getElementById('calendly-embed-element'),
  prefill: {
    name: nameValue,
    E-Mail: emailValue
  }
});
</script>

Fügen Sie auch dieses Skript hinzu:

<script src="https://assets.calendly.com/assets/external/widget.js"></script>

Vor- und Nachname getrennt verwenden

Wenn Ihr Ereignis Vor- und Nachname als separate Felder erfasst, verwenden Sie Folgendes:

prefill: {
  firstName: "Jane",
  lastName: "Smith",
  E-Mail: "jane@example.com"
}

Antworten auf benutzerdefinierte Fragen vorab ausfüllen

Wenn Ihr Ereignis Fragen an eingeladene Personen enthält, werden diese von a1 bis a10 gekennzeichnet. Verwenden Sie das Objekt customAnswers, um Antworten zu übergeben.

Beispiel:

customAnswers: {
  a1: "Ja",
  a2: "Zoom",
  a3: "No dietary restrictions"
}

Die Reihenfolge Ihrer Fragen in Calendly bestimmt, welches Feld der jeweiligen Bezeichnung zugeordnet ist.