โค้ดสำหรับเฟรมเวิร์ก

วิดเจ็ตเป็นแท็ก 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 จึงไม่แตะสไตล์หรือบันเดิลของคุณ