Widgets & Embedding
Untitled
title: Widget types description: Every testimonial widget Kudoso offers: masonry, grid, carousel, marquee, spotlight, quotes, bubbles, video reel, badges, and more. order: 3#
Kudoso has a widget for every slot on your site, from a full Wall of Love to a tiny rating badge. Pick a type in the studio, or set it directly with the embed data-type attribute.
The full set#
Masonry
Multi-column grid where cards pack tightly regardless of height, like Pinterest. The classic Wall of Love. data-type="masonry", column count via data-columns.
Grid
Uniform, equal-size cards in a responsive grid. Cleaner and more orderly than masonry. data-type="grid".
Carousel
One row of cards the visitor pages through, with optional autoplay. Great for a tight slot. data-type="carousel".
Marquee
Cards scroll continuously in a horizontal band. Eye-catching across a homepage. data-type="marquee", speed and direction configurable.
List
A single vertical column. Good for a narrow sidebar or long-form page. data-type="list".
Spotlight
One large featured testimonial with an oversized quote mark; auto-rotates through several. data-type="spotlight".
Hero quotes
Large, card-less editorial quotes in a two-up grid. Bold and magazine-like. data-type="quotes".
Chat bubbles
Testimonials styled as chat speech bubbles with the avatar alongside. Friendly and conversational. data-type="bubbles".
Video reel
A horizontal, stories-style row of vertical video testimonials. data-type="video-reel".
Floating popup
A small card that floats in a corner of the page and rotates through testimonials. data-type="popup".
Rating badge
A compact pill: average score, stars, review count, and a small avatar stack. data-type="rating-badge".
Avatar group
Overlapping customer faces with a "Loved by N customers" line. High-trust social proof. data-type="avatar-group".
Setting the type#
The simplest path is the studio: pick a type, style it, and copy the saved-widget snippet. If you prefer to configure inline, set data-type (and data-layout for the classic layouts) on the embed div:
html1<div data-testimonial-campaign="YOUR_CAMPAIGN_ID" data-type="grid" data-columns="3"></div>2<script src="https://kudoso.io/embed.js" async></script>
Type-specific options#
| Attribute | Types | Purpose |
|---|---|---|
data-columns | masonry | Number of columns, for example 3 |
data-autoplay | carousel | Auto-advance interval in milliseconds |
data-speed | marquee | Scroll speed (higher is faster) |
data-direction | marquee | left or right |
data-pause-hover | marquee | Pause scrolling on hover, on by default |
Tip
Want several types on one page, arranged how you like? Build a Wall of Love, which stacks multiple blocks into a single embeddable layout.
Next steps#
- Theme colors, fonts, and what each card shows: Customization
- Build visually: The widget studio
- The full attribute reference: Embed widget reference