React Component

For React hosts, install the @wexio/messenger-widget-react package. The component renders into a Shadow DOM portal, so the widget's styles never leak into your app and vice-versa.

Install

npm install @wexio/messenger-widget-react
# or
yarn add @wexio/messenger-widget-react

Peer dependencies: react >= 18 and react-dom >= 18.

Basic usage

Render the component once, typically near the root of your app:

import { WexioWidget } from "@wexio/messenger-widget-react";

export default function App() {
  return (
    <>
      <YourAppShell />
      <WexioWidget publicKey="pk_live_..." />
    </>
  );
}

The component returns null on the server and mounts its Shadow DOM portal on the first client effect, so it's safe in SSR frameworks like Next.js.

Props

Prop	Type	Purpose
`publicKey`	`string`	Your widget's public key. Omit for demo mode.
`user`	`VisitorIdentity`	A known-visitor proof — `jwt`, `googleIdToken`, or `userId` + `userHash`. Memoise it. See Authentication.
`config`	`InjectableWidgetConfig`	A pre-resolved config; skips the bootstrap fetch. The widget still uses `publicKey` for the visitor handshake.
`onResize`	`(size: { width: number; height: number }) => void`	Fires whenever the panel's dimensions change.
`onOpen`	`() => void`	Fires when the visitor opens the panel.
`onClose`	`() => void`	Fires when the visitor closes the panel.
`className`	`string`	Applied to the outer host element.
`style`	`React.CSSProperties`	Inline styles for the outer host element.

Identifying a visitor

Pass a memoised user prop. Changing it re-runs the handshake; setting it to undefined logs the visitor out:

<WexioWidget
  publicKey="pk_live_..."
  user={{ jwt: serverSignedJwt, name: "Ada Lovelace", email: "ada@example.com" }}
  onOpen={() => analytics.track("widget_opened")}
/>

Build the user object outside render or wrap it in useMemo. The widget keys its handshake on the proof, so a fresh object literal every render can re-trigger work.

Without an npm install (ESM CDN)

If you can't add a dependency, load the React bundle straight from the CDN with an import map:

<script type="importmap">
{
  "imports": {
    "react":            "https://esm.sh/react@19",
    "react-dom":        "https://esm.sh/react-dom@19",
    "react-dom/client": "https://esm.sh/react-dom@19/client",
    "react/jsx-runtime":"https://esm.sh/react@19/jsx-runtime"
  }
}
</script>

<div id="widget-mount"></div>

<script type="module">
  import { createElement } from "react";
  import { createRoot } from "react-dom/client";
  import { WexioWidget } from "https://cdn.wexio.io/widget/widget-react.js";

  const root = createRoot(document.getElementById("widget-mount"));
  root.render(createElement(WexioWidget, { publicKey: "pk_live_..." }));
</script>

Authentication — produce a VisitorIdentity proof.
Theming with config — pass a theme via the config prop.
API reference — full prop list and types.