Browse Product guides

Embedded promos

Use embedded promos when your own site hosts the sales page but Plandalf controls the deadline and checkout pricing context.

HTML setup

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

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

Inline checkout

<div
  id="checkout"
  data-plandalf-mount="summit-ticket"
  data-plandalf-apply-promo="early-bird"
></div>

Programmatic setup

Use a plain <div id="checkout"></div> for this alternative. Remove data-plandalf-mount from it to avoid mounting the same checkout twice. Awaiting this handle returns the mounted flow; use its events for completion and close it on route teardown.

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

Notes

  • Use data-plandalf-promo for the standalone countdown widget.
  • Use data-plandalf-apply-promo on offer triggers and mounts.
  • Use promo in JavaScript options for present() and mount().

Feature detail