Klaviyo

Webflow forms collect submissions, but nothing built into the platform segments subscribers or automates welcome and abandoned-checkout follow-ups. Teams that capture leads on a Webflow site still need somewhere to store profiles and trigger messages. Klaviyo handles that marketing layer, but Webflow is not among the platforms with a pre-built Klaviyo integration, so the connection takes deliberate setup.

Connecting the two turns your Webflow site into a data source for email and SMS marketing. Form submissions and ecommerce orders become Klaviyo profiles and flow-triggering events, while product views feed browse abandonment and cart recovery automations. You can also embed Klaviyo's own sign-up forms directly on Webflow pages.

This integration fits marketers and no-code builders growing an email list from site traffic. Ecommerce operators running stores on Webflow Ecommerce and agencies managing retention programs for DTC clients use it too. Developers get full API access on both sides for custom event pipelines and consent-aware subscription handling.

How to integrate Klaviyo with Webflow

What is Klaviyo? Klaviyo is a B2C CRM and marketing automation platform for email, SMS, mobile push, and web forms. It unifies customer data into profiles and groups them into segments that update in real time. Flows are triggered by behaviors like sign-ups, purchases, and cart abandonment. It also hosts web sign-up forms you can publish onto non-native platforms like Webflow.

How that data reaches Klaviyo depends on the platform, and Webflow takes a bit more setup than most.

Klaviyo installs its onsite tracking automatically through native integrations like Shopify and WooCommerce, and adds it on platforms like BigCommerce and Wix once you switch on the onsite JavaScript setting. Webflow has no native Klaviyo integration, so every Webflow setup starts with a manual snippet or a connector app. An automation platform provides another route. Teams take that extra step to turn data their Webflow site already generates into welcome series and abandoned cart recovery. The same data can power back-in-stock alerts.

The Klaviyo and Webflow integration supports five approaches:

• The Klaviyo and Webflow MCP servers let an AI client read and act on both accounts from one place.
• The ConnectMagic app syncs forms, orders, and visitor activity from the Webflow Apps panel without writing code.
• Klaviyo forms and onsite tracking run on any Webflow page through pasted code snippets.
• Automation platforms route Webflow triggers to Klaviyo actions without a server.
• The Webflow and Klaviyo APIs give you full control over profiles, events, and catalog sync, but require server-side development.

Most implementations combine two or more of these depending on how much of the data flow you need to own.

Connect Klaviyo and Webflow through MCP servers

MCP is the quickest way to work across both accounts from an AI client, though it does not move form data between them on its own. The Klaviyo MCP server is a remote endpoint at https://mcp.klaviyo.com/mcp, and an assistant connected to it can inspect profiles and segments, review campaign and flow performance, draft campaigns, and pull reporting against live account data, within the limits of your role. The Webflow MCP server covers the other side: site content, CMS items, and site management. Both authorize over OAuth from clients such as Claude and Cursor.

Neither server replaces the data paths below. Use MCP to run and inspect the programs, and one of the methods below to feed them.

Install the ConnectMagic app

ConnectMagic, built by Ristretto Apps, is the closest Webflow Marketplace option, since Klaviyo publishes no official Webflow app. It carries an "Approved by Webflow" badge, which indicates Webflow review; endorsement and certification are outside the badge's scope. It syncs Webflow form contacts and ecommerce data with Klaviyo in real time. You need a Webflow plan with Apps support and a Klaviyo account with Public and Private API keys.

To set up the integration:

1. Open the Apps panel in Webflow and install ConnectMagic.
2. In Klaviyo, click your account name in the lower left, open Settings, then open the API keys tab and copy your Public and Private API keys; ConnectMagic requires both.
3. Publish your site and submit a test form to confirm the profile lands in Klaviyo.

Once it is connected, the app covers four jobs:

• Order events: It sends Webflow Ecommerce orders to Klaviyo as events that post-purchase flows can trigger on.
• Abandoned cart capture: It captures the email address a shopper enters during checkout, before the order completes.
• Onsite activity: It tracks visitor activity on your published Webflow site against Klaviyo profiles.
• Form submissions: It sends native Webflow form data into Klaviyo as profiles.

Ecommerce event tracking requires a Webflow Ecommerce plan; basic form syncing works on lower-tier plans with Apps support. The sync runs one way, from Webflow to Klaviyo, so writing Klaviyo data back to your site takes one of the methods below.

Embed Klaviyo forms and tracking with custom code

Klaviyo's sign-up forms and tracking script work on Webflow through pasted code, no connector required. Because Webflow is a non-native platform for Klaviyo, embedded forms need two snippets: Klaviyo.js plus the form's embed code. Popup, flyout, and full-page forms need only Klaviyo.js and publish straight from Klaviyo's form builder. Adding head and body code requires a paid Site plan or a paid Workspace plan.

Install Klaviyo.js site-wide

Klaviyo.js powers forms and onsite tracking, so install it first. It goes in your site's head section through the head code field in Site settings.

To install the script:

1. In Klaviyo, click your account name in the lower left, open Settings, then open the API keys tab and note your Public API Key.
2. In Webflow, open Site settings > Custom code, paste this snippet into the head code section, and replace PUBLIC_API_KEY with your key:

<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

3. Click Save changes and publish the site.

Onsite tracking records activity for identified browsers only, so anonymous visits go unrecorded until a visitor is cookied. Klaviyo's anonymous activity backfill holds pre-identification activity in the browser and attaches it to the profile once the visitor is identified.

Embed a sign-up form with a Code Embed element

Embed-type forms render inline at a fixed spot on the page and appear immediately on load. Build the form in Klaviyo, then place its code with a Code Embed element wherever it should sit on the canvas.

To embed the form:

1. In Klaviyo, enable sign-up form functionality on your account first.
2. Publish the form and copy the embed code from the "Published successfully" modal or the Targeting & behaviors tab.
3. In Webflow, drag a Code Embed element from the Add panel onto the page, paste the code, and click Save and close.
4. Publish the site and confirm the form renders.

Each custom code section has a character limit, so keep what you paste lean. If you need the same sign-up form in more than one spot, create a separate form in Klaviyo for each placement.

Point a native Webflow form at Klaviyo

You can keep your existing form styling and send submissions to a Klaviyo list with no middleware. Set the form's action to Klaviyo's subscribe endpoint and pass the list ID as a hidden field.

To connect the form:

1. Select the form element in Webflow and open its settings.
2. Set the form's custom action to https://manage.kmail-lists.com/ajax/subscriptions/subscribe in the form element's settings.
3. Add a hidden field containing your Klaviyo list ID, then publish.

Setting a custom action disables submission storage and email notifications for that form, so anything you need to keep lives in Klaviyo. Use the /client/subscriptions path below to set consent status, since the legacy subscribe URL does not record it.

Connect with automation platforms

Zapier ships prebuilt Zap templates for the pair, including one that adds new Webflow form submissions to Klaviyo as subscribed profiles. Klaviyo calls its Zapier webhook path a workaround with limited support and recommends using it with developer support. Make and viaSocket also connect the two directly, and n8n reaches Klaviyo through its HTTP Request node.

The workflows teams build most often break down like this:

• Form submission to profile: A new Webflow form submission subscribes a profile, creates or updates one, or adds it to a Klaviyo list.
• Order to event: A new or updated Webflow order creates a Klaviyo event or profile that flows can trigger on.
• Klaviyo event to CMS: A new Klaviyo event creates or updates live items in a Webflow collection.
• Scenario building in Make: Make has Webflow and Klaviyo modules but no prebuilt template for the pair, so you map Watch Events to Create an Event yourself.

In n8n, a Webflow Trigger node feeding an HTTP Request to Klaviyo gives the equivalent path, and viaSocket ships ready-made flows such as creating a Klaviyo profile on a new Webflow form submission. All of them listen for Webflow events and push data into Klaviyo without a server.

Build with the Webflow and Klaviyo APIs

Direct API integration gives you full control over consent handling and catalog sync, and it is the only path for transactional events. It requires server-side development on a serverless function or your own backend. Never put a private API key in Webflow custom code. Klaviyo's /client endpoints are the exception, since they accept browser calls with only a public key.

Direct builds rest on these APIs and webhooks:

• Klaviyo API: The Klaviyo API handles profiles, events, subscriptions, and catalogs from a server.
• Browser-safe endpoints: Klaviyo's client endpoints accept front-end calls with a public key, so no secret ships to the browser.
• Webflow Data API: The Webflow API reads and writes CMS collections and form submissions from your backend.
• Webflow webhooks: Webflow webhooks push form submissions and order events to your handler as they happen.

Send the current revision date as a header on every /api request against https://a.klaviyo.com so responses match the schemas you built against.

Subscribe form leads with recorded consent

This pattern captures Webflow form submissions and subscribes profiles with proper consent status. You need to record consent because Klaviyo's Add Profiles to List endpoint does not change it, and profiles without explicit consent never receive marketing.

To build it:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and set triggerType to form_submission. A filter parameter can target one specific form.
2. In your handler, verify the x-webflow-signature header, a SHA-256 HMAC of timestamp:request_body, and reject stale timestamps.
3. Call POST https://a.klaviyo.com/api/profile-subscription-bulk-create-jobs with the email from the webhook's data object to subscribe the profile.

If the target list uses double opt-in, the profile enters a pending state until it confirms; single opt-in subscribes immediately. Without a server, POST /client/subscriptions/?company_id=PUBLIC_API_KEY performs the same subscription from front-end JavaScript.

Send Webflow Ecommerce orders as Klaviyo events

Order webhooks become Klaviyo metrics that trigger post-purchase flows and feed segmentation. Klaviyo recommends sending purchase events from a server, because ad blockers and slow connections can stop client-side requests from firing.

To implement it:

1. Register a webhook with triggerType: "ecomm_new_order"; the payload includes customerInfo, purchasedItems, and totals.
2. Send POST https://a.klaviyo.com/api/events with a metric name, a profile identifier, and the order total as value.
3. Fire one Placed Order event for the whole order and one Ordered Product event per line item, and use unique_id to deduplicate them.

Webflow retries failed webhook deliveries, and sending the same unique_id twice records the event only once, so counts stay accurate.

Track behavior with the JavaScript API

With Klaviyo.js installed, two functions handle client-side tracking. klaviyo.identify() ties a browser to a profile and requires an email or phone_number key. klaviyo.track() records named events with properties.

Add a page-level script to your product template pages that calls:

klaviyo.track("Viewed Product", {
  "ProductName": item.ProductName,
  "ProductID": item.ProductID,
  "SKU": item.SKU,
  "Categories": item.Categories,
  "ImageURL": item.ImageURL,
  "URL": item.URL,
  "Brand": item.Brand,
  "Price": item.Price,
  "CompareAtPrice": item.CompareAtPrice
});

Populate the properties from your CMS fields for each product, then fire an Added to Cart event on add-to-cart clicks. The visitor must already be identified for either event to record, and both feed browse abandonment flows and real-time segments in Klaviyo.

What you can build with the Klaviyo Webflow integration

Integrating Klaviyo with Webflow lets you run list growth and lifecycle messaging, email and SMS both, off your site's own forms and orders. You don't need to replatform to an ecommerce-first CMS to get there.

Four patterns come up again and again:

• Pre-launch list building: A coming-soon page with an embedded Klaviyo form drops signups into a launch list and fires a welcome flow before the store exists.
• Email and SMS list growth: Several calls to action across the site feed separate email and SMS lists, each with its own consent capture.
• Abandoned cart recovery: An exit-intent discount popup plus a Klaviyo email flow brings back visitors who left a Webflow Ecommerce checkout.
• Behavioral flows and back-in-stock alerts: A Webflow CMS product template fires Viewed Product and Added to Cart events, and a "Notify me" form on out-of-stock items feeds restock alerts.

If you need more control over catalog sync or multi-list consent logic, the API path covers those cases. To see the same order pipeline pointed at a different destination, read how to automate Webflow order data.