# Add to your site

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: create `<div id="checkout"></div>` first. Do not also add `data-plandalf-mount` to that container, or both the scanner and your code can mount it.

```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](https://plandalf.com/docs/sdk)
-   [Configure the SDK](https://plandalf.com/docs/sdk)
-   [Embedded promos](https://plandalf.com/docs/product-guides/promos/embedded-promos)

Source: https://plandalf.com/docs/product-guides/checkouts/add-to-site