Vite + React

A Vite React app has one index.html for every route, so the widget script doesn't go there. Instead, a small WallOfLove component loads the script and renders the container, and you use it only where the wall should appear.

Install#

No package install needed. Replace YOUR_PROJECT_ID with the value from /v1/projects.

Add the component#

Create src/WallOfLove.tsx. It sets the config, adds the script the first time it renders, and on later visits asks the already-loaded script to render with window.ShowTrustWall.mount():

import { useEffect } from 'react';

const SRC = 'https://app.showtrust.to/showtrustto-widget.js';

export function WallOfLove() {
  useEffect(() => {
    const w = window as any;
    w.SHOWTRUSTTO_WIDGET_CONFIG = { projectId: 'YOUR_PROJECT_ID' };
    if (w.ShowTrustWall) {
      w.ShowTrustWall.mount(); // script already loaded on an earlier page
    } else if (!document.querySelector(`script[src="${SRC}"]`)) {
      const s = document.createElement('script');
      s.src = SRC;
      s.async = true;
      document.head.appendChild(s);
    }
  }, []);

  return <div id="showtrustto-widget"><a slot="st-credit" href="https://showtrust.to/?ref=widget">Wall of love by ShowTrust</a></div>;
}

Don't add the script to index.html: it would run on every route, and on a route without the container it adds the wall to the end of the page. With React Router (or any client-side router), the wall renders when a visitor navigates to the route that uses the component and goes away when they leave. See Single-page apps for details.

Add the container#

The component renders the container <div> for you. Put <WallOfLove /> exactly where the wall should appear:

import { WallOfLove } from './WallOfLove';

export function TestimonialsPage() {
  return (
    <main>
      <h1>What our customers say</h1>
      <WallOfLove />
    </main>
  );
}

The container inside the component is the same one the dashboard gives you:

<div id="showtrustto-widget"><a slot="st-credit" href="https://showtrust.to/?ref=widget">Wall of love by ShowTrust</a></div>

On the Free plan the container includes a small Wall of love by ShowTrust link. The widget shows it once, under your wall, so keep it inside the container. To hide it, switch off the credit in your widget settings (Pro walls are white-label) and use the bare container: <div id="showtrustto-widget"></div>.

If your site sends a Content Security Policy, add the sources listed in Content Security Policy.