Prefill Calendly Embed

You can use Calendly to schedule meetings / events without much hassle. It is very straight forward and their paid service offers a ton of features. Free is really good by itself. Did you know you can prefill the form fields?

Keep reading to see how I setup a web page with prefilled form fields using Calendly. I will also address issues with WordPress and how you can get help from our team if you need it!

We can help you get your Calendly Form working AT NO COST, in exchange for a positive review. Please click this link to contact us for support! https://adopttheweb.typeform.com/to/wvevF1XC

See our April 2021 Update for a simpler code to prefill calendly embed.

Embed Calendly on a webpage.

The inline embed option generates some code like this:

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

This is great, but it can be better 🙂 For starters, this script outputs an iframe. These are clunky, even in 2020. Add some CSS to make it clean!

iframe {
    position: relative;
    height: 100vh;
    width: 100%; 
}

We can take this further and add a lot of options that are baked into the scripting Calendly provides. These are more advanced enbed options, but they’re awesome!

To get going with the advanced embed options we will update our embed code (above) to include the custom API calls:

<div id="calendly"></div>
<script>
document.getElementById('calendly').innerHTML = '<div class="calendly-inline-widget" data-url="https://calendly.com/USERNAME/30min?" style="min-width:320px;height:630px;"></div>';
</script>
<!-- Calendly inline widget begin -->
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Prefill Form Fields

Now we can add in whatever we want! I wanted to prefill the Calendly form fields. For the particular use I was developing, a user had already entered in some info like name and email address. I passed this info to the page where Calendly was embedded and used it to prefill the schedule form.

• A form was submitted
• The post data was passed as URL parameter
• Then redirected to a page with Calendly embedded
• The javascript below grabs the URL parameters and splits it up
• Then we set variables to be used in the form
• The Calendly form is prefilled
• I commented the code to explain the parts

<style>
iframe
{
    position: relative;
    height: 100vh;
    width: 100%; 
}
</style>
<div id="calendly"></div>
<script>
// Grabs the URL parameters and splits them up
const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))
// Each var is a variable pulled from the parameter
var URL = params.get('URL');
var fullname = params.get('fname') + ' ' + params.get('lname');
var email = params.get('email');
var petname = params.get('petname');
// each parameter as a variable is used to build the Calendly embed URL to include our prefilled fields
document.getElementById('calendly').innerHTML = '<div class="calendly-inline-widget" data-url="'+URL+'?primary_color=8286c0&name='+fullname+'&email='+email+'&a1='+petname+'" style="min-width:320px;height:630px;"></div>';
</script>
<!-- Calendly inline widget begin -->
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

https://help.calendly.com/hc/en-us/articles/360020052833

As of April, 2021 we can use this snippet!

<script>
const params = location.search;
document.getElementById('calendly').innerHTML = '<div class="calendly-inline-widget" data-url="https://calendly.com/_YOUR_CALENDLY_URL'+params+'" style="min-width:320px;height:630px;"></div>';
</script>

If you get 404 Not Found on WordPress

*Use “full_name” instead of “name” as a parameter if you’re using WordPress. This is because “name” is a registered taxonomy used on WordPress and on a do not us list. See a list of parameters on the do not use list: https://developer.wordpress.org/reference/functions/register_taxonomy/ and learn more about the error here: https://core.trac.wordpress.org/ticket/27962