# Buy buttons
Create buttons and links that open a Plandalf offer in the right frame with the right customer and promo context.
Source: /docs/offers/buy-buttons
Last modified: 2026-06-18
Buy buttons are the simplest way to add Plandalf to an existing page.

## HTML button

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

## HTML link

```html
<a href="/pricing" data-plandalf-present="pro-plan">
  Upgrade
</a>
```

The SDK intercepts the click and opens checkout instead of following the link.

## Programmatic button

```js
document.querySelector("#upgrade").addEventListener("click", async () => {
  const result = await plandalf.present("pro-plan", {
    frame: "modal",
    user: customerJwt
  });

  if (result.status === "complete") {
    window.location.href = "/account";
  }
});
```

## Promo-aware button

```html
<button
  data-plandalf-present="summit-ticket"
  data-plandalf-apply-promo="early-bird"
>
  Buy before the price changes
</button>
```

## Related docs

- [Configure frame and mode](/docs/sdk/configure)
- [Identify customers](/docs/sdk/identity)
- [CTA links and redirects](/docs/timers/cta-links)