# Choose how to add Plandalf

The same published offer can be opened three ways. Pick the one that fits how your site is built.

| Your site | Use | What you write |
| --- | --- | --- |
| A page where you can edit HTML | **HTML attributes** | Load your organization's browser SDK script and add `data-plandalf-present` to a button. The SDK binds it on page load. |
| A JavaScript application | **JavaScript** | Import `Plandalf` from `@plandalf/sdk`, call `sdk.present(offer)`, and await the result. |
| A React application | **React** | Wrap the page in `PlandalfProvider`, call `usePresent()`, and await its `present(offer)` handle. |

For an HTML page, use the SDK URL supplied for your organization. The browser bundle is served from that organization's host, for example:

```html title="index.html"
<script defer src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<button data-plandalf-present="ceramics-course">Join the course</button>
```

The HTML button opens checkout without application JavaScript. JavaScript and React give your page an awaitable [`FlowResult`](https://plandalf.com/docs/packages/sdk/interfaces/FlowResult) so it can respond to completion or dismissal. The browser bundle also emits DOM events on an attribute-bound element if you later need a small script. In every mode, confirm the purchase on your server before delivering paid access, tickets, or merchandise.

The HTML scanner also supports `data-plandalf-mount="offer-slug"` for an inline checkout, `data-plandalf-promo="promo-slug"` on a standalone countdown container, and `data-plandalf-apply-promo="promo-slug"` on a checkout trigger or mount for tier pricing. `data-plandalf-frame` selects the checkout presentation. An entitlement gate or a button that chooses a different offer after a deadline needs JavaScript or React, with the protected action checked again on your server.

## Try a complete example

- [Sell a course](https://plandalf.com/docs/guides/await-a-checkout) with a buy button and server-backed course access.
- [Sell event tickets](https://plandalf.com/docs/guides/sell-event-tickets) and confirm the ticket before issuing it.
- [Run an event merch deadline](https://plandalf.com/docs/guides/event-merch-deadline) with a countdown and changing offer or tier price.
- [Gate a feature](https://plandalf.com/docs/guides/gate-a-feature) with a server-backed entitlement check.
- [Add a checkout button](https://plandalf.com/docs/guides/react-checkout) to an existing page or component.

The [browser methods](https://plandalf.com/docs/sdk) document the script's callable `plandalf` object. The [JavaScript package](https://plandalf.com/docs/packages/sdk) and [React package](https://plandalf.com/docs/packages/react) references show the typed entrypoints, parameters, and return values.

Source: https://plandalf.com/docs/guides