Fragmentos por framework

El widget es una sola etiqueta script, así que encaja en cualquier sitio. Esta es la forma exacta para los tres montajes que más se preguntan. Cambia wk_your_key_here por la clave de la ficha de tu widget.

HTML

<script src="https://api.ticketsx.xyz/widget.js" data-key="wk_your_key_here" defer></script>

React

import { useEffect } from 'react'

export function TicketsXChat() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://api.ticketsx.xyz/widget.js'
    script.dataset.key = 'wk_your_key_here'
    script.defer = true
    document.body.appendChild(script)

    return () => {
      script.remove()
      window.TicketsXChat?.destroy()
    }
  }, [])

  return null
}

Renderiza este componente una vez, cerca de la raíz de tu aplicación. La limpieza quita el script y desmonta el widget cuando el componente se desmonta.

Next.js

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.ticketsx.xyz/widget.js"
          data-key="wk_your_key_here"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Esto es el app router. Pon la etiqueta Script en tu root layout para que el widget sobreviva a la navegación entre páginas.

Uses lo que uses, es el mismo script. El widget se dibuja en un shadow root, así que nunca toca tus estilos ni tu bundle.