There are two types of integrations we can achieve with Calendly:

  1. Simple Embed: Have your Calendly appear within your flow to use

  2. Advanced Embed: Have data through your flow sent to Calendly, so users do not have to re-enter basic details

To integrate Calendly with your flow, you'll need to open up your Calendly account.

Go to the meeting type you want to integrate, and click 'Share':

The following page will appear.

Click on "Add to website":

Select 'Embed inline', and click 'Continue':

You'll then see a code snippet appear! You now have two options: a 'simple embed' and the 'advanced embed'.

Simple Embed:

A simple embed would embed the Calendly link to your Upflowy flow. If your customers have already submitted their details like name and email ID, they have to be manually entered again through the Calendly flow.

To enable 'simple embed', all you have to do is copy the below code snippet.

Now, let's go into the step view of the Upflowy app. In 'Components', you'll see a component that's called 'Embedded Content:

Drag and drop this into your step. You'll see an area for a code snippet on the left of your screen:

Copy-paste the code into the box on the left side, and watch as your Calendly appears in the step view!

Advanced Embed:

An advanced embed is when you want your users to automatically fill up their details like Name and Email (which they have entered in their Upflowy flow) in Calendly without entering them again.

There is some extra code you need to add in if you have already asked your customers for:

  • a first name and last name

  • an email address

so that they don't have to type it in again!

This is what the regular Calendly code looks like.

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/kay-upflowy-example-only/30min" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

In the above code, you will see that there is a link to your specific Calendly URL and the time of the booking that looks like the below:

url="https://calendly.com/kay-upflowy-example-only/30min"

This is the unique identifier to your calendly link and the amount of time you are expecting to book in. You will need to copy-paste these into the code below and replace the {{YOUR_CALENDLY_LINK}} and the {{LENGTH_OF_MEETING}} to match your link:

<!-- Calendly inline widget begin -->
<div
class="calendly-inline-widget"
style="min-width:320px;height:730px;"
data-auto-load="false"
>

<script>
var head = document.querySelector('head');
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function() {
Calendly.initInlineWidget({
parentElement: document.querySelector('.calendly-inline-widget'),
url: "{{YOUR_CALENDLY_LINK}}/{{LENGTH_OF_MEETING}}min" ,
prefill: {
firstName: "{{first_name}}",
lastName: "{{last_name}}",
email: "{{email}}"
}
});
}
script.src = 'https://assets.calendly.com/assets/external/widget.js';
head.appendChild(script);
</script>

<script>
var form = document.querySelector('.UP_formContainer');
var button = document.createElement('button');
button.setAttribute('type', 'submit');
button.style.display = 'none';
form.appendChild(button);

window.addEventListener('message', (event) => {
const e = event.data && event.data.event;
if (e === 'calendly.event_scheduled') {
button.click();
}
});
</script>
</div>
<!-- Calendly inline widget end -->

After this is done, copy-paste the entire code into your Embedded content! This will pull through the relevant data and proceed to the next step once something has been booked!

Congratulations! Now you have a flow that users can book in time with!

Did this answer your question?