​Add a TrustBox widget to a single-page application

Depending on how you create your application, add a TrustBox widget using JavaScript or your app's relevant framework.

Add a TrustBox widget with JavaScript

To add a TrustBox with JavaScript:

  1. Make sure you insert the TrustBox script in your app, preferably in the head tag.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Insert the TrustBox HTML snippet in your application.
  3. Add a reference to the TrustBox HTML element in JavaScript. For example, you can add a custom id attribute on the <div>.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [ long list of data attributes...]>
    <a 
      href="https://www.trustpilot.com/review/example.com" 
      target="_blank" 
      rel="noopener">
      Trustpilot
    </a>
    </div>
    
  4. Reference the TrustBox HTML element and load the TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

React applications

To render a TrustBox in a React application:

  1. Insert the TrustBox script in your app, preferably in the head tag.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Create a component for rendering the TrustBox. There are two ways to do this – by using a class component or by using a functional component and the new hooks API from React version 16.8 or later.
    • Here's a sample that uses a class component:
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
      ref={trustBoxRef} // We need a reference to this element to load the TrustBox in componentDidMount.
      className="trustpilot-widget" // Renamed this to className.
      // [ long list of data attributes...]
        >
      <a
        href="https://www.trustpilot.com/review/example.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Trustpilot
      </a>
        </div>
      );
      class TrustBoxContainer extends Component {
        constructor(props) {
      super(props);
      this.trustBoxRef = React.createRef();
        }
        componentDidMount() {
      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
      // If it's not, it means the script you pasted into <head /> isn't loaded just yet.
      // When it is, it will automatically load the TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
      }
        }
        render() {
      return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • Here's a sample of using a functional component and the hooks API from React (requires at least version 16.8 of React).
      import React from 'react';
      const TrustBox = () => {
        // Create a reference to the <div> element which will represent the TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
      // If it's not, it means the script you pasted into <head /> isn't loaded  just yet.
      // When it is, it will automatically load the TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // We need a reference to this element to load the TrustBox in the effect.
       className="trustpilot-widget" // Renamed this to className.
       // [ long list of data attributes...]
      >
        <a href="https://www.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

If you want to reuse the TrustBox component and render multiple TrustBoxes in your app, you could convert the data-template-id attribute to a prop and pass down the different template IDs you want to use. The template ID is the TrustBox's unique identifier that you can get in the Trustpilot Business application configuration page.

Angular applications

To render a TrustBox in an Angular application:

  1. Insert the TrustBox script in your app, preferably in the head tag.
    <head>
      <!-- TrustBox script -->
      <script 
    type="text/javascript" 
    src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" 
    async>
      </script>
      <!-- End TrustBox script -->
    </head>
    
  2. Create a component for rendering the TrustBox with the ng g c trustbox component.
  3. In the template file, paste the code snippet from the integration page and add a custom id attribute on the <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // our custom id attribute
      class="trustpilot-widget"
      [ long list of data attributes...]
    >
      <a
    href="https://www.trustpilot.com/review/example.com"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. In the Component class, you must:
    • Implement OnInit.
    • Get a reference to the element that we pasted previously.
    • Call the loadFromElement function.
    // file: trustbox.component.ts
    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-trustbox',
      templateUrl: './trustbox.component.html'
    })
    export class TrustboxComponent implements OnInit {
      constructor() {}
      ngOnInit() {
    const trustboxRef = document.getElementById('trustbox');
    window.Trustpilot.loadFromElement(trustboxRef);
      }
    }
    
  5. Render the component in your app where you want to display the TrustBox.
<app-trustbox></app-trustbox>

Note: If you use a different application framework that's not covered here, consider adding a TrustBox using JavaScript and adjust it to fit your framework.

TrustBoxes and routing in single-page applications

Our bootstrapper script runs when the page loads. It searches for all TrustBoxes on the page, and loads them based on their HTML markup. However, there are subtle differences between how different single-page application frameworks deal with routing and, unfortunately, there is no common way for us to detect when a route has been changed.

As a result, our bootstrapper script doesn't always detect route changes in some single-page applications. For example, if you place a TrustBox on a route in a single-page application that opens after the bootstrapper script has been loaded, the TrustBox may not load.

If this happens, use the loadFromElement function to load the TrustBox when the route has changed. The loadFromElement function expects a DOM element as input.