Αποσπάσματα για frameworks

Το widget είναι ένα script tag, οπότε μπαίνει παντού. Να η ακριβής μορφή για τα τρία setup που ρωτούν πιο συχνά. Άλλαξε το wk_your_key_here με το κλειδί από την κάρτα του widget.

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 αυτό το component μία φορά, κοντά στη ρίζα της εφαρμογής. Το cleanup αφαιρεί το script και κλείνει το widget όταν το component αποσυνδέεται.

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

Αυτό είναι ο app router. Βάλε το Script tag στο root layout ώστε το widget να επιβιώνει στη μετάβαση μεταξύ σελίδων.

Ό,τι κι αν χρησιμοποιείς, είναι το ίδιο script. Το widget σχεδιάζεται σε shadow root, οπότε δεν αγγίζει ούτε τα στυλ ούτε το bundle σου.