Astro

For Astro projects, the widget script and the container <div> both go in the page that shows the wall of love (e.g. src/pages/testimonials.astro), not in your shared layout.

Install#

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

Add the script#

In the page that shows the wall, right after the container:

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <h1>What our customers say</h1>

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

  <script is:inline>
    window.SHOWTRUSTTO_WIDGET_CONFIG = { projectId: 'YOUR_PROJECT_ID' };
  </script>
  <script is:inline src="https://app.showtrust.to/showtrustto-widget.js" async></script>
</Layout>

The is:inline directive prevents Astro from processing the script as a module — important because the widget loader expects a global window property.

Don't put these tags in src/layouts/Layout.astro or another layout shared by every page: if the script runs on a page without the container, it adds the wall to the end of that page. Showing the wall on several pages? Put the container and both scripts in a component (say src/components/WallOfLove.astro) and use it only on those pages.

Add the container#

The container <div> in the example above marks where the wall of love renders. Place it exactly where you want the wall to appear:

<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.