Skip to main content

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?

 

Hey there! 👋

It sounds like you're running into a 403 error when using multiple Calendly widgets on the same WordPress page, and that can definitely be frustrating. Here’s a quick rundown of what might be happening and how to fix it:

Possible Causes:

  1. Rate Limiting: Calendly might be blocking multiple API requests coming in too quickly. Too many simultaneous requests can hit their rate limits.

  2. Token Conflicts: If you're using the same API token for multiple widgets, that could be causing a permission issue.

  3. CORS Issues: There could be restrictions on cross-origin requests when you have multiple widgets running at once.

What You Can Do:

  1. Use Unique Tokens for Each Widget: To avoid any conflicts, try using separate tokens or different authorization methods for each widget.

  2. Respect Rate Limits: Calendly has rate limits to prevent overloading their servers. You can find these limits here. Consider adding delays between API calls to avoid triggering them.

  3. Consider a Backend Proxy: To keep things smooth and manage rate limiting, you can route the API requests through your server. This will also make your API calls more secure:

    app.get('/api/fetch-event-details', async (req, res) => {
      const headers = { 'Authorization': `Bearer YOUR_API_TOKEN` };
      const eventData = await fetch(`https://api.calendly.com/scheduled_events/${req.query.eventUri}`, { headers });
      const inviteeData = await fetch(`https://api.calendly.com/scheduled_events/${req.query.eventUri}/invitees/${req.query.inviteeUri}`, { headers });
      res.json({ eventData, inviteeData });
    });

  4. Use data-resize="true" for Responsive Height: If you're using negative padding or margin as a hack to adjust the iframe, try switching to data-resize="true" for smoother resizing without layout shifts. It’s a cleaner, more responsive solution.

And if the problem still doesn’t go away, feel free to reach out to Calendly Support at support@calendly.com with the error details. They should be able to help further.

Hope this helps!  😊

 

Reply


Need Help? Visit 'Get Help. Give Help.'
Terms & ConditionsCookie Settings