ConnectMagic

How to integrate ConnectMagic with Webflow

ConnectMagic syncs Webflow form submissions to Klaviyo lists, tracks ecommerce events like abandoned carts and product views, and enables automated email sequences based on site activity. This integration helps you send targeted emails without managing manual data exports.

You can install the ConnectMagic marketplace app for visual field mapping and toggle-based event tracking, or embed the ConnectMagic script using Webflow's Custom Code Embed element for control over script placement.

Use the ConnectMagic app

The ConnectMagic marketplace app installs directly into Webflow and handles the integration through visual configuration. You map Webflow form fields to Klaviyo properties with dropdown menus, enable ecommerce event tracking with toggle switches, and test the connection in real time.

The app provides the following features:

• Visual field mapping: Drag Webflow form fields to corresponding Klaviyo properties (email to email, name to first/last name, phone to phone number, custom fields to custom properties)
• Ecommerce event tracking: Enable order placed, abandoned cart, product viewed, and checkout started events through toggle switches
• Test mode dashboard: View sync logs with timestamps, status indicators, and one-click resync for failed submissions
• Custom event configuration: Click elements on your live site to create tracking events without editing code

Installation steps:

1. Open your Webflow project
2. Access the Apps panel and search for "ConnectMagic"
3. Click install and authorize the app
4. Enter your Klaviyo API keys (Public and Private)
5. Map form fields to Klaviyo properties using the visual interface
6. Enable ecommerce event toggles if you run a Webflow Ecommerce store
7. Publish your site to activate tracking

You need a Webflow account with custom code access and an active Klaviyo account. Ecommerce event tracking requires a Webflow Ecommerce plan.

The app validates API keys during setup and displays immediate confirmation when the connection succeeds. After publishing, the Test Mode dashboard shows recent syncs with status indicators (success, error, pending) and provides one-click resync buttons for failed syncs.

Native features and direct embeds

Install ConnectMagic through custom code embeds when you need control over script placement or want to implement tracking on specific pages. This method works through Webflow's Custom Code Embed element, which accepts HTML, CSS, and JavaScript without backend development.

The embed method provides the same functionality as the marketplace app but requires pasting the ConnectMagic script into your site code. You still configure field mapping and event tracking through the ConnectMagic dashboard after installation.

Implementation options:

Page-specific embeds: Use the Custom Code Embed element to place tracking on individual pages:

1. Drag the Code Embed element from the Add panel
2. Paste the ConnectMagic script provided in your dashboard
3. Position the element where you want tracking to activate
4. Publish the site

Site-wide tracking: Add code to Head or Footer sections for tracking across all pages. Head Code loads before page content and works for initialization scripts, while Footer Code loads after page content and improves page load performance for most third-party widgets.

1. Open Project Settings
2. Navigate to Custom Code
3. Paste the script in Footer Code (recommended for performance)
4. Save changes
5. Publish

Dynamic CMS embeds: Pass CMS data to Klaviyo using Collection field references in Code Embed elements. This method works for dynamic identifiers like product IDs, email addresses, or custom properties. Note that Collection field references cannot dynamically inject raw embed code itself. For truly dynamic embed scripts in CMS collections, use a Rich Text field with the CODE option enabled.

1. Add a Code Embed element to a Collection template
2. Insert Collection field references using the purple field icon
3. Webflow reads the dynamic values when pages generate

Custom Code Embeds show only a placeholder in Webflow. You must publish to a staging or live domain to verify functionality. Webflow applies a 50,000-character limit collectively across all custom code areas (Site settings, Page settings, Code Embed elements, and CMS Rich Text fields). If you use multiple embeds, the total across all areas must not exceed this limit.

What you can build

Integrating ConnectMagic with Webflow enables real-time synchronization of form submissions to Klaviyo lists, automatic tracking of behavioral events such as page views and product clicks, and abandoned cart recovery through automated email sequences.

• Abandoned cart recovery system: Build a three-email sequence that fires when customers add items to cart but don't complete checkout, with dynamic product images and pricing pulled from Webflow's ecommerce data
• Post-purchase upsell campaigns: Create automated follow-up emails that recommend related products based on completed order data synced from Webflow to Klaviyo segments (requires manual setup of product recommendations in Klaviyo's flow editor)
• Lead scoring workflows: Track form submissions, page views, and product interactions from Webflow to build Klaviyo segments that score leads by engagement level (requires configuring scoring rules manually in Klaviyo)