Customizing the widget

The widget is meant to look like part of your site, not a third-party embed. Every visual choice is a data- attribute on the embed div.

Theme#

Use data-theme to switch between a light and a dark wall:

html
1<div data-testimonial-campaign="YOUR_CAMPAIGN_ID" data-theme="dark"></div>

Pick the theme that matches the section of your page the wall sits in. A dark wall on a dark homepage section looks intentional; a light one looks pasted on.

Accent color#

data-accent sets the highlight color, used for stars and small accents:

html
1<div data-testimonial-campaign="YOUR_CAMPAIGN_ID" data-accent="#0ea5e9"></div>

If you do not set one, the widget uses your campaign's brand color. Setting your real brand color, in the campaign settings or here, is the single biggest thing you can do to make the wall feel native.

Fonts and shape#

• data-font: a CSS font-family stack, so the wall uses your site's typeface.
• data-radius: corner radius in pixels for the cards.

html
1<div
2  data-testimonial-campaign="YOUR_CAMPAIGN_ID"
3  data-font="'Inter', sans-serif"
4  data-radius="20"
5></div>

What each card shows#

Control which details appear on a card:

html
1<div
2  data-testimonial-campaign="YOUR_CAMPAIGN_ID"
3  data-show-date="true"
4  data-max="12"
5></div>

Click to expand

Animation#

data-animation controls how cards enter: none, fade, or marquee. Keep it subtle. A gentle fade is welcoming; anything busier competes with your actual content.

Full reference#

Every attribute, with its default and accepted values, is listed in the Embed widget reference.

Next steps#

• The complete attribute table: Embed widget reference
• Embedding in React: The @kudoso/react package