Example — React App (npm)

npm install @wexio/messenger-widget-react

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

export function ChatWidget({ currentUser, wexioJwt }) {
  // Memoise the identity so the widget doesn't re-handshake every render.
  const user = useMemo(
    () =>
      wexioJwt
        ? { jwt: wexioJwt, name: currentUser?.name, email: currentUser?.email }
        : undefined,
    [wexioJwt, currentUser?.name, currentUser?.email],
  );

  return (
    <WexioWidget
      publicKey="pk_live_..."
      user={user}
      onOpen={() => console.log("widget opened")}
      onClose={() => console.log("widget closed")}
    />
  );
}

export default function App() {
  return (
    <>
      <YourAppShell />
      <ChatWidget currentUser={currentUser} wexioJwt={wexioJwt} />
    </>
  );
}