Developers

Embed widget reference

The complete attribute reference for the embed.js testimonial widget.

This is the full technical reference for the embed widget. For a guided introduction, start with Embedding overview.

Installation#

The widget is a single script plus a target element:

html
1<div data-testimonial-campaign="YOUR_CAMPAIGN_ID"></div>
2<script src="https://kudoso.io/embed.js" async></script>

On load, embed.js finds every element with a data-testimonial-campaign attribute, fetches that campaign's approved testimonials from the embed API, and renders a wall into the element. The script is safe to include once even when multiple walls appear on the page.

Two modes#

embed.js accepts two target attributes:

  • data-kudoso-widget="WIDGET_ID" renders a widget built and saved in the studio. Its type, style, and testimonial selection are resolved from the server, so the snippet never changes when you restyle.
  • data-testimonial-campaign="CAMPAIGN_ID" renders straight from a campaign, configured inline with the data- attributes below.
html
1<!-- Saved widget (configure in the studio) -->
2<div data-kudoso-widget="YOUR_WIDGET_ID"></div>
3

4<!-- Or configured inline -->
5<div data-testimonial-campaign="YOUR_CAMPAIGN_ID" data-type="grid" data-columns="3"></div>
6

7<script src="https://kudoso.io/embed.js" async></script>

Attribute reference#

All configuration is done with data- attributes on the target div.

AttributeDefaultDescription
data-kudoso-widget—ID of a saved widget; overrides the attributes below
data-testimonial-campaignrequired (inline mode)The campaign ID to load testimonials from
data-origincurrent originAPI origin, for self-hosted or custom-domain setups
data-themelightlight or dark
data-typederivedmasonry, grid, carousel, list, marquee, spotlight, quotes, bubbles, video-reel, popup, rating-badge, or avatar-group
data-layoutmasonryLegacy alias for the classic layouts: masonry, carousel, list
data-columns3Column count for the masonry layout
data-max50Maximum number of testimonials to display
data-accentcampaign brand colorAccent color, any CSS color
data-radius16Card corner radius in pixels
data-fontsystem font stackCSS font-family value
data-show-ratingtrueShow the star rating on cards
data-show-videotrueInclude video testimonials
data-show-datefalseShow the testimonial date
data-animationnoneCard entrance: none, fade, or marquee
data-autoplayoffCarousel auto-advance interval, in milliseconds
data-speed40Marquee scroll speed
data-directionleftMarquee direction: left or right
data-pause-hovertruePause the marquee on hover

Note

Boolean attributes are read as strings. data-show-date="true" turns the date on; data-show-rating="false" turns the rating off. Any other value falls back to the default.

A fully configured example#

html
1<div
2  data-testimonial-campaign="YOUR_CAMPAIGN_ID"
3  data-theme="dark"
4  data-layout="masonry"
5  data-columns="3"
6  data-accent="#10b981"
7  data-radius="20"
8  data-show-date="true"
9  data-max="24"
10></div>
11<script src="https://kudoso.io/embed.js" async></script>

Multiple walls on one page#

Add as many target div elements as you like, each with its own attributes. They can point at the same campaign or different campaigns. Include the <script> tag only once.

Security#

The widget renders only approved testimonials, and all customer-supplied content is HTML-escaped before it is inserted into the page, so testimonial text cannot inject markup into your site.

Next steps#