widgeti

Templates · Case studies

Before and After Metrics

Before and After Metrics is a widget in the Case studies group of the Widgeti library. A before-and-after metrics block for Lumen Ledger. The toggle highlights the sample numbers from after the rewrite.

Live preview

The sample copy is written for Lumen Ledger. That business is made up, so you can replace the name, the prices, and the photos with your own before you publish.

Before and After Metrics fits a homepage or a customer story page, after you swap the sample numbers for results you can publish.

People usually look for this one with words like tech, case-study, metrics, before-after, saas.

Use this template

A free account saves a copy into your library. This page does not save it, and it does not run Generate with AI.

How to embed Before and After Metrics

After you save, Widgeti gives you the snippet to paste. A hosted embed is optional. The copy you paste stays on your site even if you cancel. These are the usual places to paste it. Always check the live page, because some builders remove scripts.

  • WordPress. In the block editor, add a Custom HTML block and paste the snippet. Some security plugins, and some WordPress.com sites, remove script tags from that block. If the script is removed, the HTML and CSS can still stay, and a hosted embed from your Widgeti library is the other way to run it.
  • Shopify. In the theme editor, add a Custom liquid section on a normal page or in the theme, then paste the snippet. Do not put it in checkout. Shopify does not take custom scripts there, and some theme sections ignore a script tag. Preview the theme before you publish.
  • GoDaddy. In the GoDaddy website builder, add an HTML section and paste the snippet. Open the published page to see if it runs. The builder keeps HTML. Whether a script runs depends on the builder you are using, so the live page is the check.
  • Squarespace. Add a Code block and paste the snippet. Squarespace does not promise that JavaScript in a Code block will run. Putting code in the page header is limited to higher plans. If the script does not run, keep the HTML and CSS, or use a hosted embed.
  • Webflow. Add an Embed element and paste the snippet. Publish the site to see scripts. The designer canvas does not always run them.
  • Wix. Add an HTML embed (Embed code, or a custom embed) and paste the snippet into the code box. Wix shows that box in its own frame. Code in the page head is a separate setting and is not on every plan.

Related templates

  • Result Stat Card

    A case-study card for Northwind Analytics with a large sample result and tabs for signups, activation, and revenue.

  • Customer Story Carousel

    A three-story carousel of made-up Bramble Relay customers, with back, next, and dot controls.

  • Results Counter Strip

    A results strip that counts up sample totals for Paperkite Studio. The figures are placeholders.