Calendly not pre-filling a form in Webflow - forms

Question

I’m using Calendly in my Webflow project, and it works.
However, I would love to pre-fill the form in Calendly, and there is a guide to do so here: https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page
I’ve managed to make the url look like this, using custom code:
mywebsite.com/book-meeting?name=MyFirstname%20MyLastname&email=myemail#test.com
But for some reason Calendly is not pre-filling the form.
Is there anyone else, who has tried this and made it work?
Thanks!

Answer 1

It sounds to me look you would like to pass custom pre-fill values to your embedded Calendly Link.
The best way to do this is to use Calendly’s Advanced Embed Options: https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#4
In order to do this you will need to supply your pre-filled values like Name and Email directly to specific Calendly link being embedded. In your example: mywebsite.com/book-meeting?name=MyFirstname%20MyLastname&email=myemail#test.com, it looks like you are passing the pre-fill values to the entire page address rather than specifically to the calendly.com/… scheduling link found in the embedded script.
The best way to do this is as described in help article referenced above. You can add pre fill values script like so:
prefill: {
name:
email:
customAnswers:
}
so that the script to embed Calendly would look something like:
<script>
const params = (new URL(window.location)).searchParams
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK/30min',
prefill: {
name: params.get('name'),
email: params.get('email')
}
});
</script>
Where we are taking the parameters from the page url and passing them to Calendly embedded widget. (Note: in this example, I am using an Inline Widget but you can replace this portion of the script with the appropriate API method, ie. Calendly.initBadgeWidget or Calendly.initPopupWidget)
Hope this helps, happy scheduling!