Getting Started - Whop Docs

Overview

The main entry point for Whop embedded components. WhopElements is the root object that manages configuration and creates the chat session. Initialize it once and use it to create the session that mounts chat, DMs, and search elements.

Installation

npm install @whop/embedded-components-vanilla-js @whop/embedded-components-react-js

npm install @whop/embedded-components-vanilla-js

Examples

Basic initialization

import WhopElements from "@whop/embeddable-components";

const whopElements = new WhopElements({
  appearance: {
    theme: { appearance: "light" },
  },
  locale: "en",
});

Creating a chat session

const session = whopElements.createChatSession({
  token: async () => {
    // Fetch token from your backend
    const response = await fetch("/api/token");
    const data = await response.json();
    return data.token;
  },
});

const element = session.createElement("chat-element", {
  channelId: "feed_XXXXXXXXXXXXXX",
});
element.mount("#chat-container");

Updating options after initialization

// Switch to dark mode
whopElements.updateOptions({
  appearance: {
    theme: { appearance: "dark" },
  },
});

Listening to option changes

whopElements.on("optionsUpdated", (options) => {
  console.log("Options changed:", options);
});

Options

Property	Type	Required	Default	Description
`appearance`	`Appearance` \| undefined	No	-	Customize the appearance of the Whop embedded Elements. Includes theme settings like light/dark mode and accent colors.
`locale`	`"en" \| "es" \| "zh" \| "nl" \| "pt" \| "de" \| "hu" \| "it" \| "fr" \| "ja" \| "pl" \| "tr" \| undefined`	No	”en”	The locale to use for all Elements. Controls the language and formatting of text, dates, and numbers.
`environment`	`WhopElementsEnvironment` \| undefined	No	”production”	The environment to use for API calls. Use ‘“sandbox”’ for testing without affecting production data.

Events

Events emitted by WhopElements. Listen to these events using the on() method.

`optionsUpdated`

Emitted when the WhopElements options are updated via updateOptions(). Callback signature: (options: WhopElementsOptions) => void

Methods

`createChatSession(options)`

Create a new chat session for managing chat elements.

Parameter	Type	Description
`options`	`ChatSessionOptions`	Configuration options for the chat session

Returns: ChatSession

`updateOptions(options)`

Update the WhopElements configuration after initialization. Changes will be propagated to all active sessions and elements. Only the provided options will be updated; others remain unchanged.

Parameter	Type	Description
`options`	Partial<`WhopElementsOptions`>	Partial options object with the values to update

​Overview

​Installation

​Examples

​Basic initialization

​Creating a chat session

​Updating options after initialization

​Listening to option changes

​Options

​Events

​optionsUpdated

​Methods

​createChatSession(options)

​updateOptions(options)

​Related Types