Skip to main content

Webflow Integration

Datsnip works with Webflow with no plugins or code exports required. You install the snippet once via Project Settings and run experiments from the Datsnip dashboard.

Installation​

  1. Open your Webflow project
  2. Go to Project Settings → Custom Code
  3. In the Head code section, paste the full snippet:
<!-- Anti-flicker -->
<style id="_gs_af">html{visibility:hidden;pointer-events:none}</style>
<noscript><style>#_gs_af{visibility:visible!important}</style></noscript>
<script>setTimeout(function(){var e=document.getElementById('_gs_af');if(e)e.remove()},3000)</script>

<!-- Datsnip -->
<script>
(function(w,d,k){
  w._sf = { siteId: k, ingestUrl: 'https://api.datsnip.com' };
  var s = d.createElement('script'); s.async = 1;
  s.src = 'https://api.datsnip.com/sdk/tracker.js';
  d.head.appendChild(s);
})(window, document, 'YOUR_SITE_ID');
</script>
  1. Click Save Changes and publish your site
Where to find your Site ID

Go to Datsnip dashboard → Settings → Snippet. Your Site ID is sf_....

A/B testing Webflow pages​

Text and style changes​

Use the Datsnip visual editor to change text, colors, fonts, and layout — the same as any other website. Webflow generates class names like .heading-2, .hero-section, .cta-button that work as CSS selectors.

Finding Webflow class names:

  1. Open DevTools on your published Webflow site
  2. Click any element → inspect → look for the class attribute
  3. Use that class in the visual editor's CSS selector

Testing complete redesigns​

Webflow's strength is building visually. If you've redesigned a page in Webflow, use redirect testing to test old vs new without merging:

  1. Publish both pages (e.g., /pricing and /pricing-v2)
  2. Create a Datsnip experiment on /pricing
  3. In the visual editor, open the Redirect tab
  4. Enter https://yoursite.webflow.io/pricing-v2

Full redirect testing guide →

Tracking Webflow form submissions​

To use a form submission as an experiment goal:

Option 1: Custom code on the page

Add to the page's Before </body> tag field in Page Settings:

<script>
  document.querySelector('.w-form').addEventListener('submit', function() {
    if (window.datsnip) {
      window.datsnip.track('form_submitted', { formId: 'contact' })
    }
  })
</script>

Option 2: Webflow form success redirect

Redirect form submissions to a /thank-you page, then use a Page visit goal in Datsnip targeting /thank-you.

Option 3: Zapier/Make webhook

If you're processing form data through automation, fire the Datsnip event server-side. (Requires passing the visitor ID through your form as a hidden field.)

Webflow CMS collections​

Datsnip experiments work on CMS-generated pages. Use a URL pattern like /blog/* to run an experiment across all blog posts, or /product/* for e-commerce item pages.

URL patterns support wildcards — /product/* matches every dynamic product page.

Webflow Ecommerce​

Track purchases from Webflow Ecommerce:

  1. Add this code to your Order Confirmation page's Before </body> tag field:
<script>
  // Webflow Ecommerce exposes order data on the confirmation page
  document.addEventListener('DOMContentLoaded', function() {
    var priceEl = document.querySelector('.order-total')
    var price = priceEl ? parseFloat(priceEl.textContent.replace(/[^0-9.]/g, '')) : 0
    if (window.datsnip) {
      window.datsnip.track('purchase', { revenue: price })
    }
  })
</script>
  1. Create an experiment goal: Custom event → purchase

Published vs staging domain​

Datsnip experiments target URLs. If your Webflow staging domain is yoursite.webflow.io and your custom domain is yoursite.com, create separate experiments for each (or use a wildcard URL pattern that matches both).

Most teams use Datsnip only on their published custom domain.