Scripts not loaded synchonously?

senica · 2020-07-07T21:35:24.279Z

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 · 2020-07-07T21:55:43.986Z

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>

system · 2020-09-15T21:35:24.594Z

This topic was automatically closed after 70 days. New replies are no longer allowed.