Widgets and embeds

Wall of Love, carousel, single card and the Trust Badge.

Wall of Love, the classic masonry grid of your best testimonials
Carousel, a scrolling row, great under a hero section
Single testimonial, one featured quote, big and bold
Trust Badge, your verified score with stars (requires company verification)

Embedding

Every widget gives you one line of code:

<script src="https://app.trustfuel.ai/widget.js" data-trustfuel-widget="YOUR_ID" async></script>

It works on WordPress, Webflow, Framer, Shopify and any custom site. The widget renders in an isolated frame, auto-resizes, lazy-loads, and never slows your page down.

Embedding one specific testimonial

Every published testimonial has its own embed code (on the testimonial’s detail page):

<script src="https://app.trustfuel.ai/widget.js" data-trustfuel-testimonial="TESTIMONIAL_ID" async></script>

Perfect for placing a single strong quote next to a pricing table or inside a case study. Add data-theme="dark" or data-theme="auto" to match your site.

Custom CSS

Every widget has a Custom CSS field in its editor. Your CSS applies only inside that one embed, so each embed code can look completely different. These are the classes you can target:

Class	What it styles
`.tf-card`	The card container (background, border, radius, shadow)
`.tf-testi`	The testimonial card itself
`.tf-testi-quote`	The quote text
`.tf-testi-author`	The author row at the bottom of a card
`.tf-testi-name`	Author name (the small line below it is a `small` tag inside)
`.tf-testi-avatar`	The round avatar image
`.tf-testi-media`	Video/screenshot area of a card
`.tf-stars`	The star rating row (`color` changes the star color)
`.tf-star--empty`	Unfilled stars
`.tf-badge`	The Trust Badge container
`.tf-badge-score`	The big score number in the badge
`.tf-wall`	The masonry grid (`columns` controls column count)

You can also override the design tokens for the whole embed, for example:

:root {
  --tf-primary: #e11d48;   /* accent color */
  --tf-radius: 12px;       /* card corner radius */
  --tf-font: Georgia, serif;
}
.tf-testi-quote { font-size: 18px; font-style: italic; }

Pro plans can additionally set a global accent color under Settings → Branding that applies to all embeds and forms at once.

Picking exactly which testimonials show

In the widget editor, switch Which testimonials? from Automatic to Hand-picked and click testimonials to select them. The number on each selection is its display order. Automatic mode instead uses filters: max count, tag and featured-only.

Configuration