# Buy buttons

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](https://plandalf.com/docs/sdk)
-   [Identify customers](https://plandalf.com/docs/sdk/identify)
-   [CTA links and redirects](https://plandalf.com/docs/product-guides/promos/cta-links)

Source: https://plandalf.com/docs/product-guides/checkouts/buy-buttons