프레임워크별 스니펫

위젯은 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에 그려지므로 사이트의 스타일이나 번들을 건드리지 않습니다.