I have this page

import ChatbotView from '../../chatbot-view'
import { getChatbotById } from '@/app/repo/chatbot-repo'

type Props = {
  params: {
    chatbotId: string
  }
}

export default async function ChatbotEmbedPage({ params }: Props) {
  const chatbot = await getChatbotById(params.chatbotId)

  if (!chatbot) {
    console.error('Chatbot not found')
    return
  }

  return <ChatbotView chatbot={chatbot} />

I want to load this component that a chatbot widget in an external HTML like something like this

      <script
          src="https://locahost:300.co/path-to-component"
          chatbotId="chatbot-id"
          domain="localhost:3000"
          defer
        ></script>

Anybodoy knows how can I achieve this?

So far I tried to put it as an iframe but it give me the whole page, so I think I need to use the script tag, but I just don’t know how to use it properly