Webflow

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.

Note. 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.

Choose the journey

Start with checkout, then add the other journeys you need. Webflow hosts the page. Payment and commission records stay in Plandalf and its connected services.

Before you start

• Use a Webflow test site where you can edit custom code and publish. Webflow currently allows custom code on Core, Growth, Agency or Freelancer Workspaces, or sites with an active Site plan. Check Webflow’s custom-code requirements for your account.
• In Plandalf, create and publish a checkout with a test product and price. Keep its offer slug and account SDK URL ready.
• Set up a Stripe test connection and verify the price belongs to that test account. The current checkout can fall back to live Stripe when a test connection is missing; data-plandalf-mode="test" alone is not enough to establish payment safety.
• Use a test buyer inbox you control. Do not put secret API keys or Webflow credentials in custom code.

This guide opens Plandalf checkout from a Webflow page. It does not configure Webflow Ecommerce order sync or delivery of what you sell; configure and test fulfillment separately.

The path

1. Add the SDK to the page or site

   Open Site settings → Custom code, add your account’s SDK script to Footer code, and save changes. Add it once; do not duplicate it in page code or an embed.

2. 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.

3. Add the Plandalf custom attribute

   Select the button, open Element settings → Custom attributes, and add data-plandalf-present with your offer slug. Add data-plandalf-mode with the value test for this walkthrough. See Webflow’s custom-attribute instructions.

4. Publish and test the live page

   Publish to the intended test domain and open the published page in a signed-out session. Click the button and check the checkout’s product, amount and currency. Preview can render custom code, but saved changes need publication before visitors receive them.

Add the script

Replace the example account domain below with the SDK URL from your Plandalf account. acme is a placeholder, not a shared production endpoint.

<script src="https://acme.plandalf.dev/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): 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

<div data-plandalf-mount="pro-plan" data-plandalf-mode="test" style="min-height: 480px"></div>

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

Warning. 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.

Test the complete purchase

1. Confirm the actual Stripe connection and price are in the intended sandbox. Stop if either is live or unclear.
2. Open checkout from the published Webflow test page. Use your controlled buyer email and Stripe test details, never a real card.
3. Complete checkout and check the success or return page.
4. In Plandalf, find the paid invoice and match its product, amount and currency to the purchase. Confirm the corresponding payment in the intended Stripe test account.
5. Check any promised receipt or delivery separately. Repeat with a declined test payment and confirm it does not produce a paid invoice or grant delivery.

Repeat the button check at a mobile width. If using an inline checkout, repeat the purchase from that placement too. A working popup does not verify an inline placement.

Add a timer to the Webflow page

Use a disposable test campaign while checking deadline behavior. Follow Create a promo and Promo tiers in Plandalf. Record the promo slug, deadline and timezone, connected offer, tier price and intended expiry action.

1. In Designer, add an empty Div Block where the countdown belongs. Open Element settings → Custom attributes and set data-plandalf-promo to your promo slug, for example early-bird.
2. Select the existing checkout button. Add data-plandalf-apply-promo with that same slug. Keep data-plandalf-present set to the offer and data-plandalf-mode set to test.
3. Save and publish to the test domain. The full SDK installed earlier discovers both elements. Do not add a second copy of the SDK.
4. Open the published page and compare the countdown with the campaign deadline. Open checkout and compare its amount and tier with the active promo in Plandalf.

The equivalent markup is:

<div data-plandalf-promo="early-bird"></div>
<button
  data-plandalf-present="YOUR_PUBLISHED_OFFER_SLUG"
  data-plandalf-apply-promo="early-bird"
  data-plandalf-mode="test"
>Buy now</button>

Verify the deadline and expiry

• Reload and return in the same browser session. The deadline should follow the configured campaign type. For an evergreen campaign, do not assume a different browser represents the same visitor.
• Check the countdown and checkout together before and after a short test campaign expires. Compare the resulting tier, price and configured destination with Plandalf’s campaign settings.
• If a tier has a redirect destination, the SDK promo monitor can navigate the Webflow page there. Use a controlled test destination, and verify that it does not send visitors into a redirect loop.
• Complete a separate sandbox purchase if the promo changes the amount charged. Compare the actual paid amount with the expected tier price.

A countdown reaching zero does not prove that checkout pricing or access changed. Record those outcomes separately. See Embedded promos for other placements.

Track affiliate referrals from Webflow

This path uses the early-access Plandalf Affiliates program with Plandalf checkout. It does not add affiliate tracking to Webflow’s own Ecommerce checkout.

1. Follow Plandalf Affiliates with Plandalf checkout to enable the program, add a test partner and choose the commission policy. For a subscription, choose its recurring policy too.
2. In Affiliates → Setup, copy your organization’s tracking script and test partner link. Compare its account domain with the SDK already installed in Webflow. The program and checkout must belong to that organization; keep one SDK installation.
3. Set the partner link’s destination to the published Webflow test landing page. Keep the configured partner parameter, normally via. For example: https://YOUR_TEST_SITE.webflow.io/?via=PARTNER_CODE. Use the actual test link and partner code from Plandalf.
4. Keep the full SDK on both the landing page and the page containing the checkout button. Site-wide Footer code covers both. If you installed it only on one page, add it to the other page without duplicating the site-wide script.
5. Open the test partner link in a fresh browser session and complete the existing Webflow checkout journey after verifying the payment sandbox. If your site requires referral consent, complete the site’s consent flow before expecting a click to be captured.
6. Open Affiliates → Sales, select test mode, and find the matching purchase. Check the partner, invoice, amount, attribution explanation and commission against the program policy.

The SDK passes captured referral evidence into its present() and mount() checkout requests. Do not add a second sales-API report or an automation to record that same native sale. via identifies the affiliate; pf_ref serves a separate buyer/promo purpose.

If the buy button is a normal hosted-checkout link

A normal Webflow Link Block that goes to another domain needs the referral to cross that domain boundary. Add the real checkout hostname to the existing script’s decoration setting:

<script
  src="https://YOUR_ACCOUNT.plandalf.dev/js/plandalf-sdk.js"
  data-config-referral-decorate="YOUR_CHECKOUT_HOSTNAME"
  async
></script>

Use only the hostname, without a scheme or path. Keep the link’s normal destination set in Webflow’s link settings. The SDK decorates matching ordinary links with its captured referral token. Custom JavaScript redirects require their own token handoff; test them separately.

Verify commission changes

• Confirm one eligible commission for one paid test purchase. A recorded click or visible referral badge is not sale attribution proof.
• Repeat with a declined sandbox payment and check that it does not create a paid sale or commission.
• Refund the test purchase and check the commission adjustment.
• For subscriptions, follow the renewal verification steps: the next eligible paid invoice should credit the same partner according to the policy, without another link visit. Replaying the same provider event must not create a second commission.

Commission recording and paying partners are separate actions. Follow the payout guide when you are ready to pay approved balances.

Add a follow-up automation when needed

Choose the actual delivery or notification destination in Plandalf. Configure and test its supported action using that destination’s guide. Verify the resulting record or message after the same sandbox purchase.

The Webflow embed does not configure a Webflow API receiver, create Webflow Ecommerce orders, or grant membership access. A custom Webflow CMS or Ecommerce workflow needs its own authenticated server-side adapter and replay. Do not put Webflow API credentials in Footer code, an Embed element or browser JavaScript.

Troubleshooting

• The button does nothing: confirm the published page includes the SDK once, uses your account URL, and has the correct offer slug in the rendered custom attribute. Republish after changes.
• The wrong product appears: check the offer slug and its selected price in Plandalf.
• Preview works but the public page differs: confirm you published to the domain you opened.
• Payment succeeds but delivery is missing: inspect the paid invoice and your configured fulfillment action. Adding a checkout button does not create a Webflow Ecommerce order.

Related docs

• Buy buttons — Connect styled buttons and links to a published offer.

• Embedded promos — Add countdown widgets to landing pages and campaign sections.

• Configure the SDK — See the complete option and attribute surface.

Integration overview

See Plandalf with Webflow for the integration overview.