We are able to set up Calendly in our flows through our Embedded Content component. However, there is some extra code you can 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 in particular, and the amount of time that 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 own 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 also proceed to the next step once something has been booked!

Did this answer your question?