> ## Documentation Index > Fetch the complete documentation index at: https://docs.whop.com/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Embed Whop chat in your app in minutes export const code = { auth: { token: [{ code: `import { NextResponse } from "next/server"; // [step:1.1:start] // Retrieve user id via your own auth/session system. // For a quick test, you can hardcode them. const USER_ID = "user_XXXXXXXXXXXX"; const COMPANY_ID = "biz_XXXXXXXXXXXXX"; // [step:1.1:end] export async function POST() { // [step:1.2:start] const response = await fetch("https://api.whop.com/api/v1/access_tokens", { method: "POST", headers: { Authorization: \`Bearer \${process.env.WHOP_API_KEY}\`, "Content-Type": "application/json", }, body: JSON.stringify({ company_id: COMPANY_ID, user_id: USER_ID, scoped_actions: [ "chat:read", // view messages in experience chats "chat:message:create", // post messages in experience chats "dms:read", // view DM threads "dms:message:manage", // send / edit / delete DMs "dms:channel:manage", // create / update DM channels "support_chat:read", // view the user's own support chat "support_chat:message:create", // post in support chats ], }), }); const data = await response.json(); return NextResponse.json({ token: data.token }); // [step:1.2:end] } `, filename: "app/api/chat/token/route.ts", language: "typescript", conditions: [{ category: "backend", value: "nextjs" }] }, { code: `import express from "express"; const app = express(); app.use(express.json()); // [step:1.1:start] // Retrieve user id via your own auth/session system. // For a quick test, you can hardcode them. const USER_ID = "user_XXXXXXXXXXXX"; const COMPANY_ID = "biz_XXXXXXXXXXXXX"; // [step:1.1:end] app.post("/api/chat/token", async (_req, res) => { // [step:1.2:start] const response = await fetch("https://api.whop.com/api/v1/access_tokens", { method: "POST", headers: { Authorization: \`Bearer \${process.env.WHOP_API_KEY}\`, "Content-Type": "application/json", }, body: JSON.stringify({ company_id: COMPANY_ID, user_id: USER_ID, scoped_actions: [ "chat:read", // view messages in experience chats "chat:message:create", // post messages in experience chats "dms:read", // view DM threads "dms:message:manage", // send / edit / delete DMs "dms:channel:manage", // create / update DM channels "support_chat:read", // view the user's own support chat "support_chat:message:create", // post in support chats ], }), }); const data = await response.json(); res.json({ token: data.token }); // [step:1.2:end] }); app.listen(3000, () => console.log("Server running on port 3000")); `, filename: "server.ts", language: "typescript", conditions: [{ category: "backend", value: "express" }] }, { code: ` Chat
`, filename: "chat.html", language: "html", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:2.3:start] import { // [step:2.3:end] // [step:2.4] ChatElement, ChatSession, Elements, // [step:2.3] } from "@whop/embedded-components-react-js"; // [step:2.2] import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.4] import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types"; import { useMemo } from "react"; // [step:2.2] const elements = loadWhopElements(); // [step:2.3:start] // Called by ChatSession on mount and again before the token expires, // so it must always return a fresh token — don't cache a stale one. async function getToken() { const res = await fetch("/api/chat/token", { method: "POST" }); const data = await res.json(); if (!data.token) throw new Error("Failed to fetch token"); return data.token; } // [step:2.3:end] export function Chat() { // [step:2.4:start] const chatOptions: ChatElementOptions = useMemo(() => { return { channelId: "chat_XXXXXXXXXXXXXX", }; }, []); // [step:2.4:end] return ( // [step:2.3:start] {/* [step:2.3:end] */} {/* [step:2.4:start] */} {/* [step:2.4:end] */} ); } `, filename: "chat.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }] }, { code: `import SwiftUI // [step:2.1] import WhopElements struct ContentView: View { var body: some View { NavigationStack { // [step:2.4] WhopChatView( channelId: "chat_XXXXXXXXXXXXXX", style: .imessage ) } // [step:2.2:start] .task { await WhopSDK.configure(tokenProvider: WhopAPITokenProvider()) } // [step:2.2:end] } } // [step:2.2:start] class WhopAPITokenProvider: WhopTokenProvider { private let serverURL = URL(string: "https://your-server.com")! func getToken() async -> WhopTokenResponse { do { var req = URLRequest(url: serverURL.appendingPathComponent("api/chat/token")) req.httpMethod = "POST" let (data, _) = try await URLSession.shared.data(for: req) let json = try JSONSerialization.jsonObject(with: data) as! [String: Any] return WhopTokenResponse(accessToken: json["token"] as? String ?? "") } catch { return WhopTokenResponse(accessToken: "") } } } // [step:2.2:end] `, filename: "ChatView.swift", language: "swift", conditions: [{ category: "client", value: "swift" }] }], "better-auth": [{ code: `# [step:1.2:start] # Your Whop OAuth app client ID # Get yours at: https://whop.com/dashboard/developer WHOP_CLIENT_ID= # Secret key for encryption # Generate one with: openssl rand -base64 32 BETTER_AUTH_SECRET= # Base URL of your app BETTER_AUTH_URL=http://localhost:3000 # [step:1.2:end] `, filename: ".env", language: "bash", conditions: [{ category: "backend", value: "express" }, { category: "client", value: ["react", "html"] }] }, { code: `# [step:1.2:start] # Your Whop OAuth app client ID # Get yours at: https://whop.com/dashboard/developer WHOP_CLIENT_ID= # Secret key for encryption # Generate one with: openssl rand -base64 32 BETTER_AUTH_SECRET= # Base URL of your app BETTER_AUTH_URL=http://localhost:3000 # [step:1.2:end] `, filename: ".env", language: "bash", conditions: [{ category: "backend", value: "nextjs" }, { category: "client", value: ["react", "html"] }] }, { code: `# [step:1.2:start] # Your Whop OAuth app client ID # Get yours at: https://whop.com/dashboard/developer WHOP_CLIENT_ID= # Secret key for encryption # Generate one with: openssl rand -base64 32 BETTER_AUTH_SECRET= # [step:1.2:end] `, filename: ".env", language: "bash", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:1.4:start] import { betterAuth } from "better-auth"; import { genericOAuth } from "better-auth/plugins"; export const auth = betterAuth({ account: { storeStateStrategy: "cookie", storeAccountCookie: true, }, plugins: [ genericOAuth({ config: [ { providerId: "whop", clientId: process.env.WHOP_CLIENT_ID ?? "", authorizationUrl: "https://api.whop.com/oauth/authorize", tokenUrl: "https://api.whop.com/oauth/token", userInfoUrl: "https://api.whop.com/oauth/userinfo", scopes: [ "openid", "profile", "email", "chat:message:create", "chat:read", "dms:read", "dms:message:manage", "dms:channel:manage", "support_chat:read", "support_chat:message:create", ], pkce: true, authorizationUrlParams: () => ({ nonce: crypto.randomUUID(), }), }, ], }), ], }); // [step:1.4:end] `, filename: "auth.ts", language: "typescript", conditions: [{ category: "client", value: ["react", "html"] }] }, { code: `import { genericOAuthClient } from "better-auth/client/plugins"; // [step:1.5:start] import { createAuthClient } from "better-auth/react"; export const authClient = createAuthClient({ plugins: [genericOAuthClient()], }); // [step:1.5:end] `, filename: "auth-client.ts", language: "typescript", conditions: [{ category: "client", value: "react" }] }, { code: `// [step:1.6:start] import { auth } from "@/lib/auth"; import { toNextJsHandler } from "better-auth/next-js"; export const { GET, POST } = toNextJsHandler(auth); // [step:1.6:end] `, filename: "api/auth/[...all]/route.ts", language: "typescript", conditions: [{ category: "backend", value: "nextjs" }, { category: "client", value: ["react", "html"] }] }, { code: `import { toNodeHandler } from "better-auth/node"; // [step:1.6:start] import express from "express"; import { auth } from "./auth"; const app = express(); const port = 3000; app.all("/api/auth/*", toNodeHandler(auth)); // For ExpressJS v4 // app.all("/api/auth/*splat", toNodeHandler(auth)); For ExpressJS v5 // Mount express json middleware after Better Auth handler // or only apply it to routes that don't interact with Better Auth app.use(express.json()); app.listen(port, () => { console.log(\`App listening on port \${port}\`); }); // [step:1.6:end] `, filename: "server.ts", language: "typescript", conditions: [{ category: "backend", value: "express" }, { category: "client", value: ["react", "html"] }] }, { code: ` `, filename: "sign-in.html", language: "html", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:1.7:start] import { authClient } from "@/lib/auth-client"; export function SignIn() { function handleSignIn() { authClient.signIn.oauth2({ providerId: "whop", callbackURL: "/chat", }); } return ( ); } // [step:1.7:end] `, filename: "sign-in.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }] }, { code: ` Chat
`, filename: "chat.html", language: "html", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:2.3] import { authClient } from "@/lib/auth-client"; // [step:2.3:start] import { // [step:2.3:end] // [step:2.4] ChatElement, ChatSession, Elements, // [step:2.3] } from "@whop/embedded-components-react-js"; // [step:2.2] import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.4] import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types"; import { useMemo } from "react"; // [step:2.2] const elements = loadWhopElements(); // [step:2.3:start] async function getToken() { const { data, error } = await authClient.getAccessToken({ providerId: "whop", }); if (error) { throw new Error("Failed to fetch token"); } return data.accessToken; } // [step:2.3:end] export function Chat() { // [step:2.4:start] const chatOptions: ChatElementOptions = useMemo(() => { return { channelId: "chat_XXXXXXXXXXXXXX", }; }, []); // [step:2.4:end] return ( // [step:2.3:start] {/* [step:2.3:end] */} {/* [step:2.4:start] */} {/* [step:2.4:end] */} ); } `, filename: "chat.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }] }, { code: `import SwiftUI // [step:2.1] import WhopElements struct ContentView: View { var body: some View { NavigationStack { // [step:2.4] WhopChatView( channelId: "chat_XXXXXXXXXXXXXX", style: .imessage ) } // [step:2.2:start] .task { await WhopSDK.configureWithOAuth( appId: "app_XXXXXXXXXXXXXX", scopes: [ "openid", "profile", "email", "chat:message:create", "chat:read", "dms:read", "dms:message:manage", "dms:channel:manage", "support_chat:read", "support_chat:message:create", ] ) } // [step:2.2:end] } } `, filename: "ChatView.swift", language: "swift", conditions: [{ category: "client", value: "swift" }] }], authjs: [{ code: `# [step:1.2:start] # Your Whop OAuth app client ID # Get yours at: https://whop.com/dashboard/developer WHOP_CLIENT_ID= # Secret key for encryption # Generate one with: npx auth secret AUTH_SECRET= # [step:1.2:end] `, filename: ".env", language: "bash", conditions: [{ category: "client", value: ["react", "html"] }] }, { code: `// [step:1.4:start] import type { DefaultSession, ExpressAuthConfig } from "@auth/express"; declare module "@auth/express" { interface Session extends DefaultSession { accessToken?: string; } } export const authConfig: ExpressAuthConfig = { providers: [ { id: "whop", name: "Whop", type: "oauth", checks: ["pkce", "state"], client: { token_endpoint_auth_method: "none", }, authorization: { url: "https://api.whop.com/oauth/authorize", params: { scope: "openid profile email chat:message:create chat:read dms:read dms:message:manage dms:channel:manage support_chat:read support_chat:message:create", nonce: crypto.randomUUID(), }, }, token: { url: "https://api.whop.com/oauth/token", async conform(response: Response) { const body = await response.json(); const { id_token: _, ...rest } = body; return new Response(JSON.stringify(rest), { status: response.status, headers: { "Content-Type": "application/json" }, }); }, }, userinfo: "https://api.whop.com/oauth/userinfo", clientId: process.env.WHOP_CLIENT_ID, profile(profile) { return { id: profile.sub, name: profile.name, email: profile.email, image: profile.picture, }; }, }, ], session: { strategy: "jwt", }, callbacks: { async jwt({ token, account }) { if (account?.access_token) { token.accessToken = account.access_token; } return token; }, async session({ session, token }) { if (token.accessToken) { session.accessToken = token.accessToken as string; } return session; }, }, }; // [step:1.4:end] `, filename: "auth.ts", language: "typescript", conditions: [{ category: "backend", value: "express" }, { category: "client", value: ["react", "html"] }] }, { code: `// [step:1.4:start] import NextAuth, { type DefaultSession } from "next-auth"; import "next-auth/jwt"; declare module "next-auth" { interface Session extends DefaultSession { accessToken?: string; } } declare module "next-auth/jwt" { interface JWT { accessToken?: string; } } export const { handlers, auth, signIn } = NextAuth({ providers: [ { id: "whop", name: "Whop", type: "oauth", checks: ["pkce", "state"], client: { token_endpoint_auth_method: "none", }, authorization: { url: "https://api.whop.com/oauth/authorize", params: { scope: "openid profile email chat:message:create chat:read dms:read dms:message:manage dms:channel:manage support_chat:read support_chat:message:create", nonce: crypto.randomUUID(), }, }, token: { url: "https://api.whop.com/oauth/token", async conform(response: Response) { const body = await response.json(); const { id_token: _, ...rest } = body; return new Response(JSON.stringify(rest), { status: response.status, headers: { "Content-Type": "application/json" }, }); }, }, userinfo: "https://api.whop.com/oauth/userinfo", clientId: process.env.WHOP_CLIENT_ID, profile(profile) { return { id: profile.sub, name: profile.name, email: profile.email, image: profile.picture, }; }, }, ], session: { strategy: "jwt", }, callbacks: { async jwt({ token, account }) { if (account?.access_token) { token.accessToken = account.access_token; } return token; }, async session({ session, token }) { if (token.accessToken) { session.accessToken = token.accessToken; } return session; }, }, }); // [step:1.4:end] `, filename: "auth.ts", language: "typescript", conditions: [{ category: "backend", value: "nextjs" }, { category: "client", value: ["react", "html"] }] }, { code: `// [step:1.6:start] import { handlers } from "@/auth"; export const { GET, POST } = handlers; // [step:1.6:end] `, filename: "api/auth/[...all]/route.ts", language: "typescript", conditions: [{ category: "backend", value: "nextjs" }, { category: "client", value: ["react", "html"] }] }, { code: `import { ExpressAuth } from "@auth/express"; // [step:1.6:start] import express from "express"; import { authConfig } from "./auth"; const app = express(); const port = 3000; app.use("/api/auth/*", ExpressAuth(authConfig)); app.listen(port, () => { console.log(\`App listening on port \${port}\`); }); // [step:1.6:end] `, filename: "server.ts", language: "typescript", conditions: [{ category: "backend", value: "express" }, { category: "client", value: ["react", "html"] }] }, { code: `// [step:1.7:start] export function SignIn() { async function handleSignIn() { const csrfRes = await fetch("/api/auth/csrf"); const csrf = await csrfRes.json(); const res = await fetch("/api/auth/signin/whop", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", "X-Auth-Return-Redirect": "1", }, body: new URLSearchParams({ csrfToken: csrf.csrfToken, callbackUrl: "/chat", }), }); const data = await res.json(); if (data.url) { window.location.href = data.url; } } return ( ); } // [step:1.7:end] `, filename: "sign-in.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }, { category: "backend", value: "express" }] }, { code: ` `, filename: "sign-in.html", language: "html", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:1.7:start] import { signIn } from "next-auth/react"; export function SignIn() { function handleSignIn() { signIn("whop", { callbackUrl: "/chat" }); } return ( ); } // [step:1.7:end] `, filename: "sign-in.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }, { category: "backend", value: "nextjs" }] }, { code: ` Chat
`, filename: "chat.html", language: "html", conditions: [{ category: "client", value: "html" }] }, { code: `// [step:2.3:start] import { // [step:2.3:end] // [step:2.4] ChatElement, ChatSession, Elements, // [step:2.3] } from "@whop/embedded-components-react-js"; // [step:2.2] import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.4] import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types"; import { useMemo } from "react"; // [step:2.2] const elements = loadWhopElements(); // [step:2.3:start] async function getToken() { return fetch("/api/auth/session") .then((res) => res.json()) .then((data) => data.accessToken); } // [step:2.3:end] export function Chat() { // [step:2.4:start] const chatOptions: ChatElementOptions = useMemo(() => { return { channelId: "chat_XXXXXXXXXXXXXX", }; }, []); // [step:2.4:end] return ( // [step:2.3:start] {/* [step:2.3:end] */} {/* [step:2.4:start] */} {/* [step:2.4:end] */} ); } `, filename: "chat.tsx", language: "tsx", conditions: [{ category: "client", value: "react" }] }, { code: `import SwiftUI // [step:2.1] import WhopElements struct ContentView: View { var body: some View { NavigationStack { // [step:2.4] WhopChatView( channelId: "chat_XXXXXXXXXXXXXX", style: .imessage ) } // [step:2.2:start] .task { await WhopSDK.configureWithOAuth( appId: "app_XXXXXXXXXXXXXX", scopes: [ "openid", "profile", "email", "chat:message:create", "chat:read", "dms:read", "dms:message:manage", "dms:channel:manage", "support_chat:read", "support_chat:message:create", ] ) } // [step:2.2:end] } } `, filename: "ChatView.swift", language: "swift", conditions: [{ category: "client", value: "swift" }] }] }, backend: { nextjs: [{ code: `import { type NextRequest, NextResponse } from "next/server"; // [step:1.1:start] import Whop from "@whop/sdk"; const whop = new Whop({ appId: process.env.WHOP_APP_ID, apiKey: process.env.WHOP_API_KEY, }); // [step:1.1:end] export async function GET(request: NextRequest) { const code = request.nextUrl.searchParams.get("code"); if (!code) { return new Response(null, { status: 400 }); } // [step:1.2:start] const tokenResponse = await whop.oauth.validateCode({ code, redirect_uri: "http://localhost:3000/api/auth/callback", }); const tokens = JSON.stringify({ access_token: tokenResponse.access_token, refresh_token: tokenResponse.refresh_token, expires_in: tokenResponse.expires_in, obtained_at: Date.now(), }); const response = NextResponse.redirect(new URL("/", request.url)); response.cookies.set("whop_tokens", tokens, { maxAge: 30 * 24 * 60 * 60, sameSite: "strict", path: "/", }); return response; // [step:1.2:end] } `, filename: "route.ts", language: "typescript" }], express: [{ code: `// [step:1.1] import Whop from "@whop/sdk"; import express from "express"; const app = express(); app.use(express.json()); // [step:1.1:start] const whop = new Whop({ appId: process.env.WHOP_APP_ID, apiKey: process.env.WHOP_API_KEY, }); // [step:1.1:end] app.get("/api/auth/callback", async (req, res) => { const code = req.query.code as string; if (!code) { return res.status(400).json({ error: "code is required" }); } // [step:1.2:start] const tokenResponse = await whop.oauth.validateCode({ code, redirect_uri: "http://localhost:3000/api/auth/callback", }); const tokens = JSON.stringify({ access_token: tokenResponse.access_token, refresh_token: tokenResponse.refresh_token, expires_in: tokenResponse.expires_in, obtained_at: Date.now(), }); res.cookie("whop_tokens", tokens, { maxAge: 30 * 24 * 60 * 60 * 1000, sameSite: "strict", path: "/", }); res.redirect("/"); // [step:1.2:end] }); app.listen(3000, () => console.log("Server running on port 3000")); `, filename: "server.ts", language: "typescript" }] }, client: { react: [{ code: `// [step:2.3:start] import { // [step:2.3:end] // [step:2.4] ChatElement, ChatSession, Elements, // [step:2.3] } from "@whop/embedded-components-react-js"; // [step:2.2] import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.4] import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types"; import { useMemo } from "react"; // [step:2.2] const elements = loadWhopElements(); // [step:2.3:start] async function getToken() { // Replaced by auth-specific getToken when an auth library is selected throw new Error("Configure an auth library to get a token"); } // [step:2.3:end] export function Chat() { // [step:2.4:start] const chatOptions: ChatElementOptions = useMemo(() => { return { channelId: "chat_XXXXXXXXXXXXXX", }; }, []); // [step:2.4:end] return ( // [step:2.3:start] {/* [step:2.3:end] */} {/* [step:2.4:start] */} {/* [step:2.4:end] */} ); } `, filename: "chat.tsx", language: "tsx" }], html: [{ code: ` Chat
`, filename: "chat.html", language: "html" }], swift: [{ code: `import SwiftUI // [step:2.1] import WhopElements struct ContentView: View { var body: some View { NavigationStack { // [step:2.3] WhopChatView( channelId: "chat_XXXXXXXXXXXXXX", style: .imessage ) } // [step:2.2:start] .task { await WhopSDK.configureWithOAuth( appId: "app_XXXXXXXXXXXXXX", scopes: [ "openid", "profile", "email", "chat:message:create", "chat:read", "dms:read", "dms:message:manage", "dms:channel:manage", "support_chat:read", "support_chat:message:create", ] ) } // [step:2.2:end] } } `, filename: "ChatView.swift", language: "swift" }] } }; export const QuickStart = ({children, code, steps, title, description, platformGroups, conditionalCategories}) => { const CATEGORY_CONFIG = { frontend: { label: "Client", languages: { react: { label: "React" }, html: { label: "HTML" } } }, client: { label: "Client", languages: { react: { label: "React" }, html: { label: "Vanilla" }, swift: { label: "Swift" } } }, backend: { label: "Server", languages: { express: { label: "Express" }, nextjs: { label: "Next.js" }, python: { label: "Python" }, ruby: { label: "Ruby" }, go: { label: "Go" } } }, auth: { label: "Auth", languages: { token: { label: "Token" }, "better-auth": { label: "Better Auth" }, authjs: { label: "Auth.js" } } } }; const allCategories = Object.keys(code); const [activePlatformGroupId, setActivePlatformGroupId] = React.useState(() => platformGroups?.[0]?.id ?? null); const [selectedLanguages, setSelectedLanguages] = React.useState(() => Object.entries(code).reduce((acc, [category, languages]) => { acc[category] = Object.keys(languages)[0]; return acc; }, {})); const activePlatformGroup = platformGroups?.find(g => g.id === activePlatformGroupId); const conditionalCatNames = new Set(conditionalCategories ? Object.keys(conditionalCategories) : []); const platformCategories = activePlatformGroup ? allCategories.filter(c => activePlatformGroup.categories.includes(c)) : allCategories.filter(c => !conditionalCatNames.has(c)); const activeConditionalCats = []; const hiddenByConditional = new Set(); if (conditionalCategories) { const matchesShowWhen = cond => Object.entries(cond).every(([key, value]) => { if (!allCategories.includes(key)) return false; if (Array.isArray(value)) return value.includes(selectedLanguages[key]); return selectedLanguages[key] === value; }); for (const [cat, config] of Object.entries(conditionalCategories)) { if (!allCategories.includes(cat)) continue; const isActive = Array.isArray(config.showWhen) ? config.showWhen.some(matchesShowWhen) : matchesShowWhen(config.showWhen); if (isActive) { activeConditionalCats.push(cat); for (const hidden of config.hides || []) { hiddenByConditional.add(hidden); } } } } const selectorCategories = [...platformCategories, ...activeConditionalCats]; const matchableCategories = [...new Set([...selectorCategories, ...hiddenByConditional])]; const fileCategories = selectorCategories.filter(c => !hiddenByConditional.has(c)); const categories = fileCategories; const [selectedFileIndex, setSelectedFileIndex] = React.useState(0); const [activeSubStepKey, setActiveSubStepKey] = React.useState(null); const [isCodeContentHovered, setIsCodeContentHovered] = React.useState(false); const subStepRefs = React.useRef({}); const stepsContainerRef = React.useRef(null); const codePanelRef = React.useRef(null); const lastAutoSwitchedStep = React.useRef(null); const isClickScrolling = React.useRef(false); React.useEffect(() => { const container = stepsContainerRef.current; if (!container) return; const handleScroll = () => { if (isClickScrolling.current) return; const scrollTop = container.scrollTop; let newActiveKey = null; const keys = Object.keys(subStepRefs.current).sort((a, b) => { const [aStep, aSub] = a.split("-").map(Number); const [bStep, bSub] = b.split("-").map(Number); return aStep - bStep || aSub - bSub; }); for (let i = 0; i < keys.length; i++) { const key = keys[i]; const el = subStepRefs.current[key]; if (!el) continue; const elTop = el.offsetTop - container.offsetTop; const elHeight = el.offsetHeight; const scrollPastThreshold = elHeight * 0.15; if (scrollTop < elTop + scrollPastThreshold) { newActiveKey = key; break; } } setActiveSubStepKey(newActiveKey); }; container.addEventListener("scroll", handleScroll); return () => container.removeEventListener("scroll", handleScroll); }, [steps]); const handlePlatformGroupSelect = groupId => { setActivePlatformGroupId(groupId); setSelectedFileIndex(0); lastAutoSwitchedStep.current = null; }; const handleLanguageSelect = (category, language) => { setSelectedLanguages(prev => ({ ...prev, [category]: language })); lastAutoSwitchedStep.current = null; }; const getFiles = (category, language) => { const langCode = code[category]?.[language]; if (!langCode) return []; return Array.isArray(langCode) ? langCode : [langCode]; }; const allFiles = (() => { const raw = categories.flatMap(category => { const language = selectedLanguages[category]; return getFiles(category, language).filter(file => { if (!file.conditions) return true; return file.conditions.every(c => { if (Array.isArray(c.value)) { return c.value.includes(selectedLanguages[c.category]); } return selectedLanguages[c.category] === c.value; }); }).map(file => ({ ...file, category })); }); if (activeConditionalCats.length === 0) return raw; const result = []; const seen = new Set(); for (let i = raw.length - 1; i >= 0; i--) { if (!seen.has(raw[i].filename)) { seen.add(raw[i].filename); result.unshift(raw[i]); } } return result; })(); React.useEffect(() => { if (selectedFileIndex >= allFiles.length) { setSelectedFileIndex(0); } }, [allFiles.length]); const processedFiles = allFiles.map(file => { const code = file.code; const lines = code.split("\n"); let lineOffset = 0; const markers = []; let openMarkers = []; const filteredLines = []; const singleLinePattern = /(?:\/\/|#|\/\*|)?/; const multiLineStartPattern = /(?:\/\/|#|\/\*|)?/; const multiLineEndPattern = /(?:\/\/|#|\/\*|)?/; for (const lineIdx in lines) { const line = lines[lineIdx]; const matchesSingleLine = line.match(singleLinePattern); if (matchesSingleLine) { const currentLine = parseInt(lineIdx) - lineOffset + 1; markers.push({ step: matchesSingleLine[1], range: [currentLine, currentLine] }); lineOffset += 1; continue; } const matchesMultiLineStart = line.match(multiLineStartPattern); if (matchesMultiLineStart) { openMarkers.push({ step: matchesMultiLineStart[1], start: parseInt(lineIdx) - lineOffset + 1 }); lineOffset += 1; continue; } const matchesMultiLineEnd = line.match(multiLineEndPattern); if (matchesMultiLineEnd) { const start = [...openMarkers].reverse().find(marker => marker.step === matchesMultiLineEnd[1]); if (start) { openMarkers = openMarkers.filter(marker => marker !== start); markers.push({ step: matchesMultiLineEnd[1], range: [start.start, parseInt(lineIdx) - lineOffset] }); lineOffset += 1; continue; } } filteredLines.push(line); } return { ...file, code: filteredLines.join("\n"), markers }; }); const getActiveStepMarkerId = () => { if (!activeSubStepKey) return null; const [stepIdx, subStepIdx] = activeSubStepKey.split("-").map(Number); return `${stepIdx + 1}.${subStepIdx + 1}`; }; React.useEffect(() => { if (!activeSubStepKey || lastAutoSwitchedStep.current === activeSubStepKey) return; const stepMarkerId = getActiveStepMarkerId(); if (!stepMarkerId) return; const fileIndex = processedFiles.findIndex(file => file.markers.some(m => m.step === stepMarkerId)); if (fileIndex !== -1) { lastAutoSwitchedStep.current = activeSubStepKey; setSelectedFileIndex(fileIndex); } }, [activeSubStepKey, selectedLanguages]); React.useEffect(() => { const timer = setTimeout(() => { const container = codePanelRef.current?.querySelector('[data-component-part="code-block-root"]'); const highlightedLine = container?.querySelector(".line-highlight, .line-focus"); if (container && highlightedLine) { const lineTop = highlightedLine.offsetTop; const containerHeight = container.clientHeight; const lineHeight = highlightedLine.offsetHeight; container.scrollTo({ top: lineTop - containerHeight / 2 + lineHeight / 2, behavior: "smooth" }); } }, 50); return () => clearTimeout(timer); }, [activeSubStepKey, selectedFileIndex]); const currentFile = processedFiles[selectedFileIndex] || processedFiles[0]; const getHighlightLines = () => { if (!currentFile || !activeSubStepKey) return null; const stepMarkerId = getActiveStepMarkerId(); const stepMarkers = currentFile.markers.filter(m => m.step === stepMarkerId); if (stepMarkers.length === 0) return null; const lines = []; for (const marker of stepMarkers) { for (let i = marker.range[0]; i <= marker.range[1]; i++) { lines.push(i); } } return JSON.stringify(lines); }; const highlightLines = getHighlightLines(); const focusLines = isCodeContentHovered ? null : highlightLines; return
{platformGroups &&
Platform
{platformGroups.map(group => )}
} {selectorCategories.map(category => { const config = CATEGORY_CONFIG[category] || ({ label: category, languages: {} }); const languages = code[category]; const languageKeys = Object.keys(languages); const selectedLanguage = selectedLanguages[category]; if (languageKeys.length <= 1) return null; return
{config.label}
{languageKeys.map(language => { const langConfig = config.languages[language] || ({ label: language }); const isSelected = selectedLanguage === language; return ; })}
; })}

{title}

{description}
{(() => { let stepNumber = 0; return steps.map((step, idx) => { const resolvedSubSteps = step.subSteps.map(subStep => { if (!Array.isArray(subStep)) return subStep; return subStep.find(s => Object.entries(s.match).every(([key, value]) => matchableCategories.includes(key) && (Array.isArray(value) ? value.includes(selectedLanguages[key]) : selectedLanguages[key] === value))); }).filter(Boolean); if (resolvedSubSteps.length === 0) return null; stepNumber++; const displayNumber = stepNumber; return
{displayNumber}

{step.title}

{step.subSteps.map((subStep, subIdx) => { const subStepKey = `${idx}-${subIdx}`; const isSubStepActive = activeSubStepKey === subStepKey; const resolvedSubStep = Array.isArray(subStep) ? subStep.find(s => Object.entries(s.match).every(([key, value]) => matchableCategories.includes(key) && (Array.isArray(value) ? value.includes(selectedLanguages[key]) : selectedLanguages[key] === value))) : subStep; if (!resolvedSubStep) return null; const handleStepClick = () => { if (isSubStepActive) return; setActiveSubStepKey(subStepKey); isClickScrolling.current = true; const el = subStepRefs.current[subStepKey]; const container = stepsContainerRef.current; if (el && container) { const elTop = el.offsetTop - container.offsetTop; container.scrollTo({ top: elTop, behavior: "smooth" }); } setTimeout(() => { isClickScrolling.current = false; }, 500); }; return
subStepRefs.current[subStepKey] = el} onClick={handleStepClick} style={{ cursor: isSubStepActive ? "default" : "pointer" }}>

{resolvedSubStep.title}

{resolvedSubStep.content}
; })}
; }); })()}
{children}
{allFiles.length > 1 ?
{allFiles.map((file, index) => )}
: {currentFile?.filename || "No files"} }
setIsCodeContentHovered(true)} onMouseLeave={() => setIsCodeContentHovered(false)}> {currentFile ? {currentFile.code} : "Select a language"}
; }; export const ExamplesLink = ({href}) =>
✨ Build this with AI

Copy and paste our templates using your favorite editor

+ more
;

You'll need three things:

  1. API key

    Create one at Whop Developer Dashboard. Treat it like a password — never expose it in client code.

  2. Company ID

    Find it in your dashboard URL: whop.com/dashboard/biz_XXXXXXXXX/.

  3. User ID

    The user you want to log in as. In production, you'll derive this from your own auth system.

Both company_id and user_id are required — together they scope the token to a specific user acting inside your company.

}, { match: { auth: "better-auth", client: ["react", "html"] }, title: "Install Better Auth", content: <> Install Better Auth in your project: npm install better-auth pnpm add better-auth }, { match: { auth: "authjs", backend: "nextjs", client: ["react", "html"] }, title: "Install Auth.js", content: <> Install Auth.js in your project: npm install next-auth@beta pnpm add next-auth@beta }, { match: { auth: "authjs", backend: "express", client: ["react", "html"] }, title: "Install Auth.js", content: <> Install Auth.js in your project: npm install @auth/express pnpm add @auth/express } ], [ { match: { auth: "token" }, title: "Create a token endpoint on your server", content: <>

Add a route that mints a short-lived access token for a user using your API key. The client calls this endpoint to get a token — your API key stays on the server.

Set WHOP_API_KEY in your .env file. Replace USER_ID and COMPANY_ID with the IDs from the previous step. Trim scoped_actions to only what you need.

}, { match: { auth: "better-auth", client: "react" }, title: "Set environment variables", content: <>

Create a .env file in the root of your project and add the following environment variables:

  1. WHOP_CLIENT_ID

    Your Whop OAuth app client ID. Get yours at Whop Developer Dashboard.

  2. BETTER_AUTH_SECRET

    A secret key used for encryption and hashing. Generate one with openssl rand -base64 32.

  3. BETTER_AUTH_URL

    The base URL of your app.

}, { match: { auth: "better-auth", client: "html" }, title: "Set environment variables", content: <>

Create a .env file in the root of your project and add the following environment variables:

  1. WHOP_CLIENT_ID

    Your Whop OAuth app client ID. Get yours at Whop Developer Dashboard.

  2. BETTER_AUTH_SECRET

    A secret key used for encryption and hashing. Generate one with openssl rand -base64 32.

}, { match: { auth: "authjs", client: ["react", "html"] }, title: "Set environment variables", content: <>

Create a .env file in the root of your project and add the following environment variables:

  1. WHOP_CLIENT_ID

    Your Whop OAuth app client ID. Get yours at Whop Developer Dashboard.

  2. AUTH_SECRET

    A secret key used for encryption. Generate one with npx auth secret.

} ], [ { match: { auth: "better-auth", client: ["react", "html"] }, title: "Set the redirect URI", content: <>

In your Whop OAuth app settings, add the following redirect URIs:

}, { match: { auth: "authjs", client: ["react", "html"] }, title: "Set the redirect URI", content: <>

In your Whop OAuth app settings, add the following redirect URIs:

} ], [ { match: { auth: "better-auth", client: ["react", "html"] }, title: "Create an auth instance", content: <>

Create a file called auth.ts. Configure Whop as a generic OAuth provider using the genericOAuth plugin.

}, { match: { auth: "authjs", client: ["react", "html"] }, title: "Create an auth instance", content: <>

Create a file called auth.ts. Configure Whop as a custom OAuth provider.

} ], [ { match: { auth: "better-auth", client: "react" }, title: "Create an auth client instance", content: <>

Create a file called auth-client.ts and add the genericOAuthClient plugin. The client-side auth instance helps you interact with the auth server.

} ], [ { match: { auth: "better-auth", backend: "nextjs", client: ["react", "html"] }, title: "Mount the handler", content: <>

To handle API requests, set up a catch-all route handler at app/api/auth/[...all]/route.ts. Better Auth handles the full OAuth flow including token exchange and session creation.

}, { match: { auth: "better-auth", backend: "express", client: ["react", "html"] }, title: "Mount the handler", content: <>

To handle API requests, mount Better Auth on your Express server using toNodeHandler. This handles the full OAuth flow at /api/auth/*.

}, { match: { auth: "authjs", backend: "nextjs", client: ["react", "html"] }, title: "Mount the handler", content: <>

To handle API requests, set up a catch-all route handler at app/api/auth/[...all]/route.ts.

}, { match: { auth: "authjs", backend: "express", client: ["react", "html"] }, title: "Mount the handler", content: <>

Mount Auth.js on your Express server using ExpressAuth.

} ], [ { match: { auth: "better-auth", client: "react" }, title: "Create a sign-in page", content: <>

Create a sign-in page and have the user sign in.

}, { match: { auth: "better-auth", client: "html" }, title: "Create a sign-in page", content: <>

Create a sign-in page and have the user sign in.

}, { match: { auth: "authjs", client: "react" }, title: "Create a sign-in page", content: <>

Create a sign-in page and have the user sign in.

}, { match: { auth: "authjs", client: "html" }, title: "Create a sign-in page", content: <>

Create a sign-in page and have the user sign in.

} ]] }, { title: "Set up chat", subSteps: [[ { match: { client: "react" }, title: "Install the embedded components", content: <> Install the Whop embedded components packages for React. npm install @whop/embedded-components-react-js@beta @whop/embedded-components-vanilla-js@beta pnpm add @whop/embedded-components-react-js@beta @whop/embedded-components-vanilla-js@beta }, { match: { client: "html" }, title: "Add the script tag", content: <> Include the Whop Elements script in your HTML page. {``} }, { match: { client: "swift" }, title: "Add the Swift package", content: <> In Xcode, go to File → Add Package Dependencies... and enter the package URL: https://github.com/whopio/whopsdk-elements-swift

Then add WhopElements to your target. Chat supports sending photos, videos, and voice messages. Add the following keys to your app's Info.plist so iOS prompts the user for access:

{`NSCameraUsageDescription Allow camera access to take photos and videos in chat NSMicrophoneUsageDescription Allow microphone access to record voice messages in chat NSPhotoLibraryUsageDescription Allow photo library access to share photos and videos in chat`} } ], [ { match: { client: "react" }, title: "Load the elements", content: <>

Call loadWhopElements() to initialize the Whop elements.

}, { match: { client: "html" }, title: "Initialize the elements", content: <>

Create a new WhopElements instance to initialize the Whop elements.

}, { match: { auth: "token", client: "swift" }, title: "Create a token provider", content: <>

Implement WhopTokenProvider and call your token endpoint to get a short-lived access token. Pass the provider to WhopSDK.configure on app launch — the SDK will call getToken() again automatically when the token expires.

Point serverURL at the backend you set up in the previous step (e.g., a production URL or a local tunnel in development).

}, { match: { auth: ["better-auth", "authjs"], client: "swift" }, title: "Configure OAuth", content: <>

Create an OAuth app via the Create App API or in the Whop Dashboard → Developer. See the OAuth guide for both methods.

  1. Set your redirect URI (e.g., com.yourapp.bundle://oauth/callback).
  2. Enable the required scopes: openid, profile, email, chat:message:create, chat:read, dms:read, dms:message:manage, dms:channel:manage, support_chat:read, support_chat:message:create.

Call configureWithOAuth on app launch. The SDK handles the full OAuth flow, sign-in UI, and token management automatically. If you already have tokens from your backend or want to skip the SDK's OAuth flow, see the authentication guide for pre-filling tokens and manual sign-in.

} ], [ { match: { auth: "token", client: ["react", "html"] }, title: "Add the ChatSession", content: <>

The session fetches an access token from your token endpoint.

}, { match: { auth: "better-auth", client: ["react", "html"] }, title: "Add the ChatSession", content: <>

The session handles authentication using the token from your auth server.

}, { match: { auth: "authjs", client: ["react", "html"] }, title: "Add the ChatSession", content: <>

The session handles authentication using the token from your auth server.

} ], [ { match: { client: "react" }, title: "Add the ChatElement", content: <>

The element connects to the channel and renders a real-time chat UI.

A channelId starts with chat_. Get one by creating (or fetching) a channel via the API — pick the type that fits your use case:

}, { match: { client: "html" }, title: "Add the ChatElement", content: <>

The element connects to the channel and renders a real-time chat UI.

A channelId starts with chat_. Get one by creating (or fetching) a channel via the API — pick the type that fits your use case:

}, { match: { client: "swift" }, title: "Add WhopChatView", content: <>

Place WhopChatView in your view hierarchy with a channel ID. The SDK handles authentication, rendering, and real-time updates. Choose between .imessage (bubble chat) and .discord (full-width) styles.

A channel ID starts with chat_. Get one by creating (or fetching) a channel via the API — pick the type that fits your use case:

} ]] }]} title="Embed chat in your app" description={<> Integrate Whop's real-time messaging directly into your web or iOS app. } > ### You're all set! Your app now has a fully functional embedded chat. Explore the detail pages below to add DMs, customize theming, and more. ## Next steps Enroll your users on Whop and sync their display name and avatar so they show up correctly in chat. Full props reference, events, and deeplinking for the chat view. Display a list of direct message conversations with navigation. OAuth setup, manual sign-in, and pre-filling tokens. Customize the appearance of chat elements.