Calendly prefilled links let you pass guest information directly in the URL, reducing friction in the booking process. Pre-fill names, emails, and custom question responses.
Key Takeaways
- 1Add query parameters to any Calendly event URL
- 2Pre-fill name, email, and custom questions
- 3Guest sees their info already filled when booking
- 4UTM parameters work for tracking marketing campaigns
- 5Parameters are case-sensitive—use exact field names
Basic Prefilled Link
The simplest way to use Calendly prefilling is to add name and email parameters to your event URL. When the guest clicks your link, they see their information already entered, saving them time and reducing booking abandonment.
https://calendly.com/your-name/30min?name=John%20Doe&email=john@example.com<a href="https://calendly.com/your-name/30min?name=John%20Doe&email=john@example.com">
Book a Call with John
</a>This HTML anchor tag can be embedded anywhere. When clicked, it opens the Calendly booking page with the guest's name and email already filled in.
Available Parameters
Calendly supports several parameters for prefilling booking information. The table below shows each parameter and how to format its value.
| Parameter | Description | Example |
|---|---|---|
name | Guest full name | name=John%20Doe |
email | Guest email address | email=john%40example.com |
first_name | Guest first name only | first_name=John |
last_name | Guest last name only | last_name=Doe |
a1 | Answer to first custom question | a1=Acme%20Inc |
a2 | Answer to second custom question | a2=Marketing |
guests | Additional guest emails (comma-separated) | guests=a%40co.com,b%40co.com |
Remember to URL-encode special characters like spaces and @ symbols. Use %20 for spaces and %40 for the @ symbol in email addresses.
Custom Question Answers
Beyond basic contact information, you can prefill answers to the custom questions you have added to your Calendly event. This is especially useful when you already know details about the guest, such as their company or meeting topic.
If your Calendly event has custom questions, pre-fill them with a1, a2, etc.:
https://calendly.com/your-name/30min?name=Jane%20Smith&email=jane@startup.com&a1=Startup%20Inc&a2=Product%20Demo<!-- Event with custom questions:
Q1: "Company Name" → a1
Q2: "What would you like to discuss?" → a2
-->
<a href="https://calendly.com/your-name/30min?name=Jane%20Smith&email=jane@startup.com&a1=Startup%20Inc&a2=Product%20Demo">
Schedule Your Demo
</a>The a1 parameter maps to your first custom question, a2 to the second, and so on. Make sure the parameter number matches the question order in your Calendly event settings.
UTM Tracking
Tracking which marketing channels drive bookings is essential for measuring campaign ROI. Calendly passes UTM parameters through to your analytics, giving you visibility into what is working.
Add UTM parameters to track where bookings come from:
https://calendly.com/your-name/30min?utm_source=newsletter&utm_medium=email&utm_campaign=january_promofunction createCalendlyLink(options) {
const { baseUrl, name, email, company, utmSource, utmCampaign } = options;
const url = new URL(baseUrl);
if (name) url.searchParams.set('name', name);
if (email) url.searchParams.set('email', email);
if (company) url.searchParams.set('a1', company); // First custom question
if (utmSource) url.searchParams.set('utm_source', utmSource);
if (utmCampaign) url.searchParams.set('utm_campaign', utmCampaign);
return url.toString();
}
// Usage
const link = createCalendlyLink({
baseUrl: 'https://calendly.com/sales-team/demo',
name: 'John Doe',
email: 'john@bigcorp.com',
company: 'BigCorp',
utmSource: 'linkedin',
utmCampaign: 'q1_outreach'
});This function combines guest information with tracking parameters into a single URL. Use it in your CRM or email marketing system to generate personalized booking links at scale.
React Component
If you are building a React application, this component encapsulates the URL construction logic and makes it easy to create Calendly buttons with consistent prefilling behavior.
interface CalendlyButtonProps {
eventUrl: string;
name?: string;
email?: string;
customAnswers?: Record<string, string>; // { a1: 'value', a2: 'value' }
utmParams?: Record<string, string>;
children: React.ReactNode;
className?: string;
}
function CalendlyButton({
eventUrl,
name,
email,
customAnswers,
utmParams,
children,
className
}: CalendlyButtonProps) {
const href = useMemo(() => {
const url = new URL(eventUrl);
if (name) url.searchParams.set('name', name);
if (email) url.searchParams.set('email', email);
if (customAnswers) {
Object.entries(customAnswers).forEach(([key, value]) => {
url.searchParams.set(key, value);
});
}
if (utmParams) {
Object.entries(utmParams).forEach(([key, value]) => {
url.searchParams.set(key, value);
});
}
return url.toString();
}, [eventUrl, name, email, customAnswers, utmParams]);
return (
<a href={href} target="_blank" rel="noopener noreferrer" className={className}>
{children}
</a>
);
}
// Usage
<CalendlyButton
eventUrl="https://calendly.com/sales/30min"
name="John Doe"
email="john@company.com"
customAnswers={{ a1: 'Company Inc', a2: 'Enterprise' }}
utmParams={{ utm_source: 'website', utm_campaign: 'pricing_page' }}
>
Book a Demo
</CalendlyButton>The component uses useMemo to rebuild the URL only when props change, avoiding unnecessary recalculations on each render.
Embedded Calendly Widget
If you embed Calendly directly on your website rather than linking to it, you can still use prefilling. The same parameters work in the widget URL, and you can also use the JavaScript API for more control.
Prefill also works with the embedded Calendly widget:
<!-- Inline embed with prefilled data -->
<div
class="calendly-inline-widget"
data-url="https://calendly.com/your-name/30min?name=John%20Doe&email=john@example.com"
style="min-width:320px;height:700px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>// JavaScript widget with dynamic prefill
Calendly.initPopupWidget({
url: 'https://calendly.com/your-name/30min',
prefill: {
name: 'John Doe',
email: 'john@example.com',
customAnswers: {
a1: 'Acme Corp',
a2: 'Sales inquiry'
}
},
utm: {
utmSource: 'website',
utmCampaign: 'demo_cta'
}
});The JavaScript widget API provides a cleaner way to handle prefilling programmatically. Use it when you need to populate fields dynamically based on user data from your application.
Best Practices
These practices help you create reliable prefilled links that work consistently across different scenarios and edge cases.
URL-encode all values
Spaces become %20, @ becomes %40. Use encodeURIComponent() in JavaScript.
Match custom question order
a1 maps to your first question, a2 to the second, etc.
Guests can edit prefilled data
Prefilled values are editable by the guest—they're suggestions, not locked values.
With these fundamentals in place, you can create personalized booking experiences that reduce friction and improve conversion rates. The FAQ below addresses specific questions about Calendly prefilling behavior.
Try the URL Builder
Use our Calendly Event template to build booking links interactively.