I would like to pre-fill the Calendly form in my unbounce thank you page. I am using the Calendly advance embed options but the information is missing.
this is the URL:
https://try.demopage.com/demothankyou/?first_name=john&email=test%40gmail.com
<script>
const params = (new URL(window.location)).searchParams
Calendly.initInlineWidget({
url: 'https://calendly.com/d/dns-sg1-kc3/try-demo?hide_event_type_details=1&hide_gdpr_banner=1',
prefill: {
name: params.get('first_name'),
email: params.get('email')
}
});
</script><!-- this is inside a HTML box in unbounce -->
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" id="my-calendly-embed" data-url="https://calendly.com/d/dns-sg1-kc3/try-demo?hide_event_type_details=1&hide_gdpr_banner=1&email=email&name=first_name" style="min-width:320px;height:830px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->and I get Calendly not defined in the console
Thanks for any help!
Most likely this is because your code in the inline script tag is executing before Calendly's script (https://assets.calendly.com/assets/external/widget.js) is initialized.
Try this
<!-- this is inside a HTML box in unbounce -->
<!-- Calendly inline widget begin -->
<div id="my-calendly-embed" style="min-width:320px;height:830px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->
<script>
const params = (new URL(window.location)).searchParams
Calendly.initInlineWidget({
url: 'https://calendly.com/d/dns-sg1-kc3/try-demo?hide_event_type_details=1&hide_gdpr_banner=1',
parentElement: document.getElementById('my-calendly-embed"'),
prefill: {
name: params.get('first_name'),
email: params.get('email')
}
});
</script>
Main changes from your example:
class="calendly-inline-widget" and data-url from the div that's supposed to host the widget. Those attributes are used for automatic initialization, but instead we're initializing the widget manually via the Calendly.initInlineWidget() in the script block belowasync attribute from the script that loads widget.js. This will ensure that Calendly's script loads before our custom scriptwidget.jsparentElement property to the initInlineWidget() call. It's supposed to point to the container of the widget.