Skip to main content

I can’t get the message events to trigger on plain js embed. Here is the code:

 

function init() {
  const link = document.createElement('link');
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = `https://seaspaceai.b-cdn.net/global/calendly-pop-up-styles.css`;
	document.head.appendChild(link);

  // Define the function for adding a button
  window.addCalendlyButton = function(newOutputDiv) {
    const calendlyContainer = document.createElement('div');
    calendlyContainer.className = 'button-container';

    newOutputDiv.appendChild(calendlyContainer);

    const calendlyButton = document.createElement('button');
    calendlyButton.className = 'calendly-button';
    calendlyButton.id = 'calendly-button';

    calendlyButton.addEventListener('click', function() {
      if (window.Calendly) {
        Calendly.initPopupWidget({
          "url": 'https://calendly.com/link',
          "prefill": {},
          "parentElement": document.getElementById('calendly-button'),
          "utm": {
            "utmSource": "source"
          },
        });
      }
      return false;
    });

    calendlyButton.innerHTML = window.selectButtonText();
    calendlyContainer.appendChild(calendlyButton);
  };

  function isCalendlyEvent(e) {
    return e.origin.includes("calendly.com") && 
           e.data.event && 
           typeof e.data.event === 'string' && 
           e.data.event.startsWith('calendly');
  }

  window.addEventListener('message', function(e) {
    console.log('Received message:', e);
    if (isCalendlyEvent(e)) {
      // Handle specific Calendly events
      switch (e.data.event) {
        case 'calendly.event_scheduled':
          console.log('Meeting scheduled:', e.data);
          break;
        case 'calendly.profile_page_viewed':
          console.log('Profile page viewed:', e.data);
          break;
        case 'calendly.date_and_time_selected':
          console.log('Date and time selected:', e.data);
          break;
        case 'calendly.popup_closed':
          console.log('Popup closed:', e.data);
          break;
        case 'calendly.popup_opened':
          console.log('Popup opened:', e.data);
          break;
        default:
          console.log('Calendly event:', e.data);
      }
    }
  });

  // Then load the Calendly script
  const script = document.createElement('script');
  script.src = 'https://assets.calendly.com/assets/external/widget.js';
  script.type = 'text/javascript'
  script.async = true;
  document.head.appendChild(script);
}

if (document.readyState === 'loading') {
  document.addEventListener("DOMContentLoaded", init);
} else {
  init();
}

 

Only console.log that I get is the following:
 

 

Hi there!

Thanks for sharing the code! It looks like you're trying to trigger and handle events from the Calendly popup widget using the message event listener. From your description, it seems like the events are not being triggered as expected.

Here are a few things you can check and some adjustments to try:

1. Ensure the message event is properly received

  • You mentioned that you're seeing the message in the console, but nothing beyond that. One thing to check is whether the Calendly.initPopupWidget is correctly triggering the messages, and whether those messages are being sent from the Calendly widget.

To confirm this, you could test the event listener in isolation (without the Calendly button) to see if any messages are being sent:

window.addEventListener('message', function(e) {
  console.log('Message received:', e);
});

This will help you see if you’re receiving any messages from the iframe. You can also verify if the messages are coming from calendly.com and contain valid data.

2. Ensure proper setup for Calendly iframe messaging

The Calendly widget uses postMessage to communicate with the parent page. However, make sure that you’re triggering the events properly by ensuring that the button (calendly-button) and the Calendly popup are interacting correctly.

Here's a quick check:

  • When you call Calendly.initPopupWidget, it should trigger the appropriate messages like 'calendly.popup_opened', 'calendly.popup_closed', etc., once the popup is interacted with.

3. Check for Cross-Origin and Iframe Constraints

Ensure there is no cross-origin issue preventing the iframe from sending messages. The e.origin.includes("calendly.com") check in your isCalendlyEvent() function looks fine, but make sure there are no blocking policies (like CORS) on your website.

If you are using a local server for testing, try deploying the code on a live domain to rule out any issues with local development setups.

4. Handling the message event correctly

Another potential issue is the scope in which the message event listener is being added. Make sure that window.addEventListener('message', ...) is correctly placed and that the Calendly.initPopupWidget() function call is successfully executed.

Here’s a simplified breakdown:

  • The Calendly.initPopupWidget call should trigger the necessary events after it's triggered.

  • The message event listener will capture those events once the popup is shown, closed, etc.

If you don't see events from the widget, it could be due to the initPopupWidget not properly triggering. I’d recommend adding a console log in the button click to verify if the widget is being initialized:

calendlyButton.addEventListener('click', function() {
  if (window.Calendly) {
    console.log('Initializing Calendly popup...');
    Calendly.initPopupWidget({
      "url": 'https://calendly.com/link',
      "prefill": {},
      "parentElement": document.getElementById('calendly-button'),
      "utm": {
        "utmSource": "source"
      },
    });
  }
  return false;
});

5. Check Browser Console for Errors

You mentioned only seeing console.log outputs. Check the browser’s console for any errors related to the embed code, network requests, or other issues that might be blocking proper execution.

6. Debugging Further

You might want to try using the browser's developer tools (Network tab) to check if the request for the Calendly script (widget.js) is being made successfully. Additionally, ensure there are no JavaScript errors in your console that might prevent the event listener from firing.

If you need more specific help, feel free to reach out to support@calendly.com with more context and we'd be happy to assist further!

Reply


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