@revinel/browser

Browser runtime for embedding the Revinel tier selector, the “Subscribe to advertise” widget that lets your visitors pick an advertising plan and pay through Stripe. Renders as an auto-resizing iframe; inline or as a modal.

Looking to render ads on your site? Use @revinel/sdk (headless) or @revinel/react (hooks + components).

Install

npm install @revinel/browser

import { mountTierSelector } from "@revinel/browser"

const widget = mountTierSelector({
  workspaceId: "your-workspace-id",
  container: "#revinel-tiers", // a CSS selector or an Element
  theme: "auto", // "auto" | "light" | "dark"
  onCheckout: ({ tierPriceId }) => console.log("checkout started", tierPriceId),
})

widget.updateConfig({ theme: "dark" }) // reconfigure in place
widget.destroy() // remove + detach listeners

Opens the selector in a native <dialog> (focus-trap, Esc, and backdrop handled for you):

import { openTierSelector } from "@revinel/browser"

document.querySelector("#revinel-tiers-btn").addEventListener("click", () => {
  openTierSelector({ workspaceId: "your-workspace-id", onClose: () => {} })
})

No-code script (hosted)

No bundler needed. Drop in the hosted script and mark any element to open the popup:

<button data-revinel-tier-selector data-revinel-workspace-id="your-workspace-id">
  Advertise with us
</button>
<script async src="https://app.revinel.com/embed.js"></script>

The script also exposes window.Revinel.init({ workspaceId, container }) (inline) and window.Revinel.open({ workspaceId }) (popup).

Options

Option	Type	Notes
`workspaceId`	`string`	Required.
`container`	`string \| Element`	`mountTierSelector` only. Where to mount the iframe.
`theme`	`"auto" \| "light" \| "dark"`	Defaults to `"auto"` (matches the host page).
`appUrl`	`string`	Origin serving `/embed`. Defaults to the hosted Revinel app.
`height`	`number \| string`	Initial height before the embed reports its own.
`title`	`string`	`openTierSelector` only. The modal’s accessible label.

Events

Pass onReady, onCheckout, onError (and onClose for the popup):

onReady(): the selector has loaded and rendered.
onCheckout({ tierPriceId }): fires when the visitor starts checkout, just before the redirect to Stripe.
onError({ message }): tiers failed to load, or checkout creation failed.

There is no “completed” event: checkout redirects the top window to Stripe, so the embed is gone by the time payment finishes. Subscription state is delivered to your account by webhook.

Revinel API

Guides

SDKs

API endpoints

@revinel/browser

Install

Inline widget

No-code script (hosted)

Options

Events

​Install

​Inline widget

​Popup (modal)

​No-code script (hosted)

​Options

​Events

Install

Inline widget

Popup (modal)

No-code script (hosted)

Options

Events