Turn a component into a script embedded widget that can be used in third party sites like wordpress.

[chilly sierra]

I have a nextJS application with a ton of different components. One of those components is a donation form which I am trying to turn into a widget. I want to be able to turn it into an embeddable script tag that can be used in any website. How can I output a script tag from a single component. I do not want to use an iframe.

[dry tusk]

Hi @chilly sierra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific instructions on how to turn a Next.js component into an embeddable script tag that can be used on any website.

However, Next.js does provide a next/script component that you can use to include third-party scripts in your application. You can use this component to load scripts in your layout component, custom _app, or inline in your components.

Here's an example of how to use the next/script component to load a script in your layout component:

import Script from 'next/script'
 
export default function DashboardLayout({ children }) {
 return (
 <>
 <section>{children}</section>
 <Script src="<https://example.com/script.js"> />
 </>
 )
}

And here's an example of how to use the next/script component to include an inline script in your components:

<Script id="show-banner">
 {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Remember to assign an id property for inline scripts for Next.js to track and optimize the script.

For more information, you can refer to the Next.js documentation on script optimization (https://nextjs.org/docs/app/building-your-application/optimizing/scripts).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: