@sanela/webchat-react

React / Next.js wrapper around @sanela/webchat-runtime.

Drop a <ChatWidget /> into your tree and the widget handles the rest. SSR-safe — server-renders a placeholder, real mount happens in useEffect.

Install

pnpm add @sanela/webchat-react

React 18 and 19 are supported (peer dep ^18 || ^19). react-dom is required at the same major.

Use

"use client";
import { ChatWidget } from "@sanela/webchat-react";

export function ChatWidgetMount({ user, order }: Props) {
  return (
    <ChatWidget
      sourceKey={process.env.NEXT_PUBLIC_WEBCHAT_PUBLIC_KEY!}
      origin={process.env.NEXT_PUBLIC_WEBCHAT_CONVEX_URL!}
      dashboardOrigin={process.env.NEXT_PUBLIC_WEBCHAT_DASHBOARD_ORIGIN!}
      identity={user && {
        id: user.id,
        email: user.email,
        signature: user.webchatSignature, // computed server-side via widgetSecret
      }}
      context={order && {
        order_id: order.id,
        cart_total: order.total,
      }}
    />
  );
}

The four env vars come from the dashboard's «AI агент» tab — paste the .env block it generates into your project's secret store.

License

MIT