Add to your site

Add Plandalf offers to any site with declarative attributes or programmatic SDK calls.

There are three public HTML primitives: present an offer, mount an offer inline, and render a promo/countdown surface.

Present an offer

<button data-plandalf-present="pro-plan">
  Buy Pro
</button>

Modifiers:

<button
  data-plandalf-present="pro-plan"
  data-plandalf-frame="slideout"
  data-plandalf-size="wide"
  data-plandalf-mode="test"
>
  Buy Pro
</button>

Mount an inline checkout

<div data-plandalf-mount="pro-plan"></div>

Programmatic equivalent:

const handle = plandalf.mount("#checkout", "pro-plan", {
  promo: "early-bird"
});

Add a promo widget

<div data-plandalf-promo="early-bird"></div>

Use data-plandalf-apply-promo on buttons or mounts when the promo should affect checkout pricing.

<button
  data-plandalf-present="summit-ticket"
  data-plandalf-apply-promo="early-bird"
>
  Buy ticket
</button>

Builder context

Build the offer beside the docs.

These pages explain the setup details. The matching product surfaces show where products, prices, checkout layout, invoices, and automation live in the app.

The Numi offer editor with product, theme, automation, invoice, and checkout controls.
The offer editor connects checkout layout, products, prices, invoice settings, and automation.
The Numi checkout element palette showing content, interactive, and selling blocks.
Checkout templates expose reusable blocks for product lists, add-ons, forms, buttons, and offer content.
The Numi offer editor automation tab showing sequence controls beside the checkout canvas.
Automation is configured beside the offer so post-purchase work stays attached to the sale.

Feature detail