I’m pre populating a Calendly embed fields with a value that is using an innerText property. However, the Calendly fields are not getting filled and the browser is throwing an error in multiple scenarios.
-
When the input parent wrapper (‘.form-grid__wrapper’) flexbox direction is set to column the only 1 field is getting filled on the Calendly embed and throwing this error (GET https://connect.facebook.net/en_US/fbevents.js net::ERR_BLOCKED_BY_CLIENT).
-
Wheres when the parent wrapper flexbox direction is set to row none of the Calendly fields are getting the value.
The JS code pre populating the embed.
<!-- Calendly inline widget begin -->
<script>
const typeOptions = [...document.querySelectorAll('.consultation-slider__content')]
const type = [...document.querySelectorAll('.book-grid__content')]
const submit = document.getElementById('submit');
//Type of apppointment the user has chosen and moves the slider
var chosenType = "";
for (var i = 0; i < type.length; i++) {
type[i].onclick = e => {
chosenType = e.target.innerText;
}
}
//Type of product the user chosen and moves the slider
var chosenProduct = "";
for (var i = 0; i < typeOptions.length; i++) {
typeOptions[i].onclick = e => {
chosenProduct = e.target.innerText;
}
}
submit.addEventListener('click', () => {
Calendly.initInlineWidget({
url: 'https://calendly.com/eric-910?hide_gdpr_banner=1',
parentElement: document.getElementById('calendly'),
prefill: {
name: "",
email: "",
customAnswers: {
a1: chosenType,
a2: chosenProduct,
}
}
});
})
</script>
Please see the issue here in the multi step slider “Book consultation form”.
Also, from the browser extention tab I can see that the adblock ads are increasing when I load the Calendly embed so I have disabled my adblock to see if it’s working but ended up facing the same issue again.