innerHTML a calendly script

Question

I want to to do an innerHTML of my calendly when I click on a button but it doesn't work.

This is my code :

const calendlyCode = `
<div class="calendly-inline-widget" data-url="https://calendly.com/MYCALENDLY/30min" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
`;

function showCalendly() {
  document.getElementById("calendly-area").innerHTML = calendlyCode;
}

But if I put text in the middle of the two divs, the text is displayed. So it's not the DOM manipulation that is the problem.

Thank you.

Does this answer your question? [Can scripts be inserted with innerHTML?](https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) — Ivar, Dec 01 '22 at 10:10

score 0 · Answer 1 · answered Dec 01 '22 at 10:17

You need to first load the script and then using innerHTML you can add the calendly div and it will show the result. Please review below working code:

const calendlyCode = `<div class="calendly-inline-widget" data-url="https://calendly.com/MYCALENDLY/30min" style="min-width:320px;height:630px;"></div>`;


function showCalendly() {
  document.getElementById("calendly-area").innerHTML = calendlyCode;
}

showCalendly();

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<div id="calendly-area" >

</div>

Hope this will help you for your solution!

innerHTML a calendly script

1 Answers1