Webflow
Add Plandalf checkouts, inline embeds, and promo countdowns to Webflow with custom code and Webflow custom attributes.
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
-
In Webflow, add the SDK script in Site Settings or the page’s custom code area before the closing body tag.
-
Add
data-plandalf-presentwith the offer slug as the value. Optional attributes can control frame, size, promo, and environment. -
Webflow custom code usually runs after publish, so verify the published page, not only Designer preview.
Add the script
<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-presentoffer slugrequiredOpens the matching offer when the Webflow element is clicked.
data-plandalf-framemodal | slideout | bottom | fullscreenChanges the checkout frame. Leave this unset for the default modal.
data-plandalf-sizecompact | standard | wide | fullscreenUse wide when an offer has multiple pages, add-ons, or a larger checkout layout.
data-plandalf-apply-promopromo slugApplies promo pricing to the checkout opened by that element.
data-plandalf-modetest | live | previewUse test while validating the page before launch.
Embed checkout or countdowns
Webflow embeds
<div data-plandalf-mount="pro-plan" style="min-height: 480px"></div><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
Builder context
Connect platform setup to the full stack.
Platform docs explain where an external system fits. The related surfaces show how integrations, offers, payments, invoices, and automation stay visible in Plandalf.