Offer configuration stays visible
Use Offers to decide what Vue receives: product, price, buyer, checkout mode, invoice, and automation context.
What it does
- Hosts pagesHosted checkout pagesBuy button
- Custom HTML blocksTotally custom checkout layoutsBuy button
- Embed-script supportBuy buttonSDK
Product surfaces
Where Vue fits in the buying workflow
Integrations work best when the checkout surface, payment state, invoice record, and post-purchase automation all point at the same commercial object. These product screens show the Plandalf controls that should be configured before Vue receives checkout, payment, tax, or workflow context.
Checkout layout and selling blocks stay editable
Before Vue enters the stack, operators still need checkout templates, products, prices, coupons, order bumps, upsells, and branded offer content they can inspect.
Purchase events can start follow-up
Vue should fit into the work after checkout: fulfilment, records, CRM updates, support context, webhooks, and sequences.
The buying surface can live where the buyer is
Vue can start the sale through a hosted checkout, embedded checkout, modal, inline flow, or buy button depending on the stack.
Overview
Vue apps drop the SDK <script> tag in index.html alongside the
root mount. The SDK attaches to any rendered element carrying a
data-plandalf-* attribute.
Pair it with
Connect Vue with…
Platforms whose roles complement Vue inside a Plandalf sequence.
Vue + ActiveCampaign
Capture form leads on Vue straight into ActiveCampaign.
Vue + beehiiv
Capture form leads on Vue straight into beehiiv.
Vue + Kit (ConvertKit)
Capture form leads on Vue straight into Kit (ConvertKit).
Vue + Customer.io
Capture form leads on Vue straight into Customer.io.
Vue + Drip
Capture form leads on Vue straight into Drip.
Vue + Flodesk
Capture form leads on Vue straight into Flodesk.
Integration methods
How Vue connects to Plandalf
Each method below is the minimum viable setup. Pick the one closest to how you already use Vue with checkout, payments, invoices, webhooks, API work, SDK checkout, and integrations.
- Method 1
Embed a Plandalf buy button
Drop the Plandalf embed script into a Vue HTML block and tag any element with `data-plandalf-present` to open the configured flow on click.
<script src="https://cdn.plandalf.com/embed.js" async></script> <button data-plandalf-present="offer_abc123"> Buy now </button>
FAQ
Common questions about the Vue integration
Do I need a paid plan to use Vue with Plandalf?
Plandalf itself is free to connect to Vue. You only need a Vue account that allows API access, which is almost every paid plan.
How long does setup take?
Under 10 minutes — paste a webhook URL into Vue, point it at the Plandalf endpoint, and trigger a test event to confirm.
Can I disconnect Vue later without losing data?
Yes. Disconnecting only revokes the credentials — historical events Plandalf fired stay in your sequence logs, and Vue's own records are untouched. You can reconnect any time and resume from the last seen event.
Does Plandalf store Vue data?
Plandalf stores the minimum IDs needed to address a record in Vue plus a log of events Plandalf fired. Source-of-truth data stays in Vue.
What if my website need isn't covered by the actions or triggers listed here?
Drop into the Plandalf REST API and call Vue directly from your sequence's HTTP action. Anything Vue's public surface exposes is reachable.
Is there a usage limit?
There's no Plandalf-side limit. Vue's own plan limits apply.
Where do I find Vue's own documentation?
Vue's homepage at https://vuejs.org links to their developer docs. For Plandalf-side questions about the Vue integration, see the Plandalf docs.