Framework Snippets

The widget is one script tag, so it drops into anything. Here is the exact shape for the three setups people ask about most. Swap wk_your_key_here for the key on your widget card.

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 this component once, near the root of your app. The cleanup removes the script and tears the widget down when the component unmounts.

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

This is the app router. Put the Script tag in your root layout so the widget survives navigation between pages.

Whichever you use, it is the same script. The widget renders in a shadow root, so it never touches your styles or your bundle.