🌐Widget

Quick Start

<iframe
  src="https://base-pass.xyz/widget/YOUR_WALLET_ADDRESS"
  width="400"
  height="520"
  style="border: none; border-radius: 12px;"
></iframe>

Customization

Parameter	Default	Options
theme	dark	dark, light
accent	0052FF	Any hex color (no #)
radius	12	Border radius in px

Example: Light theme with purple accent

<iframe
  src="https://base-pass.xyz/widget/0x...?theme=light&accent=7B3FE4&radius=16"
  width="400"
  height="520"
  style="border: none; border-radius: 16px;"
></iframe>

The easiest way is to use the Embed Widget section in your Dashboard → Integrations tab. It generates the code with a live preview.

PostMessage Events

Listen for events from the widget:

window.addEventListener("message", (event) => {
  if (event.origin !== "https://base-pass.xyz") return;

  switch (event.data.type) {
    case "basepass:ready":       // Widget loaded
    case "basepass:connected":   // Wallet connected
    case "basepass:subscribed":  // Subscription successful
    case "basepass:error":       // Something failed
  }
});

Event	Data
basepass:ready	none
basepass:connected	{ address }
basepass:subscribed	{ creator, subscriber, months, txHash }
basepass:error	{ message }

Recommended Sizes

Layout	Width	Height
Default	400px	520px
Compact	360px	480px
Wide	500px	520px