Next.js

The chat needs the browser, so it goes in a client component. Render that component in the root layout: the chat then stays open as visitors move between pages.

npm install @wireface/chat

// app/chat.tsx
'use client';
import type { VisitorIdentity } from '@wireface/chat';
import { WirefaceChat } from '@wireface/chat/react';

export function Chat({ user }: { user?: VisitorIdentity }) {
  return (
    <WirefaceChat
      host={process.env.NEXT_PUBLIC_WIREFACE_HOST!}
      bot={process.env.NEXT_PUBLIC_WIREFACE_BOT!}
      user={user}
      theme="auto"
    />
  );
}

// app/layout.tsx (a server component)
import type { ReactNode } from 'react';
import { Chat } from './chat';
import { identityFor } from './identity';

export default async function RootLayout({ children }: { children: ReactNode }) {
  const user = await currentUser(); // your session lookup, or null
  return (
    <html lang="en">
      <body>
        {children}
        <Chat user={user ? identityFor(user) : undefined} />
      </body>
    </html>
  );
}

Identity, signed on the server

Keep the identity secret in a server-only module, so it can never end up in the browser bundle:

// app/identity.ts
import 'server-only';
import { createHmac } from 'node:crypto';

export function identityFor(user: { id: string; name: string; email: string }) {
  const hash = createHmac('sha256', process.env.WIREFACE_IDENTITY_SECRET!).update(user.id).digest('hex');
  return { id: user.id, name: user.name, email: user.email, hash };
}

WIREFACE_IDENTITY_SECRET has no NEXT_PUBLIC_ prefix, so Next.js never exposes it to the browser. See Identity verification.

Notes

• Route changes are followed automatically (the widget watches history.pushState), so the agent knows which page the visitor is on. See Single-page apps.
• When a user signs out, call getWirefaceChat()?.shutdown({ forget: true }) (from @wireface/chat) and render <Chat key={user?.id ?? 'anonymous'} ... />, so the chat starts again for the next visitor (a full page load after sign-out works too). See React.
• With the Pages Router, render <Chat /> in pages/_app.tsx.
• Prefer a script tag? next/script works too: <Script src="https://chat.example.com/widget.js" data-bot="pk_your_bot_id" strategy="afterInteractive" />.

examples/nextjs-app-router/ in the repo is a runnable app.