How to pre-fill invitee information in an embed

If your site already collects information like name or email, you can pass that data into your Calendly embed. This saves users time and creates a smoother booking experience by filling in the form automatically.

This guide shows how to use Calendly’s advanced embed to pre-fill invitee details.

Details you can pre-fill

Calendly supports pre-filling these fields:

• Full name, or first and last name (if collected separately)
• Email address
• Answers to up to 10 invitee questions
• Custom fields (labeled a1–a10) used in your event questions

Add prefill data to an advanced embed

To pre-fill invitee info, use the advanced JavaScript embed (Calendly.initInlineWidget) and include the prefill field.

Example:

<div id="calendly-embed-element"></div>
<script src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js"></script>
<script>
  Calendly.initInlineWidget({
    url: 'https​:​//calendl​y.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>

Replace YOUR_USERNAME with your actual Calendly link. Update the fields with your invitee’s information.

Pre-fill from a custom form or URL

If your site collects data from a form or URL, use JavaScript to grab that data and pass it into the embed.

Example: Get values from the 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​:​//calendl​y.com/YOUR​_USERNAME'​,
  parentElement: document.getElementById('calendly-embed-element'),
  prefill: {
    name: nameValue,
    email: emailValue
  }
});
</script>

Also include this script:

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

Use first and last name separately

If your event collects first and last name as separate fields, use:

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

Pre-fill answers to custom questions

If your event includes invitee questions, they’ll be labeled a1 through a10. Use the customAnswers object to pass answers.

Example:

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

The order of your questions in Calendly determines which field maps to each label.