Een TrustBox-widget toevoegen aan een single-page-applicatie

Deze functie is inbegrepen in de pakketten Free, Plus, Premium, Advanced en Enterprise.

TrustBoxen zijn onze 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 widget met JavaScript of het relevante framework voor je app toevoegt.

Een TrustBox-widget toevoegen met behulp van JavaScript

Een widget toevoegen met JavaScript:

  1. Voeg het widgetscript 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 HTML-code van de widget in je app in.
  3. Voeg een verwijzing toe naar het HTML-element van de widget 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 HTML-element van de widget en laad deze dan.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Een TrustBox-widget toevoegen met een React-applicatie

Een widget weergeven in een React-applicatie:

  1. Voeg het widgetscript 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 widget. Dit kan op twee manieren: maak gebruik van een klassecomponent, of van een functionele 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 functionele 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 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 widgetcomponent opnieuw wilt gebruiken en meerdere widgets 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 widget die je kunt vinden in de HTML-code.

Een TrustBox-widget toevoegen met een Angular-applicatie

Een widget in een Angular-applicatie weergeven:

  1. Voeg het widgetscript 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 renderen van de widget met de component ng g c trustbox.
  3. Plak in het template-bestand de HTML-code van de widget 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 widget wilt plaatsen.
<app-trustbox></app-trustbox>

Als je een app-framework gebruikt dat hier niet wordt behandeld, overweeg dan om een TrustBox-widget 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 TrustBox-widgets op de pagina en laadt ze op basis van hun HTML-markup. 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 widget op een route plaatst in een single-page-applicatie die wordt geopend nadat het bootstrapperscript is geladen, kan het zijn dat de widget niet goed wordt geladen.

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

Vorige: Maak kennis met de TrustBoxen

Volgende: TrustBoxen — veelgestelde vragen

 

Related articles