# Custom HTML
Install Plandalf on any HTML page with one script tag, checkout attributes, inline mounts, and optional promo widgets.
Source: /docs/platforms/custom-html
Last modified: 2026-06-19
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.


> **Use the SDK primitives directly**
>

  The Numi share-code generator exposes three canonical install patterns: `data-plandalf-present`, `data-plandalf-mount`, and hosted links. Custom HTML pages use the first two.


## The path


### Load the organization SDK


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


### Add one buying action


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


### 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.


### Test the full path


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


## Minimal install


### Custom HTML install


```html Script
<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>
```

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

```html Inline
<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.


### Supported HTML attributes


- `data-plandalf-present` (offer slug):
    Opens the offer in a frame when the element is clicked.


- `data-plandalf-mount` (offer slug):
    Renders the offer inline inside that element.


- `data-plandalf-frame` (modal | slideout | bottom | fullscreen):
    Controls the presentation frame for trigger buttons.


- `data-plandalf-size` (compact | standard | wide | fullscreen):
    Controls the frame size for trigger buttons.


- `data-plandalf-apply-promo` (promo slug):
    Applies active promo-tier pricing to the offer.


- `data-plandalf-mode` (live | test | preview):
    Routes the checkout through the selected environment.


## Programmatic control

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

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


> **Keep promo widgets separate from promo pricing**
>

  Use `data-plandalf-promo` on a standalone element to render a countdown or promo widget. Use `data-plandalf-apply-promo` on `present` or `mount` elements to apply the promo price to checkout.


## Related docs


### [Configure the SDK](/docs/sdk/configure)


    See frame, mode, promo, identity, metadata, and close behavior.


### [Add to your site](/docs/offers/add-to-site)


    Choose button, inline checkout, hosted checkout, or direct link patterns.


### [Embedded promos](/docs/timers/embedded-promos)


    Render promo widgets and connect them to offer pricing.