​Add a TrustBox widget to a single-page application

This feature is included in the Free, Plus, Premium, Advanced, and Enterprise plans.

TrustBoxes are our widgets. You can embed one in your website to show your most recent reviews, TrustScore, and star ratings. Here's how to add a widget using JavaScript or your application's relevant framework.

Add a TrustBox widget with JavaScript

To add a widget with JavaScript:

  1. Insert the widget's script into 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 widget's HTML code into your application.
  3. Add a reference to the widget's 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 widget's HTML element and load the widget .
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Add a TrustBox widget with a React application

To render a widget in a React application:

  1. Insert the widget's script into 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 widget. 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 version 16.8 or later. 
      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 widget's component and render multiple widgets 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 widget's unique identifier that you can find in its HTML code. 

Add a TrustBox widget with an Angular application

To render a widget in an Angular application:

  1. Insert the widget's 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 widget with the ng g c trustbox component.
  3. In the template file, paste the widget's HTML code 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 you 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 widget.
<app-trustbox></app-trustbox>

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

Routing in single-page applications

Our bootstrapper script runs when the page loads. It searches for all TrustBox widgets 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 there's 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 widget on a route in a single-page application that opens after the bootstrapper script has been loaded, the widget may not load.

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

Previous What are TrustBox widgets?

Up next TrustBox widgets - FAQ

Related articles