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

> [!NOTE]
> **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

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

<scalar-tabs default="Script">
<scalar-tab title="Script">

```html
<script src="https://acme.plandalf.dev/js/plandalf-sdk.js" async></script>
```

</scalar-tab>
<scalar-tab title="Button">

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

</scalar-tab>
<scalar-tab title="Inline">

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

</scalar-tab>
</scalar-tabs>

## 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, load the SDK before your code and use the `plandalf` object directly. The blocking script in this example makes the order explicit; simple attribute-based buttons can keep the async script above.

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

> [!TIP]
> **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](https://plandalf.com/docs/sdk) — See frame, mode, promo, identity, metadata, and close behavior.

- [Add to your site](https://plandalf.com/docs/product-guides/checkouts/add-to-site) — Choose button, inline checkout, hosted checkout, or direct link patterns.

- [Embedded promos](https://plandalf.com/docs/product-guides/promos/embedded-promos) — Render promo widgets and connect them to offer pricing.

Source: https://plandalf.com/docs/product-guides/platforms/custom-html