Skip to main content

Quick Start

This page gets a chat widget on screen with the minimum configuration. It assumes you have already completed Installation.

All integrations need three required values:

PropertyDescription
apiUrlAbsolute GraphQL endpoint the widget POSTs to (must be https:, except local dev).
accountNumberThe signed-in customer's account identifier, e.g. A-B280147D.
userEmailThe user handle sent as fromHandle when posting messages.

See the Configuration overview for every available option.

React​

'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',
      }}
    />
  );
}

The example above assumes a same-origin proxy handles authentication. If the browser calls Kraken directly, add a getHeaders callback — see Authentication.

Vanilla JavaScript (bundler)​

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

const el = init(document.getElementById('chat-root'), {
  apiUrl: 'https://api.example.com/graphql',
  accountNumber: 'A-123',
  userEmail: 'user@example.com',
});

// Update configuration later:
el.setConfig({ theme: { userBubbleBgColor: '#2563eb' } });

Script tag (no bundler)​

<div id="chat-root"></div>
<script src="/static/ink-live-chat-widget.js"></script>
<script>
  InkLiveChatWidget.init(document.getElementById('chat-root'), {
    apiUrl: 'https://api.example.com/graphql',
    accountNumber: 'A-123',
    userEmail: 'user@example.com',
  });
</script>

See the Vanilla JS guide for details on hosting the script-tag build.

Add authentication​

The examples above are intentionally minimal. Before going to production, choose an authentication pattern that matches your stack:

Next steps​