webdevpuneet.com

Related Snippets

147 in Cards category
36–41 of 60

A/B Test Results Card

Delivery ETA Card

Offer Letter Preview Card

Certificate of Completion Preview

Rental Car Comparison Cards

Restaurant Menu Item Customizer

A/B Test Results Card — Free Split-Test Comparison Snippet

A/B Test Results Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsCSS Grid

Copy & paste

Source Code

<div class="ab-card">
  <div class="ab-head">
    <div>
      <span class="ab-eyebrow">Experiment</span>
      <h2>Checkout CTA Copy</h2>
    </div>
    <span class="ab-status" id="abStatus">95% confidence</span>
  </div>

  <div class="ab-variants">
    <div class="ab-variant" id="abVariantA">
      <div class="ab-vhead">
        <span class="ab-vname">Variant A</span>
        <span class="ab-vtag">Control</span>
      </div>
      <div class="ab-rate">4.8<span>%</span></div>
      <div class="ab-meta">1,214 / 25,300 visitors</div>
      <div class="ab-bar-track"><div class="ab-bar" id="abBarA"></div></div>
    </div>

    <div class="ab-variant ab-winner" id="abVariantB">
      <div class="ab-vhead">
        <span class="ab-vname">Variant B</span>
        <span class="ab-vtag ab-vtag-win">Winner</span>
      </div>
      <div class="ab-rate">6.3<span>%</span></div>
      <div class="ab-meta">1,596 / 25,320 visitors</div>
      <div class="ab-bar-track"><div class="ab-bar ab-bar-win" id="abBarB"></div></div>
    </div>
  </div>

  <div class="ab-footer">
    <div class="ab-uplift" id="abUplift">+31.3% relative uplift</div>
    <div class="ab-verdict" id="abVerdict">Variant B wins with 95% statistical confidence</div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real z-test
Confidence is computed from conversion counts, not fixed.
Two-variant layout
Side-by-side control vs. treatment comparison.
Visual comparison bars
Scaled relative to the higher conversion rate.
Winner highlighting
Winning variant gets a distinct border and tag.
Relative uplift
Computed percentage difference, not eyeballed.
Honest non-significance state
Won't declare a winner below the confidence bar.
Sample size shown
Conversions over visitors for transparency.
Zero dependencies
Pure DOM and math, no chart library.

About this UI Snippet

A/B Test Results Card — Variant Comparison With a Real Confidence Calculation

Screenshot of the A/B Test Results Card snippet rendered live

The A/B test results card is the summary widget every experimentation dashboard needs: it puts two variants side by side, shows their conversion rates and sample sizes, and declares a statistical winner. This snippet builds one in plain HTML, CSS, and JavaScript, with the confidence badge computed from a real two-proportion z-test instead of a fixed label.

A real statistical test, not a hardcoded badge

The zTestConfidence(a, b) function runs a standard two-proportion z-test against the actual conversion counts and visitor totals for each variant: it pools the conversion rate, computes the standard error, derives a z-score, and approximates a confidence percentage from it with a lightweight logistic approximation of the normal CDF. Change the input numbers and the confidence badge, uplift figure, and verdict text all recompute — nothing is a hardcoded "95%" string.

Visual comparison bars

Below each variant's headline rate, a horizontal bar scales relative to the higher of the two rates, giving an at-a-glance read of the gap before anyone reads the numbers. The winning variant's bar uses a green gradient to reinforce the declared winner.

Clear winner state

The winning variant card gets a highlighted border and a "Winner" tag, and the footer prints both the relative uplift percentage and a verdict sentence — but only declares a winner once confidence clears the 95% threshold computed from the test. Below that threshold, the card honestly reports the result isn't significant yet rather than forcing a call.

Customizing it

Swap in your real experiment's conversion and visitor counts, adjust the significance threshold, add a third variant, or wire the verdict text to your experimentation platform's API. Pair it with a funnel chart to show where in the funnel the lift occurred, or a stat comparison card for a simpler two-number comparison.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe card renders with both variants and a confidence badge.
  2. 2
    Check the confidence badgeIt's computed live from the conversion counts via a z-test.
  3. 3
    Read the verdictA winner is declared only above the significance threshold.
  4. 4
    Swap in real dataEdit the data object with your experiment's actual numbers.
  5. 5
    Adjust the thresholdChange the 95 check in the JS to your team's bar for significance.

Real-world uses

Common Use Cases

Growth experiment reports
Report CTA, pricing or copy test results, with confidence computed by a genuine z-test from conversion counts and sample sizes.
Product dashboard summaries
Summarise an experiment inside an internal tool, comparing control and treatment side by side with bars scaled to the higher rate.
Stakeholder updates
Share a clear winner with non-technical readers, highlighting the winning variant with a distinct border and tag.
Onboarding flow tests
Compare signup flow variants for conversion, with sample size shown so small tests are not over-interpreted.
Email and pricing page tests
Show subject line or call-to-action results from an email campaign, or compare the conversion impact of two pricing layouts.
Related: EV Charging Status Card
See the EV Charging Status Card for a related cards pattern worth pairing with this one.
Related: Insurance Claim Status Card
See the Insurance Claim Status Card for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Yes. zTestConfidence() runs a two-proportion z-test using the pooled conversion rate and standard error from the actual visitor and conversion counts for both variants, then approximates a confidence percentage from the resulting z-score. It is not a hardcoded "95%" label — change the input numbers and it recomputes.

Only when the computed confidence is at or above 95%. Below that, the verdict text says the result isn't yet statistically significant, so the card won't mislead viewers into acting on a test that hasn't reached significance.

It uses a logistic approximation of the normal CDF, which is accurate enough for a UI badge but not a substitute for a dedicated statistics library in a production experimentation platform. For rigorous analysis, compute significance server-side with a proper stats package and pass the result into the card.

Edit the data.a and data.b objects (visitors and conversions) at the top of the JS. Every derived value — rates, bar widths, uplift, confidence, and the verdict — recomputes from those two objects.

Move data into component state or props, keep zTestConfidence() and rate() as pure helper functions, and drive the bar widths and verdict text from computed values in your template instead of direct DOM writes.