Snippets für Frameworks

Das Widget ist ein einziges Script-Tag und passt damit überall hin. Hier die genaue Form für die drei Setups, nach denen am häufigsten gefragt wird. Ersetz wk_your_key_here durch den Schlüssel auf deiner Widget-Karte.

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
}

Rendere diese Komponente einmal, nahe der Wurzel deiner App. Das Aufräumen entfernt das Script und fährt das Widget herunter, sobald die Komponente ausgehängt wird.

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>
  )
}

Das ist der App Router. Setz das Script-Tag in dein Root-Layout, damit das Widget die Navigation zwischen Seiten übersteht.

Egal was du nimmst, es ist dasselbe Script. Das Widget rendert in einem Shadow Root und fasst weder deine Styles noch dein Bundle an.