ToolStation - Internal Docs
Organisms

Trust Pilot Widget

Overview

This integration allows you to display a Trustpilot review widget on your Nuxt.js web app. The widget is dynamically loaded and initialized when the page is mounted. It can be customized with various properties such as theme, locale, and dimensions.

Component Setup

The Trustpilot widget is implemented as a Vue component in your Nuxt.js application. Below is the full code for the component:

TrustpilotWidget.vue

<template>
  <div>
    <div
      class="trustpilot-widget"
      :data-template-id="templateId"
      :data-businessunit-id="businessUnitId"
      :data-locale="locale"
      :data-theme="theme"
      :data-style-width="width"
      :data-style-height="height"
    />
  </div>
</template>

<script setup lang="ts">
interface TrustpilotProps {
  templateId: string;
  businessUnitId: string;
  locale?: string;
  theme?: string;
  width?: string;
  height?: string;
}

const props = defineProps<TrustpilotProps>();

onMounted(() => {
  // Load Trustpilot script if it isn't already loaded
  if (!document.getElementById("trustpilot-script")) {
    const script = document.createElement("script");
    script.id = "trustpilot-script";
    script.src =
      "https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
    script.async = true;
    document.head.appendChild(script);

    script.onload = () => {
      // Initialize widget after script loads
      if ((window as any).Trustpilot) {
        (window as any).Trustpilot.loadFromElement(
          document.querySelector(".trustpilot-widget")
        );
      }
    };
  } else {
    // If the script is already loaded, initialize the widget
    if ((window as any).Trustpilot) {
      (window as any).Trustpilot.loadFromElement(
        document.querySelector(".trustpilot-widget")
      );
    }
  }
});
</script>

Description

  • The component renders the Trustpilot widget using a <div> element with the class trustpilot-widget.
  • It accepts the following props:
    • templateId: The ID of the Trustpilot template to be used.
    • businessUnitId: The ID of your business unit on Trustpilot.
    • locale: Optional property to specify the locale (e.g., en-US).
    • theme: Optional property to define the widget theme (light or dark).
    • width: Optional property to define the width of the widget.
    • height: Optional property to define the height of the widget.

Nuxt Configuration

In order to load the Trustpilot widget script globally, you need to add it to the nuxt.config.js file. The script will be included in the <head> section of the HTML, ensuring it's available across the app.

nuxt.config.ts

export default {
  app: {
    head: {
      htmlAttrs: {
        lang: "en",
      },
      bodyAttrs: {
        class: "font-gilroy",
      },
      script: [
        {
          src: "https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js",
          async: true,
          id: "trustpilot-script",
        },
      ],
    },
  },
};

Explanation:

  • script: This configuration adds the Trustpilot widget's JavaScript file globally to your app. The async: true ensures that the script is loaded asynchronously.
  • id: "trustpilot-script": This ensures that the script is only loaded once to avoid duplicates.

Customization Options

You can customize the Trustpilot widget's behavior and appearance through the following options:

  • templateId: Specifies the Trustpilot template to use. You can find the template IDs in your Trustpilot account.
  • businessUnitId: The unique identifier for your business unit on Trustpilot.
  • locale (optional): Defines the language and region for the widget (e.g., "en-US", "de-DE", etc.).
  • theme (optional): Set the widget's theme. Acceptable values:
    • "light" (default)
    • "dark"
  • width (optional): Defines the width of the widget (e.g., "100%" or "500px").
  • height (optional): Defines the height of the widget (e.g., "200px").

Example of how to use the component in a page or layout:

<template>
  <div>
     <TsTrustpilot
      template-id="53aa8807dec7e10d38f59f32"
      business-unit-id="496b0cb30000640005040714"
      locale="en-US"
      theme="light"
      width="100%"
      height="150px"
    />
  </div>
</template>

<script setup lang="ts">
import TrustpilotWidget from "@/components/TrustpilotWidget.vue";
</script>

How It Works

  1. Component Lifecycle: The Trustpilot widget component uses the onMounted lifecycle hook to dynamically load the Trustpilot script if it hasn't already been loaded on the page.
  2. Script Loading: The script is loaded asynchronously into the document's <head> section when the component is mounted. The widget is initialized after the script has loaded.
  3. Widget Initialization: After the Trustpilot script loads, the widget is initialized using the Trustpilot.loadFromElement() method, which targets the <div> with the class trustpilot-widget.

Conclusion

By following these steps, you can integrate the Trustpilot review widget into your Nuxt.js application. The widget can be customized via props and initialized dynamically to ensure optimal performance.

Button PDF Form Trigger

TsSection

Copyright © 2026