Next.js

The widget works well with Next.js (App Router), but the core widget registers a custom element at import time, which is not safe during server rendering. Render it from a client component.

Render in a client component

Mark the file with 'use client' so the widget only loads in the browser:

'use client';

import { InkLiveChatWidget } from '@krakentech/ink-live-chat-widget-react';

export function Chat() {
  return (
    <InkLiveChatWidget
      config={{
        apiUrl: '/api/graphql',
        accountNumber: 'A-123',
        userEmail: 'user@example.com',
      }}
    />
  );
}

You can then render <Chat /> from a server component or layout — the 'use client' boundary keeps the widget out of server rendering.

Recommended: same-origin proxy

Next.js apps typically keep tokens off the client using httpOnly cookies. The recommended pattern is to point the widget at a same-origin proxy route (e.g. /api/graphql) that attaches the token server-side. This also avoids browser CORS entirely.

See:

• Authentication overview — patterns A & B.
• Proxy and CORS — why the proxy avoids CORS.
• Next.js & blueprint-auth — an optional reference implementation using Kraken's auth library.

Client-side token (no proxy)

If your app holds an access token in the browser and calls Kraken directly, use getHeaders instead of a proxy:

'use client';

import { InkLiveChatWidget } from '@krakentech/ink-live-chat-widget-react';

export function Chat() {
  return (
    <InkLiveChatWidget
      config={{
        apiUrl: 'https://api.example.com/graphql',
        accountNumber: 'A-123',
        userEmail: 'user@example.com',
        getHeaders: async () => ({
          Authorization: `Bearer ${await getAccessToken()}`,
        }),
      }}
    />
  );
}

This requires CORS to be configured on the GraphQL endpoint for your site's origin — see Proxy and CORS.