How to add custom fields to Calendly bookings outside its widget?

Other Questions Calendly
1

I’m currently looking into ways to include additional fields in my Calendly booking forms that aren’t part of the standard widget. These custom fields should gather crucial details from users when they set appointments.

// Sample code to illustrate what I'm trying to accomplish
function sendBookingInfo() {
    const additionalInfo = {
        organization: document.getElementById('orgName').value,
        serviceType: document.getElementById('service').value,
        estimatedCost: document.getElementById('cost').value
    };

    // This data needs to accompany the Calendly booking
    forwardToCalendly(additionalInfo);
}

I want these extra fields to be included in the confirmation emails that both my clients and I receive after a booking is made. The default Calendly widget provides only basic data, but my business requires more targeted information.

I’ve referred to the guidelines regarding embedding questions in the iframe, but that isn’t quite what I am searching for. I need to create unique fields outside of the standard Calendly interface and still get that information transferred when a booking is confirmed.

Is it feasible to accomplish this using JavaScript or via their API? Has anyone managed to integrate extra custom fields into their booking data?

2

Been there. I prepopulate Calendly fields with URL parameters, then use automation to grab everything.

Collect your custom fields on your own page first. Then build the Calendly URL with prefill parameters like ?name=value&[email protected]. You can pass tons of data this way.

Set up a webhook listener for booking confirmations. When someone books, Calendly sends all the form data (including your prefilled custom fields) to your webhook endpoint.

I usually trigger my own email sequence with the collected info instead of using Calendly’s default emails. You get complete control over formatting and what data shows up.

This video shows exactly how to prepopulate fields and capture the data:

I’ve used this for enterprise clients who need service details, budget ranges, and project specs captured with standard booking info. Works every time and keeps the UX smooth.

3

calendly’s api lets you add custom questions straight to event types - it’s just buried in their docs. hit the /event_types/{uuid} endpoint and drop your questions into the booking_questions array. they’ll show up in the booking flow automatically. way cleaner than messing with external forms and webhooks.

4

I’ve handled this exact situation. Here’s what works: use Calendly’s webhook system with pre-filled URL parameters. Capture your custom fields on your form first, then redirect to Calendly with the data pre-filled through URL parameters. Set up a webhook to catch when someone books - that’s where you merge your custom data with Calendly’s booking info. I store the custom fields temporarily in session storage or database with a unique ID that follows the user through booking. When the webhook triggers, I pull that custom data and send my own confirmation emails instead of using Calendly’s default ones. You keep full control over what data you collect and how it looks to clients.

5

Here’s what works for me: combine Calendly’s invitee_uri parameter with their webhooks. First, collect your custom fields on your own landing page and create a unique reference ID. When you send users to Calendly, add that ID to the URL like calendly.com/yourlink?invitee_uri=customref123. Store your custom data server-side using that reference ID. After someone books, Calendly’s webhook will include the invitee_uri in the payload. Just match it back to your stored data. You keep Calendly’s smooth booking flow but get access to extra info for confirmation emails and internal tracking. The trick is linking your custom fields to Calendly’s booking data through that reference ID.