Skip to main content

​
Overview

This page documents the shared types used across Whop embedded components.

​
EmbeddableElement

PropertyTypeRequiredDefaultDescription
mount(element: HTMLElement | '#${string}') => voidYes--
unmount() => voidYes--

​
CSSValue

A CSS property value. 

type CSSValue = string

​
CSSProps

A record of CSS properties and their values. 

type CSSProps = { [x: string]: string; }

​
Classes

A record of CSS class names to their style definitions. 

type Classes = { [x: string]: CSSProps; }

​
Variables

CSS custom properties (variables) that can be used to customize element styles. Keys must start with -- prefix. 

type Variables = { [x: `--${string}`]: string; }

​
AccentColor

Available accent colors for theming elements. These colors are used for primary UI elements like buttons, links, and highlights. 

type AccentColor = "ruby" | "blue" | "red" | "yellow" | "green" | "gray" | "tomato" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "grass" | "brown" | "orange" | "indigo" | "sky" | "mint" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze"

​
Theme

Theme configuration for customizing the visual appearance of elements. 
const theme: Theme = {
  appearance: "dark",
  accentColor: "blue",
  grayColor: "slate",
};
PropertyTypeRequiredDefaultDescription
appearance"light" | "dark" | undefinedNo-The color scheme to use. - ‘“light”’ - Light mode with dark text on light backgrounds - ‘“dark”’ - Dark mode with light text on dark backgrounds
accentColorAccentColor | undefinedNo-The primary accent color used for interactive elements.
grayColor"gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto" | undefinedNo-The gray color palette to use for neutral elements. Use ‘“auto”’ to automatically match the accent color.
dangerColor"ruby" | "red" | "tomato" | undefinedNo-The color used for error states and destructive actions.
warningColor"yellow" | "amber" | undefinedNo-The color used for warning states.
successColor"green" | "teal" | "jade" | "grass" | undefinedNo-The color used for success states.
infoColor"blue" | "sky" | undefinedNo-The color used for informational states.

​
Appearance

Configuration for customizing the visual appearance of Whop elements. Use this to match the embedded components to your application’s design. 
const appearance: Appearance = {
  theme: {
    appearance: "dark",
    accentColor: "blue",
  },
};

const whopElements = new WhopElements({ appearance });
PropertyTypeRequiredDefaultDescription
variablesVariables | null | undefinedNo-CSS custom properties to override default styles.
classesClasses | null | undefinedNo-Custom CSS classes to apply to elements.
themeTheme | null | undefinedNo-Theme settings for colors and appearance mode.

​
WhopElementsEnvironment

The environment to use for API calls.
  • "production" - Use the live production API
  • "sandbox" - Use the sandbox API for testing

type WhopElementsEnvironment = "production" | "sandbox"

​
WhopElementsOptions

Configuration options for initializing WhopElements. 
const whopElements = new WhopElements({
  appearance: {
    theme: { appearance: "light" },
  },
  locale: "en",
  environment: "production",
});
PropertyTypeRequiredDefaultDescription
appearanceAppearance | undefinedNo-Customize the appearance of the Whop embedded Elements. Includes theme settings like light/dark mode and accent colors.
locale"en" | undefinedNo”en”The locale to use for all Elements. Controls the language and formatting of text, dates, and numbers.
environmentWhopElementsEnvironment | undefinedNo”production”The environment to use for API calls. Use ‘“sandbox”’ for testing without affecting production data.