loading 3rd party scripts inside the page

[andresclua]

hey!
thanks Swup team, library works super good!!!
I was able to use contentReplaced & willReplaceContent for loading/removing scripts.

My question is quite specific, and I could not find something in forums. I'm trying to integrate hubspot forms to a page.
so adding <script> on html page is mandatory, since placement is key + probably in the future the scripts will be included via some CMS.

I'm working with Astro, so what I end up doing was adding this to a page.

<main>
		<p>Index is the main page</p>
		<a href="/about">about page</a>
		<script **is:raw** charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
		<script **is:raw**>
		  hbspt.forms.create({
			region: "na1",
			portalId: "3120747",
			formId: "bfff5a21-6c3f-4f29-bae7-d0e778cef585"
		  });
		</script>

		<p class="instructions">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam ullam eum aspernatur, facilis tempora cupiditate voluptas sed, qui, excepturi molestiae alias sint. Tenetur sapiente dolorem totam odit quibusdam ex magnam!
			Lorem ipsum dsit amet, consectetur adipisicing elit. Numquam ullam eum aspernatur, facilis tempora cupiditate voluptas sed, qui, excepturi molestiae alias sint. Tenetur sapiente dolorem totam odit quibusdam ex magnam!

		</p>
		<a href="/about">about page</a>

	</main>

if the page is loaded initially it works, but the moment I'm comming from a different route it does not work.

Any help is welcome

[daun]

You'll find the scripts plugin useful here. It will re-run script tags found in the head and/or body.

[andresclua]

hey @daun

I tried installed the plugin, and for some reason is not working as expected.
On my side it works but super randomly.

I have a public repo with the example

[daun]

I haven't yet given astro a spin, so I can't say if it's a good fit for swup either way.

[andresclua]

@daun would you take a look if is plain html/scss/js ?

[daun]

Sure. Feel free to create a reduced test case on CodeSandbox so we can figure out if this is a swup issue or not.

[andresclua]

I add this script on page 2. inside swup container
For my perspective I think some extra work needs to be done in order to deliver this.

<script
        charset="utf-8"
        type="text/javascript"
        src="//js.hsforms.net/forms/embed/v2.js"
      ></script>
      <script>
        hbspt.forms.create({
          region: "na1",
          portalId: "3120747",
          formId: "bfff5a21-6c3f-4f29-bae7-d0e778cef585"
        });
      </script>

And install

 new SwupScriptsPlugin({
                    head: true,
                    body: true
                }),

Here is the example

let me know if it works from your side.
Thank you for help me troubbleshoot this.

[daun]

I think the way the scripts plugin re-runs scripts is asynchronous, so your second script tag will be executed before the first one is fully loaded. You could try a script loader like load-script-once and then execute the second part with forms.create in the callback.

<script>
  loadScriptOnce('//js.hsforms.net/forms/embed/v2.js').then(() => {
    hbspt.forms.create({})
  })
</script>

[andresclua]

you are right!

async function loadScript(src) {
		return new Promise((resolve, reject) => {
			const script = document.createElement('script')
			script.setAttribute("src", src)
			document.body.appendChild(script)

			script.onload = resolve
			script.onerror = reject
		})
	}
	loadScript('//js.hsforms.net/forms/embed/v2.js')
	.then(() => {
		hbspt.forms.create({
			region: "na1",
			portalId: "3120747",
			formId: "bfff5a21-6c3f-4f29-bae7-d0e778cef585"
		});
	})

It works!

[daun]

Great!