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

Deze functie is onderdeel van het Free-pakket.

Aan de slag

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 hoger).
    • Hierbij een voorbeeld waar een klassecomponent is 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" // Hier wordt 'class' vernoemd tot 'className'.
      // [ lange lijst van data-attributen...]
        >
          <a
            href="https://www.nl.trustpilot.com/review/voorbeeld.nl"
            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, betekent dat dat we de TrustBox moeten laden uit onze verwijzing.
      // Als het niet beschikbaar is, is het script dat je in <head /> geplakt hebt nog niet geladen.
      // Zo wel, dan zal de TrustBox automatisch geladen worden.
      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 = () => {
        // Maak een verwijzing naar het element <div> dat de TrustBox zal representeren
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Als window.Trustpilot beschikbaar is, betekent dat dat we de TrustBox moeten laden uit onze verwijzing.
      // Als het niet beschikbaar is, is het script dat je in <head /> geplakt hebt nog niet geladen.
      // Zo wel, dan zal de TrustBox automatisch geladen worden.
      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 de effect hook te laden.
       className="trustpilot-widget" // Hier wordt naar 'class' verwezen als '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 renderen, kun je het data-template-id attribuut converteren naar een prop en de verschillende sjabloon-ID's die je wilt gebruiken doorgeven. Het template-ID is de unieke identificatie van de TrustBox die je kunt vinden in de configuratiepagina van Trustpilot Business.

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 TrustBox-configuratiepagina en voeg een aangepast id kenmerk toe aan de <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // ons aangepast id-attribuut
      class="trustpilot-widget"
      [ lange lijst van data-attributen...]
    >
      <a
        href="https://www.nl.trustpilot.com/review/voorbeeld.nl"
        target="_blank"
        rel="noopener">
        Trustpilot
      </a>
    </div>
    
  4. In de Componentklasse :
    • 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 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.

TrustBoxes en 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 subtiele verschillen tussen de manier waarop de frameworks van single-page-aplicaties omgaan met routing. Helaas is er voor ons geen algemene manier om te detecteren wanneer een route is gewijzigd.

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

Als dit gebeurt, gebruik dan de functie loadFromElement om de TrustBox te laden als de route is gewijzigd. De loadFromElement-functie vereist een DOM-element als invoer.