[Solved] Passing javascript variable to Calendly embed

[Erkhes Mungunshagai]

Erkhes Mungunshagai Asks: Passing javascript variable to Calendly embed
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.

1. 
   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).
   
   
2. 
   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".

Book consultation

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.

SolveForum.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, solveforum.