Me gustaría completar previamente el formulario de Calendly en mi página de agradecimiento de Unbounce. Estoy usando las opciones de inserción avanzada de Calendly, pero falta la información.
esta es la 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 --> y me sale Calendly not defined en consola
¡Gracias por cualquier ayuda!
Lo más probable es que se deba a que su código en la etiqueta de secuencia de script en línea se está ejecutando antes de que se inicialice la secuencia de comandos de Calendly ( https://assets.calendly.com/assets/external/widget.js ).
Prueba esto
<!-- 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>Cambios principales de su ejemplo:
class="calendly-inline-widget" y data-url del div que se supone que aloja el widget. Esos atributos se usan para la inicialización automática, pero en su lugar estamos inicializando el widget manualmente a través de Calendly.initInlineWidget() en el bloque de script a continuación.async del script que carga widget.js . Esto asegurará que la secuencia de comandos de Calendly se cargue antes que nuestra secuencia de comandos personalizada.widget.jsparentElement faltante a la llamada initInlineWidget() . Se supone que apunta al contenedor del widget.