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:
<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 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 with a buy button and server-backed course access.
- Sell event tickets and confirm the ticket before issuing it.
- Run an event merch deadline with a countdown and changing offer or tier price.
- Gate a feature with a server-backed entitlement check.
- Add a checkout button to an existing page or component.
The browser methods document the script's callable plandalf object. The JavaScript package and React package references show the typed entrypoints, parameters, and return values.