How to pre-fill invitee information in an embed
- Available to:
- All users
- Plans:
- Free, Essentials, Professional, Standard, Teams with SSO add-on, and Enterprise
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.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>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://calendly.com/YOUR_USERNAME', parentElement: document.getElementById('calendly-embed-element'), prefill: { name: nameValue, email: emailValue }});</script>Also include this script:
<script src="https://assets.calendly.com/assets/external/widget.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.