React

@krakentech/ink-live-chat-widget-react is a thin wrapper around the core widget. It mounts the <ink-live-chat-widget> custom element, passes your config through unchanged, and calls destroy() on unmount. It adds no widget logic of its own.

Install both packages first — see Installation.

Basic usage

'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',
        userHandle: 'user@example.com',
      }}
    />
  );
}

Props

Prop	Type	Description
config	InkLiveChatWidgetConfig	Full widget config (required). See the Configuration reference.
className	string	Applied to the mount container div.
onReady	(el) => void	Called once after the widget mounts. Use for imperative setConfig / destroy() on the element instance.

Lifecycle and config updates

The wrapper calls init() on mount and destroy() on unmount. When the config prop changes to a new object reference after mount, the wrapper calls setConfig() with the new value.

The widget only updates what changed. For example, a new theme or themePreset changes the colours without disturbing an open chat, and passing the same values again does nothing. See Updating config for what each key does.

Even so, memoize the config (or pass values that don't change between renders), so the widget isn't asked to update on every render of your component:

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

export function Chat({ accountNumber, userHandle }: Props) {
  const config = useMemo(
    () => ({
      apiUrl: 'https://api.example.com/graphql',
      accountNumber,
      userHandle,
    }),
    [accountNumber, userHandle],
  );

  return <InkLiveChatWidget config={config} />;
}

If you pass getHeaders (the direct GraphQL setup), wrap it in useCallback. A new function on every render looks like new headers to the widget, so it would check for messages again on every render. The function can still return a fresh token each time it's called:

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

export function Chat({ accountNumber, userHandle }: Props) {
  const getHeaders = useCallback(
    async () => ({ Authorization: `Bearer ${await getAccessToken()}` }),
    [],
  );

  const config = useMemo(
    () => ({
      apiUrl: 'https://api.example.com/graphql',
      accountNumber,
      userHandle,
      getHeaders,
    }),
    [accountNumber, userHandle, getHeaders],
  );

  return <InkLiveChatWidget config={config} />;
}

Re-exported APIs

Types and low-level APIs from the core package are re-exported for convenience:

import {
  InkLiveChatWidget,
  type InkLiveChatWidgetConfig,
  init,
  TAG_NAME,
} from '@krakentech/ink-live-chat-widget-react';

Next.js

React Server Components require extra care because the core widget registers a custom element at import time. See the dedicated Next.js guide.