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.

TrustBoxen en routing in single page-applicaties

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

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

Indien dit gebeurt, gebruik de loadFromElement-functie om de TrustBox te laden wanneer de route is gewijzigd. De loadFromElement-functie verwacht een DOM-element als invoer.