Install the SupportHQ widget in a React app

Steps

1. 1

   Copy the React snippet from SupportHQ

   In the SupportHQ dashboard open your project, go to Integrations, choose Web chat, switch the framework selector to React, and copy the component.

2. 2

   Add the effect at the root

   Put the useEffect in your root component (App.tsx) or a small SupportHQWidget component rendered once from the root. Do not render it inside routed pages.

3. 3

   Keep the cleanup

   The returned cleanup calls window.SupportHQWidget?.destroy(). Keep it: it prevents duplicate launchers during hot reload and in Strict Mode.

4. 4

   Run and check

   Start the dev server. The launcher should appear once the app has rendered.

Where it goes: The root component, rendered once. For Remix, the root route component.

The snippet

Replace YOUR_PROJECT_ID, or copy the ready-made version from Integrations, Web chat in your dashboard.

import { useEffect } from 'react'

export default function App() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.supporthq.app/widget/latest/supporthq-widget.js'
    script.async = true
    script.onload = () => window.SupportHQWidget?.init({
      projectId: 'YOUR_PROJECT_ID',
    })
    document.body.appendChild(script)
    return () => { window.SupportHQWidget?.destroy() }
  }, [])

  return <>{/* your app */}</>
}