Webflow

Add elNudge to your Webflow site via Project Settings custom code — covers e-commerce cart events and quiet zones for CMS pages.

elNudge integrates with Webflow by injecting the SDK snippet into your project's custom code. Cart and purchase events are fired via JavaScript — Webflow does not support server-side hooks, so all event tracking is JS-only.

1. Add the script to Project Settings

In the Webflow Designer, open Project Settings (the gear icon, top-left of the Designer or accessible from the Dashboard).
Go to the Custom Code tab.

In the Head Code section, paste the elNudge loader snippet:

<script>
  (function(w,d,s,k){
    w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
    var t=d.createElement(s);t.async=1;
    t.src='https://cdn.elnudge.com/v1/sdk.js';
    t.setAttribute('data-site-key',k);
    d.head.appendChild(t);
  })(window,document,'script','sk_live_YOUR_SITE_KEY');
</script>

Click Save Changes.
Publish your site — custom code changes only take effect after publishing.

Replace sk_live_YOUR_SITE_KEY with your key from app.elnudge.com → your site → Install.

The snippet goes in Project Settings → Custom Code → Head Code (not per-page), so it applies to all pages automatically.

2. Fire CART_ADD for Webflow E-commerce

Webflow E-commerce does not expose cart lifecycle hooks in the way that Shopify or WooCommerce do. You have two options for tracking add-to-cart:

Option A — Custom JS embed on the product page

In the Webflow Designer, open your product template page. Add an Embed element (from the Add panel → HTML Embed) inside or near the Add to Cart button. Paste the following:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var addBtn = document.querySelector('.w-commerce-commerceaddtocartbutton');
    if (!addBtn) return;

    addBtn.addEventListener('click', function () {
      var productName = document.querySelector('.w-commerce-commerceproductname')
                          ? document.querySelector('.w-commerce-commerceproductname').textContent.trim()
                          : document.title;

      var priceEl = document.querySelector('.w-commerce-commerceproductprice');
      var price   = priceEl ? priceEl.textContent.replace(/[^0-9.]/g, '') : '0';

      if (window.__eln) {
        window.__eln('track', 'CART_ADD', {
          product_id:   window.location.pathname, // Webflow doesn't expose a numeric product ID in the DOM
          product_name: productName,
          variant:      '',
          price:        price,
          currency:     'USD', // replace with your store's currency
          quantity:     1,
        });
      }
    });
  });
</script>

Webflow's add-to-cart button has the class w-commerce-commerceaddtocartbutton. Adjust the selectors if your theme overrides these class names.

Option B — Webflow IX2 Interaction trigger

If you use Webflow Interactions (IX2) for the add-to-cart flow, you can attach a custom script that fires after the interaction completes. Add a Page Embed (not inside the interaction) with the same listener code as above.

Note: Webflow does not provide server-side cart hooks or a JavaScript cart API. All event detection is based on DOM observation or button click listeners. If the visitor adds to cart without triggering the click (e.g., via keyboard), the event may not fire.

3. Fire the PURCHASE event on the order confirmation page

In Webflow E-commerce, the order confirmation page is the /order-confirmation system page. You can add code specifically to this page:

In the Webflow Designer, navigate to Pages → E-commerce Pages → Order Confirmation.
In the page settings (the gear icon next to the page name), scroll to Custom Code → Before </body> tag.

Paste:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Webflow's order confirmation page populates these elements
    var orderTotal = document.querySelector('.w-commerce-commerceorderconfirmationcontainerordervalue');
    var itemCount  = document.querySelectorAll('.w-commerce-commerceorderitem').length;
    var value      = orderTotal ? orderTotal.textContent.replace(/[^0-9.]/g, '') : '0';

    if (window.__eln) {
      window.__eln('track', 'PURCHASE', {
        order_value: value,
        currency:    'USD', // replace with your store's currency
        item_count:  itemCount,
      });
    }
  });
</script>

Adjust 'USD' to your store's actual currency code. Webflow does not inject currency data into the DOM by default; you may need to hard-code it or derive it from your Webflow project settings.

Quiet zones for CMS collection pages

If you publish editorial content (blog posts, case studies, lookbooks) on CMS collection pages and do not want nudges firing there, use the data-quiet-zones attribute:

<script>
  (function(w,d,s,k){
    w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
    var t=d.createElement(s);t.async=1;
    t.src='https://cdn.elnudge.com/v1/sdk.js';
    t.setAttribute('data-site-key',k);
    t.setAttribute('data-quiet-zones','/blog,/blog/*,/articles,/articles/*,/privacy,/terms');
    d.head.appendChild(t);
  })(window,document,'script','sk_live_YOUR_SITE_KEY');
</script>

The patterns use simple prefix and wildcard matching (* matches any suffix). This is the same snippet you paste into Project Settings → Custom Code → Head Code.

You can also manage quiet zones from app.elnudge.com → your site → Engagement Rules → Quiet Zones, which overrides the attribute if both are set.

SPA and page transitions

Webflow uses standard HTML navigation by default. If you have enabled Webflow Page Transitions, the SDK's auto-detection of pushState/replaceState handles route changes correctly — no extra code is required.

Verify the install

Publish your site and open it in a browser with the console visible.

Run:

typeof window.__eln === 'function' // should return true

If you wired up CART_ADD, click the add-to-cart button on a product page and verify the event fires (add data-debug="true" to the script tag temporarily).
Complete a test order and verify the PURCHASE event appears on the order confirmation page.
Visit a page on your quiet zone list and confirm no nudges appear.
Check app.elnudge.com → your site → Live — your session should appear within seconds.