Çatılara göre kod parçaları

Bileşen tek bir script etiketi, yani her yere sığar. En çok sorulan üç kurulumun tam hali burada. wk_your_key_here yerine bileşen kartındaki anahtarı yaz.

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
}

Bu bileşeni bir kez, uygulamanın köküne yakın render et. Temizlik fonksiyonu betiği kaldırır ve bileşen sökülünce widget'ı kapatır.

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

Bu app router. Script etiketini root layout'a koy ki sayfalar arasında gezinirken bileşen ayakta kalsın.

Hangisini kullanırsan kullan, betik aynı. Bileşen shadow root içinde çizilir, yani stillerine de paketine de hiç dokunmaz.