How to make a Next.js component embeddable?

Question

I want to make a specific component of my nextjs 13 website embeddable as widget to other websites without using iframe approach.

I am using Next.js 13 app router. Let's say I have a component which I want to let users to embed on their website. Inside the page.tsx, there are multiple components but I want specifically this component to be embeddable. Are there any npm packages or other approaches available for doing this?

I want something like this:

<script>
  window.calendarConfig = {
    userId: "xxxx",
  }
</script>
<script
  src="https://www.mywebsite.com"
  id="xxxx">
</script>