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>
Related docs
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.
Offers product Hosted checkout, buy buttons, products, prices, coupons, bumps, upsells, invoices, and save offers. Hosted checkout The hosted buying surface for offers. Products The commercial objects attached to an offer. Prices One-time, subscription, package, tiered, and variant pricing. Checkout Optimization Lab A builder stack for improving checkout mechanics.