Custom HTML

Use this path for static sites, hand-coded landing pages, CMS templates, and any builder that lets you paste custom HTML. Start with one button that opens one published offer, then add inline checkout, promos, identity, or test mode after the first click works.

The path

1. Load the organization SDK

   Add the SDK script from your organization host on pages that contain a checkout button, inline checkout, or promo widget.

2. Add one buying action

   Put data-plandalf-present on a button or link and use the offer slug as the value.

3. Choose the frame only when needed

   Keep the default modal first. Add data-plandalf-frame, data-plandalf-size, or data-plandalf-mode after the basic button works.

4. Test the full path

   Open checkout, complete a test session, and verify redirects, invoices, webhooks, and automations.

Minimal install

<script>
  window.plandalf = window.plandalf || function () {
    (window.plandalf.q = window.plandalf.q || []).push(arguments);
  };
</script>
<script src="https://acme.plandalf.com/js/plandalf-sdk.js" async></script>

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

<div data-plandalf-mount="pro-plan" style="min-height: 480px"></div>

Add options

Use attributes when the behavior belongs to the element. Use JavaScript when you need to compute values from page state, analytics, or logged-in user context.

Programmatic control

When a page needs custom logic, wait for the SDK and call the same primitives directly.

plandalf.ready((sdk) => {
  document.querySelector("[data-buy-pro]").addEventListener("click", () => {
    sdk.present("pro-plan", {
      frame: "slideout",
      mode: "test"
    });
  });
});

Related docs