Next.js

'use client'

import { TicketpingProvider } from '@ticketping/chat-widget/react'

type User = { id: string; email?: string | null; name?: string | null }

async function getToken() {
  const res = await fetch('/api/ticketping-token', { method: 'POST' })
  if (!res.ok) throw new Error(`Ticketping token request failed (${res.status})`)
  return res.text()
}

export function Providers({ user, children }: { user: User | null; children: React.ReactNode }) {
  return (
    <TicketpingProvider publishableKey="pk_..." user={user} getToken={getToken}>
      {children}
    </TicketpingProvider>
  )
}

import { auth } from '@/auth'
import { Providers } from './providers'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await auth()
  const user = session?.user?.id
    ? { id: session.user.id, email: session.user.email, name: session.user.name }
    : null

  return (
    <html lang="en">
      <body>
        <Providers user={user}>{children}</Providers>
      </body>
    </html>
  )
}

import { SignJWT } from 'jose'
import { auth } from '@/auth'

const secret = new TextEncoder().encode(process.env.TICKETPING_IDENTITY_SECRET)

export async function POST() {
  const session = await auth()
  const user = session?.user
  if (!user?.id) return new Response('Unauthorized', { status: 401 })

  const profile: Record<string, string> = {}
  if (user.email) profile.email = user.email
  if (user.name) profile.name = user.name

  const token = await new SignJWT(profile)
    .setProtectedHeader({ alg: 'HS256' })
    .setSubject(String(user.id))
    .setExpirationTime('5m')
    .sign(secret)

  return new Response(token, { headers: { 'Content-Type': 'text/plain' } })
}

TICKETPING_IDENTITY_SECRET=tpis_...

'use client'

import { useTicketping } from '@ticketping/chat-widget/react'

export function HelpButton() {
  const { unreadCount, open, showNewMessage } = useTicketping()

  return (
    <>
      <button onClick={open}>Help{unreadCount > 0 ? ` (${unreadCount})` : ''}</button>
      <button onClick={() => showNewMessage('I have a question about billing')}>
        Ask about billing
      </button>
    </>
  )
}

Add the Ticketping chat widget (v2) to this Next.js App Router app.

Docs index: https://ticketping.com/llms.txt
This page as Markdown: https://ticketping.com/docs/react-nextjs.md

1. Install @ticketping/chat-widget@next and jose.
2. Create app/providers.tsx ('use client') that renders
   <TicketpingProvider publishableKey="pk_..." user={user} getToken={getToken}> from '@ticketping/chat-widget/react'.
   getToken POSTs to /api/ticketping-token and returns res.text(); throw if !res.ok.
   Ask me for the publishable key (starts with pk_). It's public.
3. In app/layout.tsx, read the signed-in user with this app's existing auth (server side) and pass
   { id, email, name } or null to <Providers user={...}>.
4. Create app/api/ticketping-token/route.ts with a POST handler that returns 401 when nobody is signed in,
   and otherwise returns, as text/plain, a JWT made with jose:
   new SignJWT({ email, name }).setProtectedHeader({ alg: 'HS256' }).setSubject(String(user.id)).setExpirationTime('5m')
   signed with new TextEncoder().encode(process.env.TICKETPING_IDENTITY_SECRET).
   Use the code on the docs page above and adapt only the user lookup.
5. Add TICKETPING_IDENTITY_SECRET= to .env.local (not committed) and .env.example. Never use a NEXT_PUBLIC_ prefix.
6. Don't cache tokens; the widget asks for a fresh one when it needs it.
7. Tell me how to verify: sign in on localhost, run await (await fetch('/api/ticketping-token', { method: 'POST' })).text()
   in the console, and paste the token into the token validator at Settings → API → Identity secret.