I have WordPres site. One of page of this site I have few Calendly widgets that clienst can choose by using Tabs. 

After the user submits a request using the widget, I take the response from the server and show them the date of the booked appointment in a popup window.

https://monosnap.com/file/g1ixOsdIlSmRPGarW85fXKqaotXObp

https://monosnap.com/file/aTO58rgk1HtFrhYpBkGhBUjtANO3sB

My code

window.addEventListener("message", function (event) {

    if (event.origin.includes("calendly.com")) {
        const data = event.data;
        if (data.event && data.event === "calendly.event_scheduled") {
            console.log("Event scheduled:", data.payload);


            const eventUri = data.payload.event.uri;
            const inviteeUri = data.payload.invitee.uri;

            // Getting event details via API
            fetchCalendlyEventDetails(eventUri, inviteeUri);
        }
    }
});



async function fetchCalendlyEventDetails(eventUri, inviteeUri) {


    try {
        const eventId = eventUri.split("/").pop();
        const inviteeId = inviteeUri.split("/").pop();
        console.log('currentDomain =', currentDomain);

        /// SiteToken -
        let token = 'eyJraWQiOiIxY2UxZTEzNjE3ZGNmNzY2YjNjZWJjY2Y4ZGM1YmFmYThhNjVlNjg0MDIzZjdjMzJiZTgzNDliMjM4MDEzNWI0IiwidHlwIjoiUEFUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguY2FsZW5kbHkuY29tIiwiaWF0IjoxNzMzODUxMTgyLCJqdGkiOiI4MjhlMDg1My1jMTY2LTRlZWEtYmRiOS03ZDJhMGU5MzhlMGMiLCJ1c2VyX3V1aWQiOiIwMmVlZItYmU1My02MzRlZTM0ZTFkOTAifQ.FABaJbfDoMOV1kEm0a-F8fV_YFbO0OI33ZLlThXWpcyB87ozwt_6GOlIiH7';

        const headers = {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${encodeURIComponent(token)}`
        };


        const eventResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}`, { headers });
        const inviteeResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}/invitees/${inviteeId}`, { headers });


        if (!eventResponse.ok || !inviteeResponse.ok) {
            console.error(`Request error: ${eventResponse.status}, ${inviteeResponse.status}`);
            alert('You have problem with connect with Calendly ')
            return;
        }

        const eventData = await eventResponse.json();
        const inviteeData = await inviteeResponse.json();

        if (!eventData || !eventData.resource || !eventData.resource.start_time) {
            console.error("Incorrect event data:", eventData);
            return;
        }

        const startTime = eventData.resource.start_time;
        const date = new Date(startTime);


        const formattedStartTime = date.toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        });

        const formattedStartDate = date.toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        });

        console.log('Seance = ' + formattedStartTime + " " + formattedStartDate );

        /// SET UP Date of seance into Popup window
        if(document.querySelector('.date-box').length !== 0){
            document.querySelector('.date-box_date').textContent = formattedStartDate;
            document.querySelector('.date-box_time').textContent = formattedStartTime;

            if($("#popup-thank").length !== 0){
                Fancybox.show(({ src: "#popup-thank", type: "inline" }]); /// Show popup
            } else {
                console.log('I can not find popup #popup-thank')
            }

        }



    } catch (error) {
        console.error("Error when retrieving appointment data:", error);
    }
}

Everything worked correctly as long as the form was one on the site page. But when there are several of them, I get a 403 server error in the response from the server. What can it be connected with and how can it be fixed?