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

Deze functie is onderdeel van het Free-pakket.

Aan de slag

TrustBoxen zijn Trustpilot-widgets. Je kunt er een op je website integreren om de meest recente reviews, TrustScore en sterrenscores te laten zien. Dit artikel vertelt je hoe je een TrustBox met JavaScript of het relevante framework voor je app toevoegt.

Voeg een TrustBox toe met JavaScript

Zo voeg je een TrustBox toe met JavaScript:

  1. Voeg het TrustBox-script in je app 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. Voer de TrustBox HTML-code in je app in.
  3. Voeg een verwijzing toe naar het TrustBox HTML-element in JavaScript. Je kunt bijvoorbeeld een aangepast id-kenmerk toevoegen aan 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. Verwijs naar het TrustBox HTML-element en laad de TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Voeg een TrustBox toe met een React-applicatie

Zo voeg je een TrustBox toe met een React-applicatie:

  1. Voeg het TrustBox-script in je app 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 weergeven van de TrustBox. Dit kan op twee manieren: maak gebruik van een klassecomponent, of van een functioneel component en de nieuwe hooks-API van React (versie 16.8 of hoger).
    • In dit voorbeeld is een klassecomponent gebruikt:
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
          ref={trustBoxRef} // We hebben een verwijzing naar dit element nodig om de TrustBox te laden in componentDidMount.
      className="trustpilot-widget" // Class is hier hernoemd naar className.
      // [ lange lijst data-attributen...]
        >
      <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() {
      // Als window.Trustpilot beschikbaar is, moeten we de TrustBox laden vanuit onze verwijzing.
      // Wanneer het niet beschikbaar is, is het script dat je in <head /> geplakt hebt nog niet geladen.
      // Is het wel beschikbaar, dan wordt de TrustBox automatisch geladen.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
      }
        }
        render() {
      return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • In dit een voorbeeld is een functioneel component en de hooks-API van React ( versie 16.8 of later) gebruikt:
      import React from 'react';
      const TrustBox = () => {
        // Maak een verwijzing naar het element <div> dat de TrustBox zal vertegenwoordigen
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Als window.Trustpilot beschikbaar is, moeten we de TrustBox laden vanuit onze verwijzing.
      // Wanneer het niet beschikbaar is, is het script dat je in <head /> geplakt hebt nog niet geladen.
      // Is het wel beschikbaar, dan wordt de TrustBox automatisch geladen.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // We hebben een verwijzing naar dit element nodig om de TrustBox in het hook-effect te laden.
       className="trustpilot-widget" // Class is hier hernoemd naar className.
       // [ lange lijst van data-attributen...]
          >
            <a href="https://www.nl.trustpilot.com/review/voorbeeld.nl" target="_blank" rel="noopener"> Trustpilot
            </a>
          </div>
        );
      };
      export default TrustBox;
      

Als je de TrustBox-component wilt hergebruiken en meerdere TrustBoxen in je app wilt weergeven, kun je het data-template-id-attribuut converteren naar een prop en de verschillende template-ID's die je wilt gebruiken doorgeven. De template-ID is de unieke ID van de TrustBox die je kunt vinden in de HTML-code.

Voeg een TrustBox toe met een Angular-app

Zo toon je een TrustBox in een Angular-applicatie:

  1. Voeg het TrustBox-script in je app 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 weergeven van de TrustBox met de ng g c trustbox component.
  3. Plak in het template-bestand de TrustBox HTML-code en voeg een aangepast id-attribuut toe aan 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 klasse-component doe je het volgende:
    • Implementeer OnInit.
    • Krijg een verwijzing naar het element dat je eerder hebt 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. Toon de component in je app waar je de TrustBox wilt plaatsen.
<app-trustbox></app-trustbox>

Opmerking: Als je een 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.

Routing in single-page-applicaties

Ons bootstrapper-script wordt actief zodra de pagina is geladen. Het zoekt naar alle TrustBoxen op de pagina en laadt ze op basis van hun HTML-markering. Er zijn echter kleine verschillen tussen de manieren waarop de frameworks van single-page-applicaties omgaan met routing. Helaas is er voor ons geen algemene manier om te detecteren wanneer een route is gewijzigd.

Daarom kan ons bootstrapper-script niet altijd routewijzigingen detecteren in sommige single-page-applicaties. Als je bijvoorbeeld een TrustBox op een route plaatst in een single-page-applicatie die wordt geopend nadat het bootstrapper-script is geladen, kan het zijn dat de TrustBox niet goed wordt geladen.

Gebruik in dit geval de functie loadFromElement om de TrustBox te laden als de route is gewijzigd. De loadFromElement-functie verwacht een DOM-element als invoer.