Testimonial Widget: Types, Placement and a Fast, Accessible Embed

Quick answer: A testimonial widget is a small embed that shows customer testimonials on your website. You paste one code snippet, and the widget loads the testimonials from your testimonial tool. Use a wall on a testimonials page, and a card or badge on pricing and checkout. Reserve space for it, caption every video, and make it work with a keyboard.

A testimonial widget saves you from copying quotes into your page by hand. You approve a testimonial once in your testimonial tool, and every page with the widget shows it. This guide covers the 4 widget types, where to place each one, and how to keep the widget fast and accessible. It ends with a step-by-step example that uses a one-line script embed.

What is a testimonial widget?

A testimonial widget is a block of customer praise that a third-party tool renders inside your page. You add it with an embed code, usually a <script> tag or an <iframe>. The tool stores the testimonials, so when you add or remove one, the widget changes on every page.

Most testimonial tools offer the same core layouts. Jotform's testimonials widget page, for example, lists carousel, slider, grid, list, masonry and badge layouts. The names change from tool to tool, but the layouts fall into 4 types.

The 4 types of testimonial widget

Each type answers a different question for the visitor. Pick the type for the page, not one type for the whole site.

Wall or grid

A wall shows many testimonials in a grid or masonry layout. It answers the question "Do many people use this?" Use it on a page that a visitor opens to read testimonials. For ideas on what to put on a wall, see our testimonial examples.

Carousel or slider

A testimonial carousel shows one item at a time and hides the rest. It saves space, but visitors see only the first slide unless they act. The World Wide Web Consortium (W3C) carousel tutorial notes that carousels are disputed for usability, because the content can be hard to find. If you use a testimonial slider, put your strongest testimonial first.

Single card

A single card shows one testimonial with a name, a photo or video, and a short quote. It is the most focused type. Put it next to the decision it supports, for example a card about onboarding beside the "Start trial" button.

Badge

A badge is the smallest type. It shows a mark such as a star rating or "Verified customer". A badge works near a buy button, where space is short. Link the badge to something a visitor can check, such as a full review or a verification page. Our guide to verified reviews explains why proof matters.

Key takeaway: Use a wall to show volume, a card to answer one objection, and a badge to show proof where space is short.

Where should you put testimonials on your website?

Put testimonials where a visitor decides: the pricing page, the checkout, and landing pages near the call to action. A testimonial far from the decision does less work than one next to it.

Use this placement plan:

1. Pricing page. Put a single card under each plan, or one card under the plan table. Choose a testimonial that talks about value or results.
2. Checkout. Put a badge or one short card near the pay button. Keep it small, so it does not pull attention from the form.
3. Landing pages. Put a card next to each call to action. Match the testimonial to the page topic, for example a coach's video on a coaching page.
4. Home page. Put a short wall or a carousel below the first screen.
5. Testimonials page. Put the full wall here, and link to it from the navigation or the footer.

Do not put an auto-playing video widget at the top of a page. It adds weight to the first load, and it can move content as it loads.

How do you keep a testimonial widget fast?

Keep a widget fast in 3 ways. Load the script with async, reserve its space before it loads, and lazy-load media below the first screen. The reserved space also keeps your Cumulative Layout Shift (CLS) score low.

Reserve space to stop layout shift

A widget that loads late can push the content below it down the page. This movement is a layout shift. Google's web.dev guide to optimizing CLS says embeds cause shifts because they often do not know their size before they load. The fix is to give the container a min-height in CSS, so the space is there before the widget arrives.

According to web.dev, a good CLS score is 0.1 or less, measured at the 75th percentile of page loads. Measure your page before and after you add the widget.

Lazy-load media below the first screen

The web.dev guide to browser-level image lazy loading says to use loading="lazy" only for images outside the first viewport. It also says to add width and height to every <img> tag. Most widgets load their own media, so check that your tool does not load every video at page load.

Load the script without blocking the page

Add the async attribute to the widget's <script> tag. According to MDN Web Docs, the browser then fetches the script in parallel with parsing the page. It runs the script as soon as the script is available.

Key takeaway: Reserve the space, lazy-load the media, and load the script with async.

How do you make a testimonial widget accessible?

Make a testimonial widget accessible with 3 rules: caption every video, make every control work with a keyboard, and let users stop any movement. These 3 rules come from the Web Content Accessibility Guidelines (WCAG) 2.2, and each one is Level A.

1. Captions for video. Success Criterion 1.2.2 requires captions for prerecorded audio in synchronized media.
2. Keyboard support. Success Criterion 2.1.1 requires that all functionality works through a keyboard. Test it: press Tab to reach each arrow and play button, then press Enter or Space.
3. Pause for movement. Success Criterion 2.2.2 requires a way to pause, stop or hide content that moves automatically for more than 5 seconds. An auto-rotating carousel needs a pause button.

Also give every image a useful alt text, such as the customer's name and role. Check the color contrast of the quote text against the card background.

Step by step: embed testimonials on your website with one script tag

This example uses a Proven Praise wall. The steps are the same for most tools that give you a script embed. Replace the IDs with the values from your own dashboard.

1. Approve your testimonials. In your testimonial tool, approve the testimonials that you want to show. In Proven Praise, you approve or reject each one before it goes public.
2. Make a wall. Go to Walls, make a wall, and add the approved testimonials.
3. Copy the embed code. Proven Praise gives one script tag for each embed type:

<script src="https://provenpraise.com/embed.js" data-wall="WALL_ID" async></script>

4. Add a container with reserved space. By default, the widget renders directly after the script tag. To render it in a set element, add data-target with a CSS selector. Give that element a min-height so the page does not shift:

<div id="testimonials" style="min-height: 480px"></div>
<script src="https://provenpraise.com/embed.js" data-wall="WALL_ID" data-target="#testimonials" async></script>

Set the min-height to the height of the widget on a phone. Measure it after the first load, and adjust the value.

5. Paste the code into your page. In a custom site, paste it into the page template. In WordPress, use a Custom HTML block. WordPress removes <script> tags for users without the unfiltered_html capability (for example, a Contributor), so an administrator must add the code. In other website builders, use the builder's own code or embed block.
6. Test the page. Load the page on a phone. Tab through the widget with a keyboard. Play each video with the sound off and check the captions. Run Lighthouse or PageSpeed Insights and check CLS.

For a single testimonial card, use data-testimonial="ID". For only the "Verified customer" badge, add data-mode="badge". The badge links to a public verification page that shows the payment date and an amount range, without the customer's email or exact amount.

The Proven Praise widget renders in a shadow root, so your website styles do not change it. Widget data updates within 5 minutes of a change. Each wall also has a hosted page, which you can link to from your navigation or emails.

Frequently asked questions

How do I add testimonials to my website without coding?

Use a testimonial tool that gives you an embed code, then paste the code into your website builder. In WordPress, an administrator pastes it into a Custom HTML block. Most other builders have a code or embed block. You paste one line, and the tool loads and updates the testimonials for you.

Is a testimonial carousel or a grid better?

A grid is usually the safer choice, because visitors see many testimonials without an action. A carousel saves space but hides every slide after the first. The W3C carousel tutorial notes that carousels are disputed for usability. If you use a carousel, put the strongest testimonial first and add a pause button.

Does a testimonial widget slow down my website?

A widget can slow a page if it loads every video at the start or pushes content down as it loads. Load the script with async, reserve space with min-height, and lazy-load media below the first screen. Then check your CLS score, which web.dev says should be 0.1 or less.

Where should I put testimonials on a pricing page?

Put one testimonial card directly under the plan table or under each plan. Choose a testimonial that talks about value, results, or the reason the customer chose to pay. Keep it short, so the visitor can read it in a few seconds and return to the plans.

Do testimonial videos on my website need captions?

Yes. WCAG 2.2 Success Criterion 1.2.2 (Level A) requires captions for prerecorded audio in synchronized media. Choose a tool that makes captions automatically and lets you correct them.

Can I show a testimonial widget on more than one page?

Yes. Paste the same embed code on each page. Because the testimonial tool stores the testimonials, a change in the tool updates every page. Use different widgets for different pages, for example a full wall on a testimonials page and a single card on the pricing page.

Conclusion

1. Choose the widget type by page: a wall for volume, a card for one objection, a badge for proof.
2. Put testimonials next to decisions: pricing, checkout and calls to action.
3. Reserve space with min-height, and load the script with async.
4. Caption every video, support the keyboard, and add a pause button to any moving carousel.
5. Test on a phone and check CLS after you publish.

To compare the tools that collect the videos first, read our guide to video testimonial software. To embed video testimonials with a "Verified customer" badge from your Stripe customers, start free with Proven Praise.