How to retrieve selected appointment details from embedded Calendly widget

Other Questions Calendly
1

I’m working with a Calendly popup widget on my website using this setup:

Calendly.showPopupWidget({
  url: 'https://calendly.com/team-support/consultation-meeting?embed_domain=my-site.com&embed_type=popup&back=1&month=2020-11',
  parameters: {}
}, false);

After a visitor picks their preferred date and time slot, I want to capture that scheduling data directly on my webpage. Is there a way to access the appointment details like the selected date, time, and maybe other booking information once the user completes their scheduling? I need this data to update my own database and send custom confirmation messages. Any suggestions on how to implement this would be really helpful.

2

You can grab booking details from Calendly’s widget using a postMessage listener. Just set it up to catch the data when someone completes a booking:

window.addEventListener('message', function(e) {
  if (e.origin !== 'https://calendly.com') return;
  if (e.data.event === 'calendly.event_scheduled') {
    const appointmentData = e.data.payload;
    console.log(appointmentData);
  }
});

This will log the appointment data - invitee info, scheduled time, and all that stuff. Make sure you add the listener before displaying the widget or you’ll miss the booking event.

3

Yeah, listening for postMessage API events works, but managing all the webhook data and database updates manually becomes a nightmare once you scale up.

Been there. You end up writing tons of custom code - handling Calendly webhooks, parsing appointment data, updating databases, triggering confirmation emails, syncing with other systems. Then you’re stuck maintaining all that code.

Better approach? Automate the whole thing. Someone books through your Calendly widget, and you automatically capture that data, process it however you want, update multiple databases, send personalized emails, create tasks in project management tools - whatever your business needs.

I’ve set up workflows where one Calendly booking triggers 5-6 different actions across various platforms. No custom coding needed, just visual automation that handles everything reliably.

You can build this at https://latenode.com

4

hey, u can use the postMessage API to get the sched details. just set up an event listener for ‘calendly.event_scheduled’ and you’ll get the date and time sent to ur page. ensure ur widget is configured right!