फ्रेमवर्क के स्निपेट

विजेट सिर्फ एक script टैग है, इसलिए कहीं भी लग जाता है। सबसे ज्यादा पूछे जाने वाले तीन सेटअप का सही रूप यहां है। wk_your_key_here की जगह अपने विजेट कार्ड की कुंजी लगाएं।

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
}

इस कंपोनेंट को अपने ऐप की जड़ के पास एक बार रेंडर करें। क्लीनअप स्क्रिप्ट हटा देता है और कंपोनेंट हटते ही विजेट बंद कर देता है।

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 टैग को root layout में रखें ताकि पेज बदलने पर भी विजेट बना रहे।

आप जो भी इस्तेमाल करें, स्क्रिप्ट एक ही है। विजेट shadow root में बनता है, इसलिए यह आपकी स्टाइल या बंडल को कभी नहीं छूता।