Skip to main content

A/B Testing Webflow Sites: No-Code Experiments Without Exporting

· 4 min read

Webflow is the most popular no-code website builder for marketing teams, but Webflow doesn't have A/B testing built in. Testing button colors, hero headlines, or completely different layouts requires a third-party tool.

The good news: GhostSnip works with Webflow without any code exports, API integrations, or changes to your Webflow project structure. One snippet in Project Settings is all you need.

Why Testing Webflow Sites Is Tricky​

Most A/B testing tools work by modifying the DOM with JavaScript. On Webflow, this creates two challenges:

  1. Class naming: Webflow generates CSS classes from your custom class names. They're readable (.hero-button, .pricing-card) but you need to know where to look for them.

  2. CMS-generated content: Dynamic content from Webflow Collections has dynamically-generated IDs. Use class-based selectors, not IDs.

GhostSnip's visual editor solves both by letting you point-and-click on elements in your live Webflow site — it finds the right class automatically.

Step 1 — Install the Snippet​

  1. Open your Webflow project → Project Settings → Custom Code
  2. Paste in the Head code section:
<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>
<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. Save + Publish your Webflow site

Your Site ID is in GhostSnip Dashboard → Settings → Snippet.

Step 2 — Create an Experiment​

  1. In the GhostSnip dashboard, go to Experiments → New experiment
  2. Enter a name and your Webflow URL (e.g., https://yoursite.webflow.io/pricing)
  3. Click Open visual editor

The visual editor loads your live Webflow site. Click any element to select it.

The 5 Best Tests to Run on Webflow Sites​

1. Hero CTA — Text and Color​

The single most impactful test on any Webflow marketing site.

How to set it up:

  • Open visual editor → click your CTA button
  • The selector will be something like .hero-button or .w-button.primary-cta
  • Test: "Start free trial" vs "Try for free" vs "Get started free"
  • Also test: button background color

Expected lift: 8–20% in click rate

2. Headline Messaging​

Test different value proposition framing.

Example variants:

  • Feature-focused: "The A/B testing platform that ships with anti-flicker and Bayesian stats built in"
  • Benefit-focused: "Run better A/B experiments. Ship changes that move the needle."
  • Social proof: "Join 2,400 teams already running smarter A/B tests"

Expected lift: 10–25% in scroll depth / engagement

3. Pricing Page — Plan Highlighting​

If you have a Webflow pricing page with multiple plan cards:

  • Test which plan is visually highlighted ("Most Popular" badge)
  • Test the CTA text on each plan card
  • Test showing annual vs monthly by default

Expected lift: 10–30% in trial start rate

4. Navigation CTA​

Your navbar's CTA is shown on every page — it's the highest-volume A/B test opportunity you have.

Test:

  • "Get started" vs "Start free trial" vs "Try for free"
  • Button vs link styling in the nav
  • Adding or removing the nav CTA entirely (if you have a prominent hero CTA)

Expected lift: 5–15% in trial starts from nav clicks

5. Entire Page Redesign (Redirect Test)​

For major redesigns — new layout, new Webflow template, new sections:

  1. Build the new design as a separate Webflow page (e.g., /pricing-v2)
  2. Publish it
  3. In GhostSnip's visual editor, use the Redirect tab
  4. Redirect 50% of /pricing visitors to /pricing-v2

This lets you test completely different Webflow designs without merging or deploying.

Split URL testing guide →

Tracking Webflow Form Submissions​

Add this to your form's page in Page Settings → Before </body> tag:

<script>
  var form = document.querySelector('.w-form form')
  if (form) {
    form.addEventListener('submit', function() {
      if (window.ghostsnip) {
        window.ghostsnip.track('form_submitted')
      }
    })
  }
</script>

Use form_submitted as your experiment goal type (Custom event).

Common Webflow CSS Selectors Reference​

ElementWebflow Class
All Webflow buttons.w-button
Navigation links.w-nav-link
Form submit button.w-button[type="submit"]
Rich text blocks.w-richtext
Any custom class "hero-cta".hero-cta
Webflow CMS collection items.w-dyn-item

When using the visual editor, you don't need to know these — just click the element and GhostSnip finds the selector. These are useful if you're writing manual experiments via the API.

Does GhostSnip Work With Webflow CMS?​

Yes. Experiments target URL patterns. Use /blog/* to run an experiment on all Collection page templates. The same visual editor changes apply to every CMS item matching that URL pattern.

Note: If your CMS collection generates different DOM structures for different items (e.g., items with vs without featured images), test selectors that exist on every item.

Start your first Webflow experiment →