Quickstart: embed in plain HTML

Log in and open the Share page. It shows your wall address and a ready-made embed snippet with your slug filled in. The slug is a random 12-character id, so walls are not guessable.

Put this anywhere in your page body, wherever the testimonials should appear:

<script src="https://laudiance.com/widget.js" async></script>
<div data-laudiance-wall="your-wall-slug" data-layout="grid"></div>

The script finds every element with a data-laudiance-wall attribute and renders your published testimonials into it. That is the whole integration.

All attributes with their defaults:

<script src="https://laudiance.com/widget.js" async></script>
<div
  data-laudiance-wall="your-wall-slug"
  data-layout="carousel"
  data-style="cards"
  data-theme="auto"
  data-lang="auto"
  data-max="12"
  data-accent="#0f766e"
  data-radius="lg"
  data-font="inherit"
  data-tags="agency, gdpr"
  data-min-rating="4"
  data-media="text"
></div>

One wall can feed several pages. Tag your testimonials in the inbox once, then filter each embed with data-tags, data-min-rating and data-media. Nothing is duplicated: it is the same approved set, sliced.

<!-- Agency landing page: agency work, 4 stars and up -->
<div data-laudiance-wall="your-wall-slug" data-tags="agency" data-min-rating="4"></div>

<!-- Clinic page: clinic work only, as a carousel -->
<div data-laudiance-wall="your-wall-slug" data-tags="clinic" data-layout="carousel"></div>

<!-- Homepage: the video testimonials, on a marquee -->
<div data-laudiance-wall="your-wall-slug" data-media="video" data-layout="marquee"></div>

Filters can only narrow what is already published, never widen it, so a filtered embed can never show something you have not approved. Combine them freely: they all have to match. A value the widget does not recognize is ignored rather than treated as an error, so a typo shows the usual wall instead of breaking the page. The Share page in the app has a picker for all of this, with your own tags listed and a live preview.

The data attributes cover the common cases. For full control, the widget also reads a small set of --laudiance-* CSS custom properties from your page. Custom properties are the one thing that deliberately crosses the Shadow DOM boundary, so you can restyle the widget from your own stylesheet while your other CSS still cannot touch its internals:

/* Your page's stylesheet. The widget reads these from the
   embed div (or any ancestor); everything else stays isolated. */
[data-laudiance-wall] {
  --laudiance-accent: #0f766e;
  --laudiance-card: #fffdf7;
  --laudiance-text: #1c1917;
  --laudiance-muted: #78716c;
  --laudiance-border: #e7e5e4;
  --laudiance-star: #d97706;
  --laudiance-radius: 18px;
  --laudiance-font: "Your Brand Font", Georgia, serif;
}

Every variable is optional and applies to both light and dark theme (scope them under your own media queries if you want different values per scheme). Precedence for the accent: data-accent beats --laudiance-accent, which beats your workspace brand color.

• Renders inside Shadow DOM, so your page CSS never breaks the widget and widget styles never leak into your page.
• Sets zero cookies and writes nothing to localStorage or sessionStorage.
• Loads no external font, no analytics tag and no third-party script. It makes one call to the Laudiance API for your published testimonials.
• Fetches photos and videos from https://hzlepyevaqinrybhlnjv.supabase.co, our storage host, through signed links that expire within an hour. That is a second origin and the only one besides ours: a visitor shown a photo or a video connects to it, and it sees their IP address and user agent like any other request. It is our own bucket in Frankfurt, it sets no cookie, and the link identifies the file rather than the visitor.
• If it cannot load data, it renders nothing instead of an error box. Your page is never broken by it.
• Only approved and published testimonials are ever returned by the API.

Four directives cover the widget, with the real hosts for this deployment filled in. Merge them into your own policy rather than pasting it whole.

script-src  https://laudiance.com;
connect-src https://laudiance.com;
img-src     https://hzlepyevaqinrybhlnjv.supabase.co;
media-src   https://hzlepyevaqinrybhlnjv.supabase.co;

media-src is only needed if you publish video testimonials. Nothing here is required to make the widget work, and we do not set a policy on your behalf.

A static reference page with every layout and deliberately hostile page CSS is at /examples/plain.html. Open it with the browser console visible: no errors, no warnings.