Comment préremplir les informations de l'invité dans une intégration

Si votre site collecte déjà des informations telles que le nom ou l'e-mail, vous pouvez transmettre ces données dans votre intégration Calendly. Cela permet aux utilisateurs de gagner du temps et de créer une expérience de réservation plus fluide en remplissant automatiquement le formulaire.

Ce guide montre comment utiliser l'intégration avancée de Calendly pour préremplir les détails de l'invité.

Détails que vous pouvez préremplir

Calendly prend en charge le préremplissement de ces champs :

• Nom complet ou nom et prénom (s'ils sont collectés séparément)
• Adresse e-mail
• Réponses à un maximum de 10 questions aux invités
• Champs personnalisés (étiquetés a1 à a10) utilisés dans vos questions relatives à l'événement

Ajouter des données de préremplissage à une intégration avancée

Pour préremplir les informations du participant, utilisez l'intégration JavaScript avancée (Calendly.initInlineWidget) et incluez le champ de préremplissage.

Exemple :

<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',
      email: 'john@example.com',
      customAnswers: {
        a1: 'Yes',
        a2: 'At the office'
      }
    }
  });
</script>

Remplacez YOUR_USERNAME par votre lien Calendly actuel. Mettez à jour les champs avec les informations de votre invité.

Préremplir à partir d'un formulaire ou d'une URL personnalisés

Si votre site collecte des données à partir d'un formulaire ou d'une URL, utilisez JavaScript pour récupérer ces données et les passer dans l'intégration.

Exemple : récupérer des valeurs depuis l'URL

<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,
    email: emailValue
  }
});
</script>

Incluez également ce script :

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

Utilisez le prénom et le nom de famille séparément

Si votre événement collecte le prénom et le nom de famille dans des champs distincts, utilisez :

prefill: {
  firstName: "Jane",
  lastName: "Smith",
  email: "jane@example.com"
}

Pré-remplissez des réponses aux questions personnalisées

Si votre événement comprend des questions aux invités, elles seront étiquetées de a1 à a10. Utilisez l'objet customAnswers pour transmettre des réponses.

Exemple :

customAnswers : {
  a1 : « Oui »,
  a2 : « Zoom »,
  a3 : « Aucune restriction alimentaire »
}

L'ordre de vos questions dans Calendly détermine quel champ correspond à chaque étiquette.