💬 SupportKit SDK

Drop-in customer chat widget — connect visitors to your SupportKit inbox.

🏠 Dashboard

Create projects, copy API keys, and manage conversations:

https://supportkit-dashboard.vercel.app

📦 Installation

npm install supportkit-sdk

Package page: https://www.npmjs.com/package/supportkit-sdk

CDN

<script src="https://cdn.jsdelivr.net/npm/supportkit-sdk@latest/dist/supportkit.umd.js"></script>

🚀 Quick start

import { SupportKit } from 'supportkit-sdk';

SupportKit.init({
  apiKey: 'sk_your_api_key_here',
  position: 'bottom-right',
  user: {
    id: 'user_123',
    name: 'John Doe',
    email: '[email protected]',
  },
});

CDN

<script src="https://cdn.jsdelivr.net/npm/supportkit-sdk@latest/dist/supportkit.umd.js"></script>
<script>
  SupportKit.init({
    apiKey: 'sk_your_api_key_here',
    position: 'bottom-right',
    user: {
      id: 'user_123',
      name: 'John Doe',
      email: '[email protected]',
    },
  });
</script>

🔑 Environment variable (recommended)

Use SUPPORTKIT_API_KEY in your app config—never commit real keys.

Next.js: add to .env.local and expose it in next.config so client components can read process.env.SUPPORTKIT_API_KEY:

# .env.local
SUPPORTKIT_API_KEY=sk_your_api_key_here

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    SUPPORTKIT_API_KEY: process.env.SUPPORTKIT_API_KEY ?? '',
  },
};
export default nextConfig;

Then pass apiKey: process.env.SUPPORTKIT_API_KEY ?? '' in SupportKit.init.

Other frameworks: load your project key from whatever env mechanism your bundler exposes to the browser, then pass it as apiKey.

⚙️ Configuration

SupportKit.init({
  apiKey: string, // required — project API key (sk_…)

  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left',

  theme?: {
    primaryColor?: string,
    backgroundColor?: string,
    textColor?: string,
    fontFamily?: string,
    borderRadius?: string,
    zIndex?: number,
  },

  locale?: string,

  user?: {
    id?: string,
    name?: string,
    email?: string,
    avatar?: string,
  },
});

🔌 Framework integration

Important

• SupportKit.init is a singleton — call destroy() before re-initting when the user changes or logs out.
• Wait until auth / user is loaded before init, or you may see “Anonymous” in the inbox.

Next.js (App Router)

'use client';

import { useEffect } from 'react';

export default function SupportKitProvider({
  ready,
  user,
}: {
  ready: boolean;
  user: { id: string; name?: string | null; email?: string | null } | null;
}) {
  useEffect(() => {
    let cancelled = false;

    if (!ready) return;

    if (!user) {
      void import('supportkit-sdk').then(({ SupportKit }) => {
        SupportKit.getInstance()?.destroy();
      });
      return;
    }

    void import('supportkit-sdk').then(({ SupportKit }) => {
      if (cancelled) return;
      SupportKit.getInstance()?.destroy();
      SupportKit.init({
        apiKey: process.env.SUPPORTKIT_API_KEY ?? '',
        position: 'bottom-right',
        user: {
          id: user.id,
          name: user.name ?? user.email ?? 'User',
          email: user.email ?? undefined,
        },
      });
    });

    return () => {
      cancelled = true;
    };
  }, [ready, user, user?.id, user?.email]);

  return null;
}

Wire ready and user from your auth library (Privy, Clerk, NextAuth, etc.).

React (SPA)

import { useEffect } from 'react';
import { SupportKit } from 'supportkit-sdk';

function App({ currentUser }) {
  useEffect(() => {
    if (!currentUser) return;

    SupportKit.getInstance()?.destroy();
    const sdk = SupportKit.init({
      apiKey: process.env.SUPPORTKIT_API_KEY ?? '',
      position: 'bottom-right',
      user: {
        id: currentUser.id,
        name: currentUser.name,
        email: currentUser.email,
      },
    });

    return () => sdk.destroy();
  }, [currentUser]);

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

Ensure your build exposes SUPPORTKIT_API_KEY to client code (see Next.js above for the standard pattern).

🎮 API methods

const sdk = SupportKit.getInstance();
sdk?.open();
sdk?.close();
sdk?.updateUser({ id: '…', name: '…', email: '…' });
sdk?.destroy();
const cfg = sdk?.getConfig();

🌍 Internationalization

SupportKit.init({
  apiKey: 'sk_your_key',
  locale: 'es',
});

Supported locales include en, es, fr, de, pt, ja, zh.

🛠️ Development (maintainers)

pnpm install
pnpm dev
pnpm build
pnpm type-check

🔒 Security

• API keys are sent as X-API-Key over HTTPS.
• Client-side apps cannot hide the key from determined users—treat it like a publishable credential scoped to your SupportKit project.

🐛 Troubleshooting

| Issue | What to check | | --- | --- | | 401 / Invalid API key | Key matches a project on the same dashboard deployment you’re targeting; no stray spaces; Next.js: env + next.config env, then rebuild/redeploy. | | Anonymous in inbox | init ran before user existed — gate on auth ready + stable user.id. |

📄 License

MIT

Made with ❤️ by the SupportKit team