Voeg een TrustBox-widget toe aan een single-page applicatie

Afhankelijk van hoe je je applicatie maakt, voeg je een TrustBox-widget toe met behulp van JavaScript of het relevante framework van je app.

Voeg een TrustBox-widget toe met behulp van JavaScript

Zo voeg je een TrustBox toe met JavaScript:

  1. Zorg ervoor dat het TrustBox-script in je applicatie is ingevoerd, bij voorkeur in de 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. Voer de TrustBox HTML-snippet in je applicatie in.
  3. Voeg een referentie toe aan het TrustBox HTML-element in JavaScript. Je kunt bijvoorbeeld een aangepast id kenmerk invoeren op de <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. Refereer naar het TrustBox HTML-element en laad de TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

React-applicaties

Om een TrustBox in een React-applicatie weer te geven:

  1. Voer het TrustBox-script in je applicatie in, bij voorkeur in de 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. Maak een component voor het renderen van de TrustBox. Er zijn twee manieren om dit te doen – door gebruik te maken van een klassecomponent of door gebruik te maken van een functioneel component en de nieuwe hooks-API van React (versie 16.8 of later).
    • Hier is een voorbeeld dat een klassecomponent gebruikt:
      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;
      
    • Hier is een voorbeeld van het gebruik van een functioneel component en de hooks-API van React (vereist minstens versie 16.8 van 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;
      

Als je de TrustBox-component wilt hergebruiken en meerdere TrustBoxen in je app wilt renderen, kun je het data-template-id attribuut converteren naar een prop en de verschillende sjabloon-ID's die je wilt gebruiken doorgeven. De template-ID is de unieke identificatie van de TrustBox die je kunt krijgen in de configuratiepagina van de Trustpilot Business-applicatie.

Angular applicaties

Om een TrustBox in een Angular-applicatie weer te geven:

  1. Voer het TrustBox-script in je applicatie in, bij voorkeur in de 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. Maak een component voor het renderen van de TrustBox met de ng g c trustbox component.
  3. In het template-bestand, plak de codesnippet vanuit de integratie pagina en voeg een aangepast id kenmerk toe op de <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 de Component class:
    • Implementeer OnInit.
    • Krijg een verwijzing naar het element dat we eerder hebben geplakt.
    • Roep de loadFromElement-functie op.
    // 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 de component in je app waar je de TrustBox wilt weergeven.
<app-trustbox></app-trustbox>

Opmerking: Als je een ander app-framework gebruikt, dat hier niet wordt behandeld, overweeg dan om een TrustBox toe te voegen met behulp van JavaScript en pas het aan je framework aan.