WebsitesElement - Whop Docs

This page documents @whop/elements@1.9.0 and @whop/elements-react@1.9.0.

Since v1.0.0. Mounts inside Websites. accountId and windowDays come from there. Pass props and callbacks through the create options or React props.

import { WhopElements, Websites, WebsitesElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Websites /* options */>
        <WebsitesElement onWebsiteToggled={(e) => console.log(e)} onWebsitesLoaded={(e) => console.log(e)} onVerifyRequested={(e) => console.log(e)} onSettingsRequested={(e) => console.log(e)} onEditRequested={(e) => console.log(e)} />
      </Websites>
    </WhopElements>
  );
}

<script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const websites = window.WhopElements().websites.create({ /* options */ });
  websites.create('websites', {
    onWebsiteToggled: (e) => console.log(e),
    onWebsitesLoaded: (e) => console.log(e),
    onVerifyRequested: (e) => console.log(e),
    onSettingsRequested: (e) => console.log(e),
    onEditRequested: (e) => console.log(e)
  }).mount('#websites-websites');
</script>

Example data. Open the Playground.

Props

This element takes no consumer props.

Events

Pass callbacks in the create options or React props.

`onWebsiteToggled`

A domain row was expanded or collapsed to show or hide its pages.

object

Hide properties

string

required

boolean

required

`onWebsitesLoaded`

The table settled on a list of domains. Fires on every load, not only when the list changes, so a poll that comes back the same still reports — use it to drop any pendingWebsites that are now live.

object

Hide properties

string[]

required

`onVerifyRequested`

The pixel-check button was pressed. Open url and watch for pixel events on your side, then push the outcome back through the handle’s verifyStatus so the button reflects it.

object

Hide properties

string

required

string

required

`onSettingsRequested`

The settings button on a whop.site row was pressed. The element only reports the click — open your own editing surface for the app.

object

Hide properties

string

required

string

required

string

required

`onEditRequested`

The edit button on a whop.site row was pressed. The element only reports the click — open your own editing surface for the app.

object

Hide properties

string

required

string

required

string

required

`onLoaderStart`

Runs after the loading skeleton first paints and before onReady.

`onReady`

Runs after the element’s first complete paint.

`onError`

Runs when the element fails to load or crashes. The fallback remains visible. Use code for programmatic handling. sourceKey identifies a failed host-state source.

object

Hide properties

string

required

string

Methods

Call these on the handle returned by create, or through a React ref.

`mount`

Mounts the element in target and starts loading. React components mount themselves. Parameters

string | HTMLElement

required

`destroy`

Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.

`update`

Merges new props into the mounted element. In React, change the component props instead. Parameters

Partial<WebsitesElementProps>

required

Styling

Style these parts through appearance.classes. Use camel case or kebab case for property names and include units. Page stylesheets can’t reach the element’s frame. The framework validates each declaration before injecting it.

Class	Targets
`.whop-WebsitesTable`	The websites element root — the table of domains

const websites = whop.websites.create({
  appearance: {
    classes: {
      'whop-WebsitesTable': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

websites.update({
  appearance: { classes: { 'whop-WebsitesTable': { fontWeight: '700' } } }
});

In React, pass appearance to <Websites>. Set it globally with WhopElements({ appearance }).

​Props

​Events

​onWebsiteToggled

​onWebsitesLoaded

​onVerifyRequested

​onSettingsRequested

​onEditRequested

​onLoaderStart

​onReady

​onError

​Methods

​mount

​destroy

​update

​Styling

Props

Events

`onWebsiteToggled`

`onWebsitesLoaded`

`onVerifyRequested`

`onSettingsRequested`

`onEditRequested`

`onLoaderStart`

`onReady`

`onError`

Methods

`mount`

`destroy`

`update`

Styling