# Add to your site
Add Plandalf offers to any site with declarative attributes or programmatic SDK calls.
Source: /docs/offers/add-to-site
Last modified: 2026-06-18
There are three public HTML primitives: present an offer, mount an offer inline, and render a promo/countdown surface.

## Present an offer

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

Modifiers:

```html
<button
  data-plandalf-present="pro-plan"
  data-plandalf-frame="slideout"
  data-plandalf-size="wide"
  data-plandalf-mode="test"
>
  Buy Pro
</button>
```

## Mount an inline checkout

```html
<div data-plandalf-mount="pro-plan"></div>
```

Programmatic equivalent:

```js
const handle = plandalf.mount("#checkout", "pro-plan", {
  promo: "early-bird"
});
```

## Add a promo widget

```html
<div data-plandalf-promo="early-bird"></div>
```

Use `data-plandalf-apply-promo` on buttons or mounts when the promo should affect checkout pricing.

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

## Related docs

- [Install the SDK](/docs/sdk/install)
- [Configure the SDK](/docs/sdk/configure)
- [Embedded promos](/docs/timers/embedded-promos)