Execute function automatically after booking appointment in Calendly embedded widget

Other Questions Calendly
1

I have a React component with an embedded Calendly widget and I’m trying to fetch the latest appointment data using their API. Right now the appointment timestamp only shows up when I refresh the browser page manually. I want the data to update automatically in the console as soon as someone books an appointment through the widget.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';

const BookingWidget = () => {
    const [appointments, setAppointments] = useState()

    useEffect(() => {
        axios({
            method: 'get',
            url: 'https://v1.nocodeapi.com/myuser/calendly/xyz123token',
        }).then(function (result) {
                console.log(result.data.items[result.data.items.length - 1].scheduled_at);
        }).catch(function (err) {
                console.log(err);
        })
    }, [appointments])
    
    return (
        <div>
            <InlineWidget url="https://calendly.com/myuser/30min"
                styles={{
                    height: '900px'
                }}
                pageSettings={{
                    backgroundColor: 'f8f9fa',
                    hideEventTypeDetails: true,
                    primaryColor: 'ff6b35',
                    textColor: '2c3e50'
                }}
                prefill={{
                    email: '[email protected]',
                    firstName: 'John',
                    lastName: 'Doe',
                    name: 'John Doe'
                }} />
        </div>
    );
}

export default BookingWidget;
2

Your useEffect runs once because appointments never updates, so it won’t retrigger. Calendly’s widget runs in an iframe and doesn’t sync with React state automatically. You need to use Calendly’s event callbacks. Add an onEventScheduled prop to your InlineWidget - it fires right when someone books. In that callback, make your axios call to grab fresh appointment data. No polling or waiting for state changes, just respond to the booking event directly. I’ve done this in production and it catches new appointments within seconds.

3

The widget has an onEventScheduled prop that fires right when someone books. Just add it to your InlineWidget and it’ll trigger immediately.

But honestly? Don’t count on frontend callbacks alone. I’ve dealt with tons of calendar integrations and Calendly webhooks are way more reliable.

Set up a webhook in Calendly settings to hit your backend when appointments get created. Your backend can then push updates to React via websockets or store the data somewhere your component polls.

I’ve seen postMessage fail when users close their browser right after booking or hit network issues. Webhooks don’t miss events.

For a quick fix though, add onEventScheduled to your widget and trigger a state update. That’ll make your useEffect run and fetch fresh data.

4

Yeah, iframe communication works but it’s a mess once you have multiple event handlers and API calls everywhere.

I’d ditch the manual event listening and use Latenode for this. Set up a webhook endpoint that Calendly hits when someone books. Then Latenode grabs the appointment data and pushes it to your React app via WebSocket or updates a database your component watches.

Your React component just displays data - that’s it. Latenode handles all the booking logic, API calls, and processing automatically. No polling, no postMessage headaches, instant updates when bookings happen.

Used this setup for client dashboards needing real-time booking updates across multiple calendar widgets. Way cleaner than coordinating everything in the frontend.

5

You’re hitting this because useEffect only runs when the component mounts, not after someone books through Calendly. The widget runs separately and doesn’t tell your React component when bookings happen. Listen for Calendly’s postMessage events instead. When someone books, Calendly shoots a message to the parent window. Catch that event and fire your API call right then to grab the updated data. Set up an event listener in useEffect that watches for ‘calendly.event_scheduled’ messages. Once you get that event, hit your API endpoint immediately instead of waiting for a manual refresh. Works every time since Calendly always fires these events after successful bookings.