Scripts not loaded synchonously?

[senica]

Hi, I’m new to Bubble.

I’m trying to use an HTML element to embed some javascript code.

I have to load an external script, then reference a variable that script loads.

For example:

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script> console.log(Calendly); </script>

If I do this, Calendly is not defined. But, if I open up the console after the page is loaded and type in Calendly, it displays an object as expected.

It seems like Bubble changes script tags to be asyncronous…is that possible?

What would be a fix for this situation? Seems simple enough, and doesn’t seem like this simple code is worth making a plugin for.

[senica]

Got it. Here for anyone else

<div class="calendly-inline-widget" style="min-width:320px;height:900px;" data-auto-load="false" id="calendly-frame"></div>

<script>
    let head = document.querySelector('head');
    let script = document.createElement('script');
	script.type = 'text/javascript';
	script.onload = function() {
    	Calendly.initInlineWidget({
            url: '',
            parentElement: document.getElementById('calendly-frame'),
            prefill: {},
            utm: {}
        });
	}
	script.src = 'https://assets.calendly.com/assets/external/widget.js';
	head.appendChild(script);
</script>