Sign inStart free
WidgetsCarouselC·09

Before → After

The customer's before on one side, their after on the other, and an arrow doing the arguing — the shape of a case study, at the size of a testimonial.

yoursite.com — Before → AfterINTERACTIVE PREVIEW
<div class="retestimonial-widget" data-widget-key="before-after-carousel">Click any card to read the full testimonial behind the transformation.
Demo content — illustrative examples, not real customers

This interactive preview uses the same widget design and controls — go ahead, click around. Published embeds run in an isolated production runtime.

Why this style works

Built to convert, not just to decorate.

Contrast is the argument

A quote says the product is good. A before-and-after says what changed. Putting the two states side by side lets a visitor recognize their own “before” and see where it leads.

The number lands on the after

An optional metric chip sits on the after pane — the outcome and its proof in the same card, instead of a stat floating somewhere else on the page.

You write the pairs; AI can draft them

Each pair is yours to author and edit. On Premium and Business plans, AI reads your analyzed testimonials, pairs the pain a customer described with the outcome they reported, and offers the split for you to approve.

Honest by construction

A card only renders when it's linked to a testimonial that's still in the widget, and clicking it opens that customer's full words — so a paraphrased transformation always has the original behind it.

Where to put it

Placements that earn their pixels.

Landing pages for a switch

“Before: three tools and a spreadsheet. After: one workflow.” The migration story, told by the people who made it.

Case-study teasers

The transformation in two panes, with the full testimonial a click away — for readers who won't open a PDF.

Objection-heavy pricing pages

Pair the hesitation your prospects feel with the outcome a customer got after moving past it.

Live in three steps

From first testimonial to first embed.

01

Collect your testimonials

Gather text and video testimonials with collection forms, import them from CSV, or sync reviews straight from Google, G2, Capterra, Trustpilot, Product Hunt and social media.

02

Pick this style in the builder

Choose the style, then make it yours — colors, fonts, spacing, and per-element design controls, with a live preview of exactly what will ship.

03

Paste one script tag

Copy the embed snippet into any website — WordPress, Webflow, Shopify, Framer, Next.js, anything that renders HTML. Publish updates from the dashboard without touching your site again.

The whole integration

Paste once. Restyle forever from the dashboard.

<div class="retestimonial-widget" data-widget-key="before-after-carousel"></div>
<script src="https://cdn.retestimonial.com/embed.js" async></script>
Shadow DOM — zero CSS conflicts<11KB, loads asyncPublish changes without redeploysWorks on any platform

Your widget key is generated when you create the widget — start free and this snippet is yours (demo key shown: before-after-carousel).

Keep browsing

Other styles worth a look.

All widget styles →
Questions, answered

Everything else you'd ask.

Where does the before/after text come from?

You write it in the builder — a before line and an after line per card, each up to 280 characters, linked to the testimonial that backs it. On Premium and Business plans, AI can suggest splits from your analyzed testimonials, pairing a pain point with an outcome; you approve and can edit every pair before it ships.

What happens on narrow screens?

The two panes stack vertically and the arrow rotates to point downward. It reacts to the width of the embed itself, so the same widget behaves correctly in a narrow sidebar on a wide screen.

Is the metric chip required?

No. Leave the metric fields empty and the card is a clean two-pane transformation; you can also switch the chip off for the whole widget.

What if I remove the linked testimonial?

The card stops rendering rather than showing an unbacked claim, and the builder flags the orphaned pair so you can re-link it — your authored text is kept.

Is Before → After free?

Yes — it's a Carousel-family widget, included on the free plan with ReTestimonial branding. AI-suggested splits are a Premium feature; the style itself isn't gated.

C·09 · Before → After

Put this widget on your site today.

Free plan, no card, no code. Collect your first testimonial and this exact widget can be live within the hour.