# Embedded promos

Use embedded promos when your own site hosts the sales page but Plandalf controls the deadline and checkout pricing context.

## HTML setup

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

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

## Inline checkout

```html
<div
  id="checkout"
  data-plandalf-mount="summit-ticket"
  data-plandalf-apply-promo="early-bird"
></div>
```

## Programmatic setup

Use a plain `<div id="checkout"></div>` for this alternative. Remove `data-plandalf-mount` from it to avoid mounting the same checkout twice. Awaiting this handle returns the mounted flow; use its events for completion and close it on route teardown.

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

## Notes

-   Use `data-plandalf-promo` for the standalone countdown widget.
-   Use `data-plandalf-apply-promo` on offer triggers and mounts.
-   Use `promo` in JavaScript options for `present()` and `mount()`.

Source: https://plandalf.com/docs/product-guides/promos/embedded-promos