Dynamic script injection not working with calendar widget

Other Questions Calendly
1

I’m trying to dynamically insert a booking widget into my page using JavaScript, but it’s not displaying properly when I click a button.

const bookingWidget = `
<div class="booking-widget-container" data-calendar="https://calendly.com/MYACCOUNT/meeting" style="min-width:300px;height:600px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
`;

function displayBookingForm() {
  document.getElementById("widget-container").innerHTML = bookingWidget;
}

I tested this by putting regular text between the divs and that shows up fine, so I know the DOM manipulation part is working correctly. The issue seems to be specifically with the script tag not executing when added through innerHTML. Has anyone encountered this before and found a solution?

2

Had this exact problem building a booking system for a client portal six months ago. The security restriction on innerHTML script execution caught me off guard. What worked reliably: use insertAdjacentHTML instead of innerHTML, but handle the script separately. Most stable approach I found was checking if the Calendly object exists globally before injecting anything. If it doesn’t exist, dynamically load the script with a Promise-based loader, then initialize the widget once the script’s ready. Key insight: Calendly’s widget.js has callback hooks you can use for proper initialization timing. This eliminated the race conditions I was getting with other methods and worked consistently across browsers and loading scenarios.

3

Been fighting widget integration issues for years - the innerHTML script execution problem is such a pain.

Here’s the thing: you’re manually rebuilding widget functionality when you could just automate the whole booking flow.

I recently built something similar for multiple client portals with dynamic calendar widgets. Instead of wrestling with DOM manipulation and script injection, I automated everything.

System detects booking button clicks, grabs user preferences and availability, then generates the right calendar interface. No script injection hassles.

You can trigger different calendar setups by user type, pre-fill forms with existing data, and auto-send follow-ups after bookings. Everything runs without touching innerHTML or dealing with script execution headaches.

Much cleaner than managing widget code in your frontend, plus you get logging and error handling built-in.

Try the automation route instead of battling browser security restrictions: https://latenode.com

4

yeah, innerhtml blocks scripts for security. easy fix tho - manually call calendly’s init function after you insert the div. try calendly.initInlineWidget(). just make sure you’ve already loaded the calendly script on your page first, don’t inject it dynamically.

5

This is a common browser security feature - scripts added through innerHTML won’t execute. I hit the same issue building a booking system last year. Here’s what worked for me: create the script element separately and append it to the DOM. After you set your div content, use document.createElement(‘script’), set the src to your Calendly URL, then append it to the head or container. This bypasses the innerHTML restriction so the external script loads and initializes properly. Alternatively, load the Calendly script once when your page loads, then just insert the div dynamically. The pre-loaded script should automatically detect and initialize any new calendar containers that show up.