Quickstart

Create an API key in the Whop Developer Dashboard and save it on your server as WHOP_API_KEY.

This key will allow you to perform actions within the context of your company. Keep it on the server. Never put it in browser, mobile, or client-side code.

Install the SDK in your backend:

pnpm add @whop/sdk

Install the elements packages in your frontend:

pnpm add @whop/embedded-components-react-js @whop/embedded-components-vanilla-js

Enroll your own users as connected accounts before minting chat tokens. This creates a Whop account you can map back to your platform user.

import Whop from "@whop/sdk";
const client = new Whop({ apiKey: process.env.WHOP_API_KEY });
const company = await client.companies.create({
  email: "user@example.com",
  parent_company_id: "biz_XXXXXXXXXXXXX", // your platform's company ID
  title: "Jane Doe",
  metadata: {
    internal_user_id: "user_12345", // your platform's user ID
  },
});

Save the resulting Whop user ID (owner_user.id in the response) on your side and pass it as user_id when you create chat access tokens.

See company-specific profiles for more details on how to update users avatars and display names.

Add an endpoint that calls POST https://api.whop.com/api/v1/access_tokens with your API key and returns the resulting token to the client.

import { NextResponse } from "next/server";
import Whop from "@whop/sdk";
const client = new Whop({ apiKey: process.env.WHOP_API_KEY });
export async function POST() {
  // Derive these from your own auth / session in production.
  const user_id = "user_XXXXXXXXXXXX";
  const company_id = "biz_XXXXXXXXXXXXX";
  const { token } = await client.accessTokens.create({
    company_id,
    user_id,
    scoped_actions: [
      "chat:message:create",
      "chat:read",
      "dms:read",
      "dms:message:manage",
      "dms:channel:manage",
      "support_chat:read",
      "support_chat:message:create",
    ],
  });
  return NextResponse.json({ token });
}

All chat types use real-time messaging and can render in the Chat element. Pick the type based on your needs:

Before rendering chat, get the channel ID you want to open.

• Channels IDs start with chat_feed_.
• DMs and support chats IDs start with feed_.

This will use the token endpoint you created to fetch a token and render the chat element. The SDK is responsible of managing the token and refreshing it when necessary.

"use client";
import {
  ChatElement,
  ChatSession,
  Elements,
} from "@whop/embedded-components-react-js";
import { loadWhopElements } from "@whop/embedded-components-vanilla-js";
const elements = loadWhopElements();
async function getToken() {
  const res = await fetch("https://your-server.com/api/chat/token", { method: "POST" });
  const data = await res.json();
  return data.token;
}
export function Chat() {
  return (
    <Elements elements={elements}>
      <ChatSession token={getToken}>
        <ChatElement
          options={{ channelId: "chat_feed_XXXXXXXXXXXXXX" }}
          style={{ height: "100dvh", width: "100%" }}
        />
      </ChatSession>
    </Elements>
  );
}

Next steps