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: