Using Calendly to schedule events in Acadio

Calendly can be embedded into activities as a code asset to schedule events. With Acadio’s “Requires Completion Event” setting enabled and the postMessage script added to the Calendly embed code, the activity is only marked complete once a date and time are successfully scheduled.

Below is the Calendly embed code with the postMessage script included. To use it, replace the section in data-url that says INSERT YOUR BOOKING LINK HERE with your actual Calendly booking link, making sure the URL is wrapped in quotation marks. Then, create a code in Acadio and paste in the embed code.

IMPORTANT: When embedding an externally hosted form—such as Calendly, Wufoo, or Jotform—you’ll need to enable the Requires Completion Event setting on the activity. This ensures the activity is only marked complete once the form has been submitted.

<div class="calendly-inline-widget" data-url="INSERT YOUR BOOKING LINK HERE" style="min-width:320px;height:700px;"></div>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

<script>
window.addEventListener('message', async function(event) {
  if (event.origin === 'https://calendly.com') {
    // handle the message
    if (event.data.event === 'calendly.event_scheduled') {  
      // event was scheduled
      console.log('Event scheduled:', event.data.payload);
      // mark the activity complete
      window.parent.postMessage({
        target: 'acadio',
        complete: true
      }, "*");
    }
  }
});
</script>