# Webflow
Add Plandalf checkouts, inline embeds, and promo countdowns to Webflow with custom code and Webflow custom attributes.
Source: /docs/platforms/webflow
Last modified: 2026-06-19
Webflow works well with Plandalf because the SDK can discover elements that Webflow renders from Designer attributes. Load the SDK once, then attach checkout behavior to buttons, links, or embed blocks.


> **Designer owns the pixels, Plandalf owns checkout**
>

  Keep styling in Webflow. Use custom attributes to connect the styled element to a Plandalf offer, promo, or inline checkout.


## The path


### Add the SDK to the page or site


    In Webflow, add the SDK script in Site Settings or the page's custom code area before the closing body tag.


### Create a normal Webflow button


    Style the button or link in Designer first. Do not replace it with a generic embed unless Webflow needs raw HTML.


### Add the Plandalf custom attribute


    Add `data-plandalf-present` with the offer slug as the value. Optional attributes can control frame, size, promo, and environment.


### Publish and test the live page


    Webflow custom code usually runs after publish, so verify the published page, not only Designer preview.


## Add the script

```html
<script src="https://acme.plandalf.com/js/plandalf-sdk.js" async></script>
```

## Add a checkout trigger

In Webflow Designer, select the button or link and add these custom attributes.


### Button custom attributes


- `data-plandalf-present` (offer slug; required):
    Opens the matching offer when the Webflow element is clicked.


- `data-plandalf-frame` (modal | slideout | bottom | fullscreen):
    Changes the checkout frame. Leave this unset for the default modal.


- `data-plandalf-size` (compact | standard | wide | fullscreen):
    Use `wide` when an offer has multiple pages, add-ons, or a larger checkout layout.


- `data-plandalf-apply-promo` (promo slug):
    Applies promo pricing to the checkout opened by that element.


- `data-plandalf-mode` (test | live | preview):
    Use `test` while validating the page before launch.


## Embed checkout or countdowns


### Webflow embeds


```html Inline checkout
<div data-plandalf-mount="pro-plan" style="min-height: 480px"></div>
```

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


> **Do not use the promo widget as the checkout discount**
>

  `data-plandalf-promo` renders the standalone countdown or promo widget. To apply promo-tier pricing to checkout, add `data-plandalf-apply-promo` to the button or inline checkout element.


## Related docs


### [Buy buttons](/docs/offers/buy-buttons)


    Connect styled buttons and links to a published offer.


### [Embedded promos](/docs/timers/embedded-promos)


    Add countdown widgets to landing pages and campaign sections.


### [Configure the SDK](/docs/sdk/configure)


    See the complete option and attribute surface.