各框架接入程式碼

小工具只是一個 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 標籤放進根佈局，小工具就能在頁面切換後繼續存在。

無論用哪種方式，載入的都是同一個腳本。小工具在 shadow root 裡渲染，不會碰你的樣式，也不會進你的打包產物。