@helpkite/js

Official JavaScript SDK for HelpKite - Customer Support Chat Widget

Installation

npm install @helpkite/js

Or with yarn:

yarn add @helpkite/js

Quick Start

React / Next.js

import { helpkite } from '@helpkite/js';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    helpkite.init({
      agentId: 'your-agent-id',
      hidden: false, // Optional: show widget by default
    });
  }, []);

  return <div>Your App</div>;
}

Vanilla JavaScript

import { helpkite } from '@helpkite/js';

helpkite.init({
  agentId: 'your-agent-id',
  hidden: false,
});

TypeScript

Full TypeScript support is included:

import { helpkite, type HelpKiteConfig } from '@helpkite/js';

const config: HelpKiteConfig = {
  agentId: 'your-agent-id',
  hidden: false,
};

helpkite.init(config);

API Methods

helpkite.init(config)

Initialize the HelpKite widget.

helpkite.init({
  agentId: 'your-agent-id', // Required
  hidden: false, // Optional: show/hide widget on load
});

helpkite.show()

Show the widget button.

helpkite.show();

helpkite.hide()

Hide the widget button.

helpkite.hide();

helpkite.open()

Open the chat widget.

helpkite.open();

helpkite.close()

Close the chat widget.

helpkite.close();

helpkite.identify(user)

Identify or update the current user.

helpkite.identify({
  userId: '123',
  name: 'John Doe',
  email: '[email protected]',
  company: 'Acme Corp',
});

helpkite.on(event, callback)

Listen to widget events.

helpkite.on('ready', () => {
  console.log('Widget is ready');
});

helpkite.on('open', () => {
  console.log('Widget opened');
});

helpkite.on('close', () => {
  console.log('Widget closed');
});

Available events:

• ready - Widget is ready
• open - Widget opened
• close - Widget closed
• messageSent - Message sent by user
• messageReceived - Message received from agent

User Authentication

For logged-in users, you can pass user information for identity verification:

helpkite.init({
  agentId: 'your-agent-id',
  user_id: 'user_123',
  user_hash: 'generated_hmac_hash', // Generated on your server
  user_metadata: {
    name: 'John Doe',
    email: '[email protected]',
    company: 'Acme Corp',
  },
});

Note: The user_hash must be generated on your server using HMAC-SHA256. See the HelpKite documentation for details.

License

MIT