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',
        userEmail: '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.

To avoid unnecessary updates, memoize the config or pass stable fields:

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

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

  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.