'useCalendlyEventListener Not receiving events

Code Snippet:

import {
    InlineWidget,
    useCalendlyEventListener,
    EventScheduledEvent
} from 'react-calendly';

const CalendlyWidget = observer(
    ({
        visitTypeForSpecificEvent,
        onScheduled,
        calendlyProfileUrl,
        prefill
    }: IProps) => {
        const recordEvent = (e: EventScheduledEvent) => {
            console.log('Event Recorded');
            onScheduled(e.data.payload.event.uri);
        };

        useCalendlyEventListener({
            onEventScheduled: recordEvent
        });

        const baseURL = "https://calendly.com/test/call-back";

        const myUrl = new URL(baseURL);

        myUrl.searchParams.append('embed_domain', 'localhost:3000');
        myUrl.searchParams.append('embed_type', 'Inline');

        return (
            <div>
                <InlineWidget
                    url={calendlyProfileUrl}
                    pageSettings={{
                        hideGdprBanner: true,
                        primaryColor: 'FF585B'
                    }}
                    prefill={prefill}
                />
            </div>
        );
    }
);

export default CalendlyWidget;

The calendlyProfileURL:

https://calendly.com/test/call-back?embed_domain=localhost%3A3000&amp;embed_type=Inline&amp;primary_color=FF585B&amp;hide_gdpr_banner=1&amp;embed_type=Inline&amp;embed_domain=1"

React Calendly: v4.0 Used Next.js

The inline widget is working as expected but the useCalendlyEventListener is not being triggered at all.

Github issue: https://github.com/tcampb/react-calendly/issues/114



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source