Snippets per framework

De widget is één scripttag, dus hij past overal in. Dit is de exacte vorm voor de drie opstellingen waar het vaakst naar gevraagd wordt. Vervang wk_your_key_here door de sleutel op je widgetkaart.

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
}

Render dit component één keer, dicht bij de root van je app. De opruiming verwijdert het script en zet de widget uit zodra het component unmount.

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

Dit is de app router. Zet de Script-tag in je root layout zodat de widget navigatie tussen pagina's overleeft.

Wat je ook gebruikt, het is hetzelfde script. De widget rendert in een shadow root en raakt dus nooit je styling of je bundle.