Add or Insert a Script Tag with Builder

Technical Questions
1

I have been looking for a way to add a third-party js tag inside the head portion of my web page.

The solution I currently am using it EDIT CONTENT JS + CSS

// inject JS
var s2 = document.createElement("script");
s2.type = "text/javascript";
s2.src = "https://js.stripe.com/v3/";
document.head.appendChild(s2)

Is there a better approach I should be taking to add a simple JS script tag to my page?

2

In order to inject javascript into the head, the code you provided is the best option for what you’re trying to achieve. Another option is to use a custom code block component on the page and add the third party script tag there. However, it won’t be appended to the head (which in most cases isn’t an issue and the script should work just fine).

3

Thanks for the feedback.

I would double check on the custom code block suggestion. When I first tried that, it loaded the script tag several times on the page. I didn’t look into it, but I believe Builder.io renders several variations of the web page in 3 different viewports, so a custom block would load that JS file 3 times on pageload.

Stripe.js checked for multiple loading instances, and was kind enough to error out that within the browsers console.

Thanks

4

Hi @bull1099 just confirming whether or not this worked for you? You shouldn’t be seeing the script loading 3 times, and we certainly are not loading 3 different versions for each device!

If you are noticing any strange behavior, please send us the link and we can take a look.