# Install the SDK
Load the Plandalf browser SDK on any site, app, page builder, or framework route.
Source: /docs/sdk/install
Last modified: 2026-06-19
The browser SDK is served from your organization host.

```html
<script>
  window.plandalf = window.plandalf || function () {
    (window.plandalf.q = window.plandalf.q || []).push(arguments);
  };
</script>
<script src="https://acme.plandalf.com/js/plandalf-sdk.js" async></script>
```


### Where to place the SDK

Load the SDK wherever the customer can take a buying action. The same install pattern works across common web surfaces.

- [Marketing and sales pages](/docs/platforms/custom-html) - Paste the script into a page builder or static template, then add `data-plandalf-present` to the call-to-action.
- [App pricing screens](/docs/platforms/nextjs) - Load the SDK client-side, identify the logged-in user, and call `present()` from a button.
- [Campaign pages](/docs/timers/embedded-promos) - Pair a checkout button with `data-plandalf-promo` so countdown state and checkout pricing stay aligned.

## Wait for readiness

The SDK loads asynchronously. Use `plandalf.ready()` when code must run after the SDK instance exists.

```js
plandalf.ready((sdk) => {
  sdk.identify(userJwt);
  sdk.present("pro-plan");
});
```

You can also listen for the browser event:

```js
window.addEventListener("plandalf:loaded", () => {
  console.log("Plandalf SDK loaded");
});
```

## Install by platform


### [Custom HTML](/docs/platforms/custom-html)


    Paste the script tag into your page head or before your closing body tag.


### [React](/docs/sdk/react)


    Use the React provider and hooks when your app is already component-driven.


### [Next.js](/docs/platforms/nextjs)


    Load the script client-side and call SDK methods from client components.


### [Webflow](/docs/platforms/webflow)


    Add the script in custom code and use attributes in Designer elements.


## Verify installation

Open DevTools on the page and run:

```js
plandalf.ready((sdk) => {
  console.log(typeof sdk.present === "function");
});
```

The check should print `true`. After that, you can call SDK instance methods such as `present`, `mount`, `identify`, `reset`, `gate`, `from`, and `promo`.