3rd party script (embed slow load script) Prismic + Netxjs

[solution.stack99]

I have a Rich Text Field to embed 3rd party scripts (HubSpot form and Stripe), but the script loads very slowly or even doesn't load. I had to refresh the page.

Does anyone know how to solve this slowness issue with Rich Text Fields for embedding?

```

[Phil (Phil Snow)]

Hi @solution.stack99 ,

Given that the API just sends the embed code as is, it's likely your framework is what is loading the embeds slowly.

This is a custom embed field using the rich text, right?

[solution.stack99]

Hi Phil,

It was a Rich Text Field in a slice.

<div
            dangerouslySetInnerHTML={{
              __html: asText(slice.primary.hubspotcontactusform),
            }}
          />

`I believe this is the best way to embed a script.

[Phil (Phil Snow)]

Can you try hitting the field without the asText function to see if that helps?

<div
  dangerouslySetInnerHTML={{
    __html: slice.primary.hubspotcontactusform[0].text,
  }}
/>

[solution.stack99]

@Phil Sorry for the delay.

I tried it, but the form wasn't loaded until I refreshed the page. I also got a TypeScript error with text.

[Phil (Phil Snow)]

Can you try recording the issue with this plugin? It will log all the developer information necessary to debug this

Jam

[solution.stack99]

Hi @Phil

The screen recording https://jam.dev/c/aafcf894-ceef-403c-af43-830ff752b92d is here.

This video shows the embed script using HubSpot and Stripe.

[Phil (Phil Snow)]

Thank you for sharing this; it's really helpful.

I can see that your embed script is being executed in your project so it's not a Prismic issue.

I can tell this because if you check the video at 0:06, the request URL is hit successfully with a 200 code in the network tab (so that's the execution), but it's failing because of a CORS issue which you can see in the console tab.

This suggests there's an issue on your application side, plus you Google fonts are also failing and the error there is more helpful for debugging this. Fix this and everything should work I think.

[solution.stack99]

Thank you for the feedback.

I've checked the Google font error in Jam and yes, I saw an error but it was shown as 200 in Chrome. I apologize if that is something that you couldn't be involved in troubleshooting this issue.

[Phil (Phil Snow)]

Did you manage to fix the CORS issue for the embeds as well?

[solution.stack99]

I've attached screenshots of the error for both HubSpot and Stripe. However, I've researched how to solve the CORS issue for the Richtext embeds, but I couldn't find one.

I would like to see if you have solutions for this issue.

HubSpot

Stripe

[Phil (Phil Snow)]

Well, it's 2 different errors, but both are based in CORS issues. It's not a rich text or Prismic error:

Hubspot:

Request failed.

Access to fetch at 'https://hubspot-forms-static-embed.s3.amazonaws.com/prod/45352766/0144b4b6-ce85-4f5e-bc21-39beb593e899.json.gz?hs_static_app=forms-embed&hs_static_app_version=1.4774&X-HubSpot-Static-App-Info=forms-embed-1.4774' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value "*" that is not equal to "http://localhost:3000"

[Read about cross-origin resource sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

Stripe:
net::ERR_FAILED
`

This article should help:

Using CORS in Next.js to handle cross-origin requests - LogRocket Blog