javascriptcalendlyunbounce

Unbounce not pre-filling Calendly

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!

Solution

  • 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: