Omnisend

How to integrate Omnisend with Webflow

Email marketing automation drives conversions by capturing visitor information, recovering abandoned carts, and sending targeted campaigns based on site behavior. Omnisend provides email and SMS marketing tools that work with Webflow sites to build automated campaigns responding to form submissions, product views, and purchase activity.

Connect Omnisend with Webflow through embedded tracking code and forms, third-party automation platforms like Zapier and Make.com, or direct API integration. Embedded code handles signup forms and visitor tracking without requiring code knowledge. Automation platforms connect Webflow form submissions and order data to Omnisend through visual workflow builders. API integration supports custom implementations for high-traffic sites requiring server-side tracking and custom data synchronization.

Embed tracking code and forms

Install Omnisend's JavaScript tracking snippet in your Webflow site footer to track visitor behavior, display forms, and identify contacts. This site-wide tracking code runs before implementing signup forms, popups, or custom event tracking.

Retrieve your Brand ID from Omnisend account settings. In Webflow, navigate to Site settings > Custom Code > Footer Code and paste this snippet:

<script type="text/javascript">
 window.omnisend = window.omnisend || [];
 omnisend.push(["brandID", "YOUR_BRAND_ID"]);
 omnisend.push(["track", "$pageViewed"]);
 !function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="<https://omnisnippet1.com/inshop/launcher-v2.js>";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();
</script>



The tracking code runs site-wide after installation, capturing visitor data and identifying contacts for automation. Once installed, it provides the foundation for Omnisend-specific features including popup forms, embedded signups, and behavioral automation triggers, though each of these features requires separate configuration to function.

Add inline signup forms

Inline signup forms embed directly into your Webflow pages as part of the normal page content rather than as popups. This method integrates with your site design while capturing emails from visitors.

Implement inline forms through these steps:

1. Create form in Omnisend
   • Navigate to Forms > Create Form > Embedded forms category
   • Choose a template and customize using the drag-and-drop Form Builder
   • Configure fields, design, and behavior settings
   • Save and publish to generate your unique embed code
2. Generate and copy embed code
   • After publishing, Omnisend provides copy-paste HTML code automatically
   • This code snippet contains all form functionality
3. Add to Webflow page
   • According to Webflow's Custom Code Embed guide, drag a Code Embed element from the Add panel to your desired page location
   • Paste the Omnisend-generated embed code directly into the Code Embed element
   • Save and publish your Webflow site (the form only appears after publishing)

Technical requirements

• Webflow plan with Core, Growth, Agency, or Freelancer Workspace, or an active Site plan (required for Code Embed element access)
• Character limit of 50,000 characters per code block (sufficient for all Omnisend form codes)
• No HTML knowledge required

Design considerations

Inline forms integrate directly into your page layout, making them useful for dedicated signup sections, landing pages, or homepage email capture areas. Unlike popups, inline forms don't interrupt user experience and encourage natural form discovery within your content flow.

Display popup and flyout forms

Create popup and flyout forms in Omnisend's visual builder and set display behavior to Custom Trigger in Behavior Settings. Copy the generated code snippet and insert it within a Webflow Code Embed element where you want the trigger to activate.

Omnisend's popup forms appear based on visitor behavior like time on page, scroll depth, or exit intent. Create your popup in Forms > Create form > Style > Popup, customize the appearance, and configure display triggers through visual controls.

For custom triggering based on specific button clicks or user actions, set the form display to Custom Trigger in Behavior Settings. Copy the generated code snippet and insert it within a Webflow Code Embed element where you want the trigger.

Replace YOUR_FORM_ID with your specific form identifier from Omnisend. This gives you control over when and where forms appear based on user interactions, supporting custom triggers like button clicks or scroll-based displays.

Connect through automation platforms

Third-party automation platforms like Zapier, Make.com, and viaSocket connect Webflow forms and e-commerce data to Omnisend through visual workflow builders. These platforms handle authentication, data transformation, and error handling automatically. All support Webflow triggers (new form submissions, new orders, updated orders) and Omnisend actions (create subscriber, send customer event). Choose based on your technical needs and budget.

Zapier integration

Zapier provides pre-built workflows connecting Webflow with Omnisend. Available triggers include New Form Submission, New Order, and Updated Order. Omnisend functions as an action app only. Workflows send data to Omnisend but cannot initiate from Omnisend events (Zapier's Omnisend documentation). Best for non-technical users who want templates without coding.

Make.com integration

Make.com provides native modules for both Webflow and Omnisend with the same triggers and actions as Zapier. Unlike Zapier's template-based approach, Make.com offers more control for complex workflows requiring conditional logic, multiple data transformations, or advanced error handling. Best for technical users managing complex automation scenarios.

viaSocket integration

viaSocket offers lower pricing than Zapier with pre-built templates for common workflows like form submissions triggering subscriber creation. Best for budget-conscious projects with straightforward automation needs.

Build with Webflow and Omnisend APIs

Direct API integration provides control over implementation for high-traffic sites requiring traffic management, server-side tracking, or custom business logic. The Omnisend API uses API key authentication, while Webflow's API requires OAuth 2.0 tokens for authorization.

API integration makes sense when you need real-time data synchronization, custom error handling, or features not supported by code embeds like abandoned cart tracking, order synchronization, or custom event tracking. Server-side implementations improve tracking accuracy by bypassing browser restrictions such as ad blockers, Safari's Intelligent Tracking Prevention, and Firefox's Enhanced Tracking Protection.

Sync contacts from form submissions

Capture Webflow form submissions and create corresponding contacts in Omnisend using the Contacts API. Use POST /v3/contacts to create new contacts with email addresses, subscription status, and custom properties. For contact updates, use PATCH /v3/contacts/{contactID} to perform partial updates while keeping existing Omnisend data, rather than PUT which would replace the entire resource.

Webflow form submissions can be synchronized to Omnisend by transforming submission data to match the required contact object structure. First, retrieve form submission data from Webflow's Forms API using GET /forms/{form_id}/submissions with Bearer token authentication (requires forms:read scope). Transform the data to match Omnisend's format, then POST to create the contact:

// Transform Webflow submission to Omnisend format per API requirements
const omnisendContact = {
 identifiers: [{
   type: "email",
   id: webflowSubmission.email,
   channels: {
     email: {
       status: "subscribed",
       statusDate: new Date().toISOString()
     }
   }
 }],
 firstName: webflowSubmission.name.split(' ')[0],
 lastName: webflowSubmission.name.split(' ')[1]
};

// Post to Omnisend API endpoint per authentication requirements
const response = await fetch('<https://api.omnisend.com/v3/contacts>', {
 method: 'POST',
 headers: {
   'X-API-KEY': process.env.OMNISEND_API_KEY,
   'Content-Type': 'application/json'
 },
 body: JSON.stringify(omnisendContact)
});



For production implementations, implement request queuing and monitor API response headers to handle traffic spikes. Use PATCH (not PUT) for contact updates to keep existing Omnisend data. The method shown above (POST) creates new contacts, while updating existing contacts requires the PATCH method to avoid data loss.

Track abandoned carts and browse abandonment

Create abandoned cart campaigns by sending cart data to Omnisend using custom JavaScript integration with Webflow. When users add products to their Webflow site cart, capture that data with custom JavaScript and POST to the Omnisend /v3/carts endpoint:

{
 "cartID": "cart_abc123",
 "email": "customer@example.com",
 "currency": "USD",
 "cartSum": 99.99,
 "cartRecoveryUrl": "<https://yourstore.com/cart/recover/abc123>",
 "createdAt": "2026-01-12T10:30:00Z",
 "products": [
   {
     "productID": "prod_123",
     "sku": "SKU-001",
     "title": "Premium Widget",
     "quantity": 2,
     "price": 49.99,
     "imageUrl": "<https://yourstore.com/images/widget.jpg>",
     "productUrl": "<https://yourstore.com/products/widget>"
   }
 ]
}



Since Webflow doesn't provide native cart tracking APIs, you'll need to implement custom JavaScript on product and cart pages to capture this data. Send it to your middleware server, which then makes controlled calls to Omnisend's API with proper authentication. Your middleware must implement request queuing and monitor API response headers to handle traffic appropriately and avoid HTTP 429 errors.

For product view tracking, use the Events API with POST /v3/events to create custom events. The "viewed product" event supports behavioral automation workflows by capturing product viewing behavior (Omnisend's event tracking documentation):

{
 "eventName": "viewed product",
 "eventVersion": "v2",
 "origin": "api",
 "eventID": "unique-event-uuid",
 "eventTime": "2026-01-12T10:30:00Z",
 "contact": {
   "email": "customer@example.com"
 },
 "properties": {
   "productID": "prod_123",
   "variantID": "var_456",
   "title": "Product Name",
   "price": 49.99,
   "currency": "USD",
   "imageUrl": "<https://yourstore.com/images/product.jpg>",
   "productUrl": "<https://yourstore.com/products/product-slug>"
 }
}



Synchronize e-commerce orders

Send completed purchase data from Webflow to Omnisend for order confirmation emails and post-purchase automation. Use POST /v5/events with event name "paid for order" to trigger order confirmation workflows (Omnisend's paid for order event documentation). The event payload should include order details such as orderID, orderDate, currency, orderSum, and product information.

Retrieve order data from Webflow's Orders API using GET /sites/{site_id}/orders, then map the response to Omnisend's event format by sending a POST /v5/events request with the order details transformed into Omnisend's event payload structure.

Set up Webflow webhooks to receive real-time notifications when orders are created or updated. Create webhooks through the API using POST /sites/{site_id}/webhooks with trigger types for e-commerce events. Your webhook endpoint receives the order data, transforms it, and forwards it to Omnisend with proper traffic management.

When implementing order synchronization, manage API traffic to prevent failures. Implement request queuing and exponential backoff in your middleware layer to handle API traffic. Monitor response headers actively to manage request volume. Batch contact updates when feasible, cache frequently accessed data, and prefer webhooks over polling to minimize API calls. Failed requests exceeding traffic limits will receive HTTP 429 (Too Many Requests) responses with reset timestamps indicating when processing can resume (Omnisend API documentation).

What you can build

Integrating Omnisend with Webflow through third-party automation platforms like Zapier or Make.com supports automated marketing campaigns that respond to visitor behavior and purchase activity.

• Automated welcome series for new subscribers: Capture email addresses through Webflow forms and automatically enroll subscribers in multi-step welcome campaigns with scheduled emails introducing your brand, showcasing key products, and delivering value proposition messaging
• Cart abandonment recovery campaigns: Track cart abandonment with custom JavaScript capturing when visitors add products but leave without checkout, then send cart data (product details, pricing, cart recovery URLs) to Omnisend through the Carts API to trigger automated email and SMS reminder sequences
• Browse abandonment workflows: Monitor which product pages visitors view without adding items to cart using custom event tracking through the Events API, then send targeted follow-up emails showcasing those specific products with reviews, specifications, and limited-time offers
• Post-purchase customer journeys: Sync completed orders from Webflow to Omnisend to trigger automated post-purchase sequences including order confirmations, shipping updates, delivery notifications, review requests, and personalized product recommendations based on purchase history