Extraits par framework

Le widget tient dans une seule balise script, donc il s'intègre partout. Voici la forme exacte pour les trois montages les plus demandés. Remplace wk_your_key_here par la clé de ta fiche widget.

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
}

Rends ce composant une seule fois, près de la racine de ton app. Le nettoyage retire le script et démonte le widget quand le composant disparaît.

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

C'est l'app router. Mets la balise Script dans ton root layout pour que le widget survive à la navigation entre les pages.

Quoi que tu utilises, c'est le même script. Le widget s'affiche dans un shadow root, donc il ne touche ni tes styles ni ton bundle.