Plandalf
Browse Product guides

Add to your site

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: create <div id="checkout"></div> first. Do not also add data-plandalf-mount to that container, or both the scanner and your code can mount it.

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>

Feature detail