Cuplikan per framework

Widget ini cuma satu tag script, jadi bisa masuk ke mana saja. Ini bentuk persisnya untuk tiga setup yang paling sering ditanya. Ganti wk_your_key_here dengan kunci di kartu widgetmu.

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 komponen ini sekali saja, dekat root aplikasimu. Pembersihannya menghapus script dan mematikan widget saat komponen dilepas.

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

Ini app router. Taruh tag Script di root layout supaya widget bertahan saat berpindah halaman.

Apa pun yang kamu pakai, scriptnya sama. Widget digambar di shadow root, jadi tidak pernah menyentuh gaya atau bundle-mu.