"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const code = { platform: { react: [{ code: `// [step:1.1:start] import { ChatElement, ChatSession, Elements, } from "@whop/embedded-components-react-js"; import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; import type { ChatElementOptions } from "@whop/embedded-components-vanilla-js/types"; // [step:1.1:end] import { useMemo } from "react"; // [step:2.1:start] const elements = loadWhopElements(); async function getToken() { const response = await fetch("/api/token"); const data = await response.json(); return data.token; } // [step:2.1:end] export function ChatPage() { const chatOptions: ChatElementOptions = useMemo(() => { return { channelId: "chat_XXXXXXXXXXXXXX", }; }, []); return ( // [step:3.1:start] // [step:3.1:end] ); } `, filename: "ChatPage.tsx", language: "tsx" }], vanillajs: [{ code: `// [step:1.1] import { loadWhopElements } from "@whop/embedded-components-vanilla-js"; // [step:2.1:start] async function getToken() { const response = await fetch("/api/token"); const data = await response.json(); return data.token; } const whopElements = await loadWhopElements(); const session = whopElements.createChatSession({ token: getToken, }); // [step:2.1:end] // [step:3.1:start] const chatElement = session.createElement("chat-element", { channelId: "chat_XXXXXXXXXXXXXX", }); chatElement.mount("#chat-container"); // [step:3.1:end] `, filename: "chat.ts", language: "typescript" }], swift: [{ code: `// [step:1.1] import WhopElements import SwiftUI struct ContentView: View { var body: some View { NavigationStack { // [step:3.1] WhopChatView( channelId: "chat_XXXXXXXXXXXXXX", style: .imessage ) } // [step:2.1: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", ] ) } // [step:2.1:end] } } `, filename: "ChatView.swift", language: "swift" }] } }; const QuickStart = ({children, code, steps, title, description}) => { const _components = { button: "button", div: "div", h1: "h1", h3: "h3", h4: "h4", option: "option", select: "select", span: "span", ..._provideComponents() }, {CodeBlock} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); const CATEGORY_CONFIG = { frontend: { label: "Client", languages: { react: { label: "React" }, html: { label: "HTML" }, vue: { label: "Vue" } } }, backend: { label: "Server", languages: { express: { label: "Express" }, nextjs: { label: "Next.js" }, python: { label: "Python" }, ruby: { label: "Ruby" }, go: { label: "Go" } } }, platform: { label: "Platform", languages: { react: { label: "React" }, vanillajs: { label: "Vanilla JS" }, swift: { label: "Swift" } } } }; const categories = Object.keys(code); const [selectedLanguages, setSelectedLanguages] = React.useState(() => Object.entries(code).reduce((acc, [category, languages]) => { acc[category] = Object.keys(languages)[0]; return acc; }, {})); 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); React.useEffect(() => { const container = stepsContainerRef.current; if (!container) return; const handleScroll = () => { 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 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 = categories.flatMap(category => { const language = selectedLanguages[category]; return getFiles(category, language).map(file => ({ ...file, category })); }); 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 _jsxs(_components.div, { className: "qs-container", id: "quickstart-content", children: [_jsx(_components.div, { className: "qs-top-bar", children: categories.map(category => { const config = CATEGORY_CONFIG[category] || ({ label: category, languages: {} }); const languages = code[category]; const selectedLanguage = selectedLanguages[category]; return _jsxs(_components.div, { className: "qs-selector-group", children: [_jsx(_components.span, { className: "qs-selector-label", children: config.label }), _jsx(_components.div, { className: "qs-selector-buttons", children: Object.keys(languages).map(language => { const langConfig = config.languages[language] || ({ label: language }); const isSelected = selectedLanguage === language; return _jsx(_components.button, { onClick: () => handleLanguageSelect(category, language), className: `qs-selector-button ${isSelected ? "qs-selector-button-active" : ""}`, "aria-pressed": isSelected, children: langConfig.label }, language); }) }), _jsx(_components.select, { className: "qs-selector-select", value: selectedLanguage, onChange: e => handleLanguageSelect(category, e.target.value), children: Object.keys(languages).map(language => { const langConfig = config.languages[language] || ({ label: language }); return _jsx(_components.option, { value: language, children: langConfig.label }, language); }) })] }, category); }) }), _jsxs(_components.div, { className: "qs-steps", ref: stepsContainerRef, children: [_jsxs(_components.div, { className: "mint-px-6 mint-py-2 mint-flex mint-flex-col mint-gap-1", children: [_jsx(_components.h1, { className: "mint-m-0 mint-text-2xl sm:mint-text-3xl mint-font-bold mint-text-gray-900 mint-tracking-tight dark:mint-text-gray-200", children: title }), description] }), steps.map((step, idx) => { return _jsxs(_components.div, { className: "qs-step-group", children: [_jsxs(_components.div, { className: "qs-step-header", children: [_jsx(_components.span, { className: "qs-step-indicator", children: idx + 1 }), _jsx(_components.h3, { children: step.title })] }), _jsx(_components.div, { children: step.subSteps.map((subStep, subIdx) => { const subStepKey = `${idx}-${subIdx}`; const isSubStepActive = activeSubStepKey === subStepKey; const resolvedSubStep = Array.isArray(subStep) ? subStep.find(s => { return Object.entries(s.match).every(([key, value]) => { return selectedLanguages[key] === value; }); }) : subStep; const handleStepClick = () => { if (isSubStepActive) return; const el = subStepRefs.current[subStepKey]; const container = stepsContainerRef.current; if (el && container) { const elTop = el.offsetTop - container.offsetTop; container.scrollTo({ top: elTop, behavior: "smooth" }); } }; return _jsxs(_components.div, { className: `qs-step ${isSubStepActive ? "qs-step-active" : ""}`, ref: el => subStepRefs.current[subStepKey] = el, onClick: handleStepClick, style: { cursor: isSubStepActive ? "default" : "pointer" }, children: [_jsx(_components.h4, { className: "mint-mb-2", children: resolvedSubStep.title }), _jsx(_components.div, { className: "qs-step-content", children: resolvedSubStep.content })] }, subIdx); }) })] }, idx); }), _jsx(_components.div, { className: "mint-px-6 mint-pb-6 mint-ml-1", children: children })] }), _jsxs(_components.div, { className: "qs-code-panel", ref: codePanelRef, children: [_jsx(_components.div, { className: "qs-code-header", children: allFiles.length > 1 ? _jsx(_components.div, { className: "qs-file-tabs", children: allFiles.map((file, index) => _jsx(_components.button, { onClick: () => setSelectedFileIndex(index), className: `qs-file-tab ${index === selectedFileIndex ? "qs-file-tab-active" : ""}`, children: file.filename }, `${file.category}-${file.language}-${file.filename}`)) }) : _jsx(_components.span, { className: "qs-code-filename", children: currentFile?.filename || "No files" }) }), _jsx(_components.div, { className: "qs-code-content", onMouseEnter: () => setIsCodeContentHovered(true), onMouseLeave: () => setIsCodeContentHovered(false), children: currentFile ? _jsx(CodeBlock, { lines: true, language: currentFile.language, focus: focusLines, highlight: highlightLines, children: currentFile.code }) : "Select a language" })] })] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", li: "li", ol: "ol", p: "p", strong: "strong", ..._provideComponents(), ...props.components }, {Card, CardGroup, CodeBlock, CodeGroup, Heading} = _components; if (!Card) _missingMdxReference("Card", true); if (!CardGroup) _missingMdxReference("CardGroup", true); if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeGroup) _missingMdxReference("CodeGroup", true); if (!Heading) _missingMdxReference("Heading", true); return _jsxs(QuickStart, { code: code, steps: [{ title: "Install the SDK", subSteps: [[{ match: { platform: "react" }, title: "Install the npm packages", content: _jsxs(_Fragment, { children: ["Install the Whop embedded components packages for React.", _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { language: "bash", filename: "npm", children: "npm install @whop/embedded-components-react-js @whop/embedded-components-vanilla-js" }), _jsx(CodeBlock, { language: "bash", filename: "pnpm", children: "pnpm add @whop/embedded-components-react-js @whop/embedded-components-vanilla-js" })] })] }) }, { match: { platform: "vanillajs" }, title: "Install the npm package", content: _jsxs(_Fragment, { children: ["Install the Whop embedded components package.", _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { language: "bash", filename: "npm", children: "npm install @whop/embedded-components-vanilla-js" }), _jsx(CodeBlock, { language: "bash", filename: "pnpm", children: "pnpm add @whop/embedded-components-vanilla-js" })] })] }) }, { match: { platform: "swift" }, title: "Add the Swift package", content: _jsxs(_Fragment, { children: ["In Xcode, go to ", _jsx(_components.strong, { children: "File" }), " → ", _jsx(_components.strong, { children: "Add Package Dependencies..." }), " and enter the package URL:", _jsx(CodeBlock, { language: "text", children: "https://github.com/whopio/whopsdk-elements-swift" }), _jsxs(_components.p, { children: ["Then add ", _jsx(_components.code, { children: "WhopElements" }), " to your target. Chat supports sending photos, videos, and voice messages. Add the following keys to your app's ", _jsx(_components.code, { children: "Info.plist" }), " so iOS prompts the user for access:"] }), _jsx(CodeBlock, { language: "xml", filename: "Info.plist", children: `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` })] }) }]] }, { title: "Set up authentication", subSteps: [[{ match: { platform: "react" }, title: "Configure OAuth and provide a token", content: _jsxs(_Fragment, { children: [_jsxs(_components.ol, { children: [_jsxs(_components.li, { children: ["Register your app in the ", _jsx(_components.a, { href: "https://whop.com/dashboard/", children: "Whop Dashboard" }), " → Developer to get an app ID."] }), _jsxs(_components.li, { children: ["Go to ", _jsx(_components.strong, { children: "OAuth" }), " and add your redirect URL (e.g., ", _jsx(_components.code, { children: "https://yourapp.com/oauth/callback" }), ")."] }), _jsxs(_components.li, { children: ["Enable the required scopes: ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "profile" }), ", ", _jsx(_components.code, { children: "email" }), ", ", _jsx(_components.code, { children: "chat:message:create" }), ", ", _jsx(_components.code, { children: "chat:read" }), ", ", _jsx(_components.code, { children: "dms:read" }), ", ", _jsx(_components.code, { children: "dms:message:manage" }), ", ", _jsx(_components.code, { children: "dms:channel:manage" }), "."] })] }), _jsxs(_components.p, { children: ["Then create a server endpoint that implements the ", _jsx(_components.a, { href: "/developer/guides/oauth", children: "OAuth flow" }), " and returns a valid token. The ", _jsx(_components.code, { children: "getToken" }), " function calls your endpoint whenever authentication is needed."] })] }) }, { match: { platform: "vanillajs" }, title: "Configure OAuth and provide a token", content: _jsxs(_Fragment, { children: [_jsxs(_components.ol, { children: [_jsxs(_components.li, { children: ["Register your app in the ", _jsx(_components.a, { href: "https://whop.com/dashboard/", children: "Whop Dashboard" }), " → Developer to get an app ID."] }), _jsxs(_components.li, { children: ["Go to ", _jsx(_components.strong, { children: "OAuth" }), " and add your redirect URL (e.g., ", _jsx(_components.code, { children: "https://yourapp.com/oauth/callback" }), ")."] }), _jsxs(_components.li, { children: ["Enable the required scopes: ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "profile" }), ", ", _jsx(_components.code, { children: "email" }), ", ", _jsx(_components.code, { children: "chat:message:create" }), ", ", _jsx(_components.code, { children: "chat:read" }), ", ", _jsx(_components.code, { children: "dms:read" }), ", ", _jsx(_components.code, { children: "dms:message:manage" }), ", ", _jsx(_components.code, { children: "dms:channel:manage" }), "."] })] }), _jsxs(_components.p, { children: ["Then create a server endpoint that implements the ", _jsx(_components.a, { href: "/developer/guides/oauth", children: "OAuth flow" }), " and returns a valid token. Pass your ", _jsx(_components.code, { children: "getToken" }), " function when creating the chat session."] })] }) }, { match: { platform: "swift" }, title: "Configure OAuth", content: _jsxs(_Fragment, { children: [_jsxs(_components.ol, { children: [_jsxs(_components.li, { children: ["Register your app in the ", _jsx(_components.a, { href: "https://whop.com/dashboard/", children: "Whop Dashboard" }), " → Developer to get an app ID."] }), _jsxs(_components.li, { children: ["Go to ", _jsx(_components.strong, { children: "OAuth" }), " and add your redirect URI (e.g., ", _jsx(_components.code, { children: "com.yourapp.bundle://oauth/callback" }), ")."] }), _jsxs(_components.li, { children: ["Enable the required scopes: ", _jsx(_components.code, { children: "openid" }), ", ", _jsx(_components.code, { children: "profile" }), ", ", _jsx(_components.code, { children: "email" }), ", ", _jsx(_components.code, { children: "chat:message:create" }), ", ", _jsx(_components.code, { children: "chat:read" }), ", ", _jsx(_components.code, { children: "dms:read" }), ", ", _jsx(_components.code, { children: "dms:message:manage" }), ", ", _jsx(_components.code, { children: "dms:channel:manage" }), "."] })] }), _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "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 ", _jsx(_components.a, { href: "/developer/guides/chat/authentication", children: "authentication guide" }), " for pre-filling tokens and manual sign-in."] })] }) }]] }, { title: "Display the chat", subSteps: [[{ match: { platform: "react" }, title: "Render the ChatElement", content: _jsx(_Fragment, { children: _jsxs(_components.p, { children: ["Wrap your chat in ", _jsx(_components.code, { children: "Elements" }), " and ", _jsx(_components.code, { children: "ChatSession" }), ", then render ", _jsx(_components.code, { children: "ChatElement" }), " with a channel ID. The ", _jsx(_components.code, { children: "ChatSession" }), " uses the token function to authenticate. The ", _jsx(_components.code, { children: "ChatElement" }), " connects to the channel and renders a real-time chat UI."] }) }) }, { match: { platform: "vanillajs" }, title: "Create and mount the element", content: _jsx(_Fragment, { children: _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: "chat-element" }), " from the session and mount it to a DOM container. The element renders a full chat UI inside the target element, with real-time messaging."] }) }) }, { match: { platform: "swift" }, title: "Add WhopChatView", content: _jsx(_Fragment, { children: _jsxs(_components.p, { children: ["Place ", _jsx(_components.code, { children: "WhopChatView" }), " in your view hierarchy with a channel ID. The SDK handles authentication, rendering, and real-time updates. Choose between ", _jsx(_components.code, { children: ".imessage" }), " (bubble chat) and ", _jsx(_components.code, { children: ".discord" }), " (full-width) styles."] }) }) }]] }], title: "Embed chat in your app", description: _jsx(_Fragment, { children: "Integrate Whop's real-time messaging directly into your web or iOS app. Choose your platform to get started." }), children: [_jsx(Heading, { level: "3", id: "you%E2%80%99re-all-set", children: "You’re all set!" }), _jsx(_components.p, { children: "Your app now has a fully functional embedded chat. Explore the detail pages below to add DMs, customize theming, and more." }), _jsx(Heading, { level: "2", id: "next-steps", children: "Next steps" }), _jsxs(CardGroup, { cols: 2, children: [_jsx(Card, { title: "Chat element", icon: "message", href: "/developer/guides/chat/chat-element", children: _jsx(_components.p, { children: "Full props reference, events, and deeplinking for the chat view." }) }), _jsx(Card, { title: "DMs list element", icon: "inbox", href: "/developer/guides/chat/dms-list-element", children: _jsx(_components.p, { children: "Display a list of direct message conversations with navigation." }) }), _jsx(Card, { title: "Authentication", icon: "key", href: "/developer/guides/chat/authentication", children: _jsx(_components.p, { children: "OAuth setup, manual sign-in, and pre-filling tokens." }) }), _jsx(Card, { title: "Theming & styles", icon: "palette", href: "/developer/guides/chat/theming-and-styles", children: _jsx(_components.p, { children: "Customize the appearance of chat elements." }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { code, QuickStart, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Embedded chat