How to redirect to a confirmation page when using an embedded Calendly calendar

Calendly is a scheduling platform designed to simplify the process of booking meetings. It allows individuals and teams to share their availability and let others book time with them.

In Calendly, the redirection option refers to the ability to automatically send invitees to a specific URL after they schedule a meeting. This is useful for guiding users to a next step, such as a payment portal. However, the redirection experience is not ideal because Calendly warns the user about the redirection.

Fortunately, if you embed Calendly on a page (rather than book entirely through the Calendly website), you can write a short script that performs the redirection. Since your site is handling the redirection, the Calendly warning is not shown.

Embedding Calendly

These instructions assume you have embedded Calendly on your website. This means you have taken a snippet of code provided by Calendly and inserted it into the HTML of a page on your website. If not, visit the Calendly website for instructions:

• How to add Calendly to your website – Help Center

Note: when you setup embedding, do not enable the Calendly option to perform redirection. You will handle redirection yourself. This allows you to redirect without getting the Calendly warning.

Redirection code

The snippet below is the code that must be inserted right after the Calendly embed code on your page. Be sure to change the URL in the example to your destination URL (see line 5 below).

<!-- Insert after your Calendly embed code -->
<script type="text/javascript">
  window.addEventListener('message', function(e) {
    if (e.data.event && e.data.event === 'calendly.event_scheduled') {
      window.location.href = 'https://example.com/your/page';
    }
</script>

<!-- Insert after your Calendly embed code -->
<script type="text/javascript">
  window.addEventListener('message', function(e) {
    if (e.data.event && e.data.event === 'calendly.event_scheduled') {
      window.location.href = 'https://example.com/your/page';
    }
</script>

You can skip this section if you are not interested in the technical details. This JavaScript listens for a specific message from the Calendly indicating that a meeting has been successfully scheduled. Once that event is detected, it automatically redirects the user to your destination page.

• window.addEventListener('message', function(e) {...})
  This sets up a listener for messages sent to the browser window. Calendly sends messages when certain actions occur within the embedded calendar.
• e.data.event === 'calendly.event_scheduled'
  This checks if the message received is specifically the one that indicates a meeting has been scheduled.
• window.location.href = 'https://example.com/your/page';
  If the event matches, the browser is redirected to the specified URL.

This works with Calendly’s inline embed, popup widget, or popup text link.

Step-by-step instructions

References

• How to add Calendly to your website – Help Center