Quickstart

Create an API key

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 packages

Install the SDK in your backend:

Next.js
Express
cURL

pnpm add @whop/sdk

pnpm add @whop/sdk

Install the elements packages in your frontend:

React
HTML
iOS

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

<script src="https://apollo.elements.whop.com/release/elements.js"></script>

Add this Swift package in Xcode:

https://github.com/whopio/whopsdk-elements-swift

Chat supports photos, videos, and voice messages, so add these permissions to your app’s Info.plist:

Info.plist

<key>NSCameraUsageDescription</key>
<string>Allow camera access to take photos and videos in chat</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow microphone access to record voice messages in chat</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Allow photo library access to share photos and videos in chat</string>

Get a user ID for your users

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

Next.js
Express
cURL

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

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

curl -X POST https://api.whop.com/api/v1/companies \
  -H "Authorization: Bearer $WHOP_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "parent_company_id": "biz_XXXXXXXXXXXXX",
    "title": "Jane Doe",
    "metadata": {
      "internal_user_id": "user_12345"
    }
  }'

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.

Create a token endpoint on your server

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.

Next.js
Express
cURL

app/api/chat/token/route.ts

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 });
}

server.ts

import express from "express";
import Whop from "@whop/sdk";

const app = express();
app.use(express.json());

const client = new Whop({ apiKey: process.env.WHOP_API_KEY });

app.post("/api/chat/token", async (_req, res) => {
  // 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",
    ],
  });

  res.json({ token });
});

app.listen(3000);

curl -X POST https://api.whop.com/api/v1/access_tokens \
  -H "Authorization: Bearer $WHOP_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "company_id": "biz_XXXXXXXXXXXXX",
    "user_id": "user_XXXXXXXXXXXX",
    "scoped_actions": [
      "chat:message:create",
      "chat:read",
      "dms:read",
      "dms:message:manage",
      "dms:channel:manage",
      "support_chat:read",
      "support_chat:message:create"
    ]
  }'

Create or fetch a channel, DM, or support chat

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

Channels

A shared chat for public or large group conversations. Rooms with moderation, read-only options, and no fixed member cap.

Direct messages

A private conversation between users. They show in the DMs list and can include up to 50 members.

Support chat

A one-on-one support conversation between a user and your company. Customers see them like DMs; admins manage them through a support inbox instead of the DMs list.

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_.

Render chat in your app

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.

React
HTML
iOS

"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>
  );
}

<div id="chat" style="height: 100vh"></div>

<script>
  const elements = new WhopElements();

  async function getToken() {
    const res = await fetch("https://your-server.com/api/chat/token", { method: "POST" });
    const data = await res.json();
    return data.token;
  }

  const session = elements.createChatSession({ token: getToken });
  const chat = session.createElement("chat-element", {
    channelId: "chat_feed_XXXXXXXXXXXXXX",
  });

  chat.mount("#chat");
</script>

import SwiftUI
import WhopElements

struct ContentView: View {
  var body: some View {
    WhopChatView(
      channelId: "chat_feed_XXXXXXXXXXXXXX",
      style: .imessage
    )
    // This should be done as soon as you know your user is authenticated so its
    // prepared and ready to use without delays.
    .task {
      await WhopSDK.configure(tokenProvider: WhopAPITokenProvider())
    }
  }
}

class WhopAPITokenProvider: WhopTokenProvider {
  func getToken() async -> WhopTokenResponse {
    let url = URL(string: "https://your-server.com/api/chat/token")!
    var request = URLRequest(url: url)
    request.httpMethod = "POST"

    do {
      let (data, _) = try await URLSession.shared.data(for: request)
      let json = try JSONSerialization.jsonObject(with: data) as! [String: Any]
      return WhopTokenResponse(accessToken: json["token"] as? String ?? "")
    } catch {
      return WhopTokenResponse(accessToken: "")
    }
  }
}

Next steps

Authentication

Choose between company-scoped tokens and OAuth for embedded chat.

Sync your users

Create or map Whop users before minting company-scoped chat tokens.

Chat element

Learn the props, events, styles, and deeplinking options for the chat UI.

DMs list element

Show a list of a user’s direct message conversations.

Get started

Setup

Chat types

Components

Create an API key

Install packages

Get a user ID for your users

Create a token endpoint on your server

Create or fetch a channel, DM, or support chat

Channels

Direct messages

Support chat

Render chat in your app

Next steps

Authentication

Sync your users

Chat element

DMs list element

​Create an API key

​Install packages

​Get a user ID for your users

​Create a token endpoint on your server

​Create or fetch a channel, DM, or support chat

Channels

Direct messages

Support chat

​Render chat in your app

​Next steps

Authentication

Sync your users

Chat element

DMs list element

Create an API key

Install packages

Get a user ID for your users

Create a token endpoint on your server

Create or fetch a channel, DM, or support chat

Render chat in your app

Next steps