React Package (@ticket0/react)

The @ticket0/react package provides a React component wrapper for the chat widget, giving you full control over initialization, theming, and programmatic open/close.

Installation

npm install @ticket0/react
# or
pnpm add @ticket0/react

Basic usage

import { Ticket0Widget } from "@ticket0/react"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Ticket0Widget workspaceId="ws_your_workspace_id" />
    </>
  )
}

Place <Ticket0Widget> once in your root layout. It renders the same chat bubble as the JavaScript snippet.

Props

Prop	Type	Default	Description
`workspaceId`	`string`	required	Your workspace ID from Settings → Widget
`agentName`	`string`	`"Support"`	Name shown in the widget header
`brandColor`	`string`	`"#000000"`	Primary color (hex)
`position`	`"bottom-right" \| "bottom-left"`	`"bottom-right"`	Widget position
`defaultOpen`	`boolean`	`false`	Open the widget on page load
`hideOnPaths`	`string[]`	`[]`	URL paths where the widget is hidden

Programmatic control

import { useTicket0 } from "@ticket0/react"

function HelpButton() {
  const { open, close, toggle } = useTicket0()

  return <button onClick={open}>Get help</button>
}

useTicket0 must be used inside a component that's a descendant of <Ticket0Widget>.

Pre-filling customer identity

If your users are signed in, pass their identity so support agents see who they're talking to:

<Ticket0Widget
  workspaceId="ws_your_workspace_id"
  customer={{
    email: user.email,
    name: user.name,
    externalId: user.id,
  }}
/>

The customer's identity is visible in the ticket view and linked to their customer record in Ticket0.