Unbounce not pre-filling Calendly

Question

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!

Answer 1

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:

• Removed 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 below
• Removed async attribute from the script that loads widget.js. This will ensure that Calendly's script loads before our custom script
• Placed the custom init script after loading widget.js
• Added missing parentElement property to the initInlineWidget() call. It's supposed to point to the container of the widget.