Products & Surfaces

Embedding the chat widget (React)

For React applications, use the React embed code from the Ship tab of your chat Surface for tighter integration with your app’s component lifecycle.

Getting the embed code

  1. Open your Product and select the chat Surface.
  2. Go to the Ship tab.
  3. Select the React tab.
  4. Select or create a Client Token.
  5. Copy the generated React code.

The generated code uses @runtypelabs/persona to initialize the chat widget within a React component, including cleanup on unmount.

Installation

Install the Persona package:

$npm install @runtypelabs/persona

Usage

Paste the generated code from the Ship tab into your React component. The code handles:

  • Widget initialization with your Client Token and theme
  • Mounting to a container element via useRef
  • Cleanup via destroy() on component unmount

The Ship tab generates a complete working component. Customize it further as needed for your application.

Client Tokens

Chat widgets use Client Tokens (with the ct_live_ or ct_test_ prefix) instead of API keys. They are safe to expose in client-side code. Create and manage them in the Auth tab of your chat Surface.

Next steps