Đoạn mã theo framework

Tiện ích chỉ là một thẻ script nên đặt vào đâu cũng được. Đây là dạng chính xác cho ba cách dựng hay được hỏi nhất. Thay wk_your_key_here bằng khóa trên thẻ tiện ích của bạn.

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 này một lần, gần gốc ứng dụng. Phần dọn dẹp gỡ script và tắt tiện ích khi component bị hủy.

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

Đây là app router. Đặt thẻ Script trong root layout để tiện ích không mất khi chuyển trang.

Dùng cách nào thì cũng là một script. Tiện ích vẽ trong shadow root nên không đụng tới style hay bundle của bạn.