How to add in your Calendly scheduler to an Upflowy flow

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

Simple Embed: Have your Calendly appear within your flow for customers to use

Advanced Embed: Have data that has been submitted through your flow pre-filled in Calendly, so users do not have to re-enter basic details

Simple Embed (Show your Calendly in Upflowy)

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! 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 (Pre-fill your Calendly based on data asked for in the flow):

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!

Have a specific component in mind? Our Customer Success champions are available by clicking on the chat bubble on the bottom right of our app or emailing support@upflowy.com. You can even book a call with them for a 1:1 session at a time you prefer.