Omnisend

How to integrate Omnisend with Webflow

Omnisend serves over 150,000 online stores and provides pre-built e-commerce workflows, product recommendation capabilities, and behavioral segmentation tools designed specifically for retail rather than general business communication.

Omnisend doesn't offer a native Webflow integration, so you'll connect through embedded tracking code, third-party automation platforms, or direct API calls.

Let’s take a look at the methods:

Embed tracking code and forms

Install Omnisend's JavaScript tracking snippet in your Webflow site footer to enable visitor behavior tracking, form functionality, and contact identification. This code is required 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:

<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 captures visitor data site-wide and enables popup forms, embedded signups, and behavioral automation triggers.

Add inline signup forms

Inline forms embed directly into your Webflow pages as part of normal page content.

1. Navigate to Forms > Create Form > Embedded forms in Omnisend
2. Customize using the drag-and-drop Form Builder
3. Save and publish to generate embed code
4. In Webflow, drag a Code Embed element to your page
5. Paste the Omnisend code and publish

Requirements: Webflow Core, Growth, Agency, or Freelancer Workspace plan, or active Site plan. Character limit: 50,000 per code block.

Display popup and flyout forms

Create popups in Forms > Create form > Style > Popup. Configure display triggers (time on page, scroll depth, exit intent) in Omnisend.

For custom triggering, set form display to Custom Trigger in Behavior Settings. Copy the generated code and insert it in a Webflow Code Embed element.

Connect through automation platforms

Zapier: Pre-built workflows with triggers (New Form Submission, New Order, Updated Order). Omnisend functions as action app only. Best for non-technical users.

Make.com: Native modules with same triggers/actions as Zapier. More control for complex workflows with conditional logic. Best for technical users.

viaSocket: Lower pricing with pre-built templates. Best for budget-conscious projects.

Build with Webflow and Omnisend APIs

Direct API integration provides control for high-traffic sites requiring traffic management, server-side tracking, or custom business logic. Omnisend API uses API key authentication; Webflow API requires OAuth 2.0 tokens.

Sync contacts from form submissions

Use POST /v3/contacts to create contacts; PATCH /v3/contacts/{contactID} for updates. Retrieve form data via Webflow Forms API using GET /forms/{formid}/submissions (requires forms:read scope).

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]
};

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)
});

Use PATCH (not PUT) for updates to preserve existing Omnisend data.

Track abandoned carts and browse abandonment

POST cart data to /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"
  }]
}

For product view tracking, use POST /v3/events with "viewed product" event:

{
  "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

Use POST /v5/events with "paid for order" event. Retrieve order data via Webflow Orders API using GET /sites/{siteid}/orders.

Set up webhooks using POST /sites/{siteid}/webhooks for real-time order notifications. Implement request queuing and exponential backoff for traffic management.

What you can build

Integrating Omnisend with Webflow lets you build automated email and SMS marketing workflows triggered by site activity and purchase behavior.

• Automated welcome series: Enroll new subscribers in multi-step campaigns via Webflow forms
• Cart abandonment recovery: Custom JavaScript captures cart data; trigger email/SMS sequences with recovery links
• Browse abandonment workflows: Track product views; send targeted follow-ups with product details
• Post-purchase journeys: Sync orders for confirmations, shipping updates, review requests, and recommendations