On-site Widgets

Beyond the Wall of Love, ShowTrust can add three small things to every page of your site: a Leave a testimonial button, a social-proof popup, and a rating badge. They all come from one script tag and are switched on in On-site Widgets in the dashboard.

Install the script#

Copy the tag from On-site Widgets and add it to every page — usually your site's layout or <head>. It loads after your page and never blocks rendering. You only do this once; settings changes apply within five minutes.

<script src="https://app.showtrust.to/showtrust.js" data-project="YOUR_PROJECT_ID" async></script>

It works alongside the Wall of Love embed; you can use either or both.

1

2

3

Leave a testimonial button#

Turn on Show floating button to add a button in the corner of your site. It opens your testimonial form in a pop-up, so customers never leave your page — text, video recording, photo upload and your thank-you reward all work inside it. Set the label, corner and colors in the dashboard.

To use your own button or link instead (for example in your footer, or after checkout), add data-showtrust-collect to any element:

<a href="#" data-showtrust-collect>Leave us a review</a>

1

1

2

Or open it from your own code with window.ShowTrust.openCollect().

Social-proof popup#

Turn on Show popup and small cards with your approved testimonials slide in at the bottom corner, one at a time. You choose when the first one appears, how long each stays, the gap between them, how many a visitor sees per visit, and a minimum star rating. Visitors can dismiss them for the rest of their visit, and they pause while hovered. Clicking one opens your hosted Wall of Love. Only testimonials under 280 characters are used, so cards stay short.

1

2

Rating badge#

Put this where you want a compact “★ 4.9 · 128 testimonials” badge — next to a pricing table, in a header, or at checkout. It links to your hosted Wall of Love.

<div data-showtrust-badge></div>

<!-- on dark backgrounds -->
<div data-showtrust-badge data-theme="dark"></div>

1

Single-page apps#

In apps that change pages without a full reload (Next.js, React Router, Vue Router…), load the script once in your root layout. The floating button and popups stay put across route changes, and data-showtrust-collect links work wherever they are rendered. Badges are drawn once, when the script loads — after a route change adds a new data-showtrust-badge element, call window.ShowTrust.refreshBadges():

useEffect(() => {
  (window as any).ShowTrust?.refreshBadges?.();
}, []);

return <div data-showtrust-badge />;

JavaScript API#

Once the script has loaded, window.ShowTrust has these methods:

• window.ShowTrust.openCollect() — opens your testimonial form in a pop-up, the same as clicking a data-showtrust-collect element. Does nothing until the script has fetched your settings (a fraction of a second after load), or if your project has no testimonial page yet.
• window.ShowTrust.closeCollect() — closes that pop-up and returns focus to where it was. Visitors can also press Esc, click outside it, or use its close button.
• window.ShowTrust.refreshBadges() — renders any data-showtrust-badge elements added since the script loaded. Badges it has already drawn are left alone, so it's safe to call after every route change.

The Wall of Love embed has its own JavaScript API.

Content Security Policy#

With a Content-Security-Policy header, allow script-src https://app.showtrust.to, connect-src https://api.showtrust.to, style-src 'unsafe-inline', img-src https: (popup avatars) and frame-src https://showtrust.to (the testimonial form pop-up). The full list, with the Wall of Love, is in Wall of Love → Content Security Policy.

Analytics#

Analytics counts popup clicks and how often the form is opened from your site, alongside video plays on your wall.