Sådan tilføjer du en TrustBox-widget til en single page application (SPA)

Denne funktion er inkluderet i pakkerne Free, Plus, Premium, Advanced og Enterprise.

TrustBoxe er navnet på vores widgets. Du kan tilføje en til dit website, så den viser dine nyeste anmeldelser, din TrustScore og din stjernebedømmelse. I denne artikel kan du læse, hvordan du integrerer en TrustBox-widget ved hjælp af JavaScript eller din apps relevante framework.

Tilføj en TrustBox med JavaScript

For at tilføje en widget med JavaScript skal du gøre følgende:

  1. Indsæt widget-scriptet i head-elementet i din app. 
    <!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
  2. Indsæt din widgets HTML-kode i din app.
  3. Tilføj en reference til din widgets HTML-element i JavaScript. Du kan eksempelvis tilføje en brugerdefineret id-attribut til <div>-elementet. 
    <div
  id="trustbox"
  class="trustpilot-widget"
  [ lang liste af data-attributter...]>
<a 
  href="https://dk.trustpilot.com/review/eksempel.dk" 
  target="_blank" 
  rel="noopener">
  Trustpilot
</a>
</div>
  4. Referér til din widgets HTML-element, og indlæs din widget.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Tilføj en TrustBox-widget med en React-app

For at gengive en widget i en React-app skal du gøre følgende:

  1. Indsæt widget-scriptet i head-elementet i din app. 
    <!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
  2. Du skal bruge en komponent for at gengive din widget. Du kan enten oprette en klasse-komponent eller bruge en funktionel komponent og den nye hooks-API fra React 16.8 eller nyere.
    • I nedenstående eksempel er der brugt en klasse-komponent: 
      import React, { Component } from 'react';
const TrustBox = ({ trustBoxRef }) => (
  <div
ref={trustBoxRef} // Du skal bruge en reference til dette element for at indlæse TrustBoxen i metoden componentDidMount.
className="trustpilot-widget" // Ændr "class" til "className".
// [ lang liste af data-attributter...]
  >
<a
  href="https://dk.trustpilot.com/review/eksempel.dk"
  target="_blank"
  rel="noopener noreferrer"
>
  Trustpilot
</a>
  </div>
);
class TrustBoxContainer extends Component {
  constructor(props) {
super(props);
this.trustBoxRef = React.createRef();
  }
  componentDidMount() {
// Hvis objektet window.Trustpilot er tilgængeligt, skal du bruge referencen til at indlæse TrustBoxen.
// Hvis det ikke er tilgængeligt, er det script, du satte ind i <head />-elementet, ikke indlæst endnu.
// Hvis objektet er tilgængeligt, indlæses TrustBoxen automatisk.
if (window.Trustpilot) {
  window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
}
  }
  render() {
return <TrustBox trustBoxRef={this.trustBoxRef} />;
  }
}
export default TrustBoxContainer;
    • I nedenstående eksempel er der brugt en funktionel komponent og hooks-API'en fra React 16.8 eller nyere. 
      import React from 'react';
const TrustBox = () => {
  // Opret en reference til <div>-elementet, som repræsenterer TrustBoxen.
  const ref = React.useRef(null);
  React.useEffect(() => {
// Hvis objektet window.Trustpilot er tilgængeligt, skal du bruge referencen til at indlæse TrustBoxen.
// Hvis det ikke er tilgængeligt, er det script, du satte ind i <head />-elementet, ikke indlæst endnu.
// Hvis objektet er tilgængeligt, indlæses TrustBoxen automatisk.
if (window.Trustpilot) {
  window.Trustpilot.loadFromElement(ref.current, true);
}
  }, []);
  return (
<div
  ref={ref} // Du skal bruge en reference til dette element for at indlæse TrustBoxen i effect-hook.
 className="trustpilot-widget" // Ændr "class" til "className".
 // [ lang liste af data-attributter...]
>
  <a href="https://dk.trustpilot.com/review/eksempel.dk" target="_blank" rel="noopener"> Trustpilot
  </a>
</div>
  );
};
export default TrustBox;

Hvis du vil bruge den samme widget-komponent til at gengive flere widgets i din app, kan du konvertere data-template-id-attributten til en prop og videregive de skabelon-ID'er, du vil bruge. Skabelon-ID'et er din widgets unikke identifikator, som du finder i dens HTML-kode. 

Tilføj en TrustBox-widget med en Angular-app

For at gengive en widget i en Angular-app skal du gøre følgende:

  1. Indsæt widget-scriptet i head-elementet i din app. 
    <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. Opret en komponent for at gengive din widget med kommandoen ng g c trustbox.
  3. Indsæt din widgets HTML-kode i skabelon-filen, og tilføj en brugerdefineret id-attribut til <div>-elementet. 
    // file: trustbox.component.html
<div    
  id="trustbox"   // Din brugerdefinerede id-attribut
  class="trustpilot-widget"
  [ lang liste af data-attributter...]
>
  <a
href="https://dk.trustpilot.com/review/eksempel.dk"
target="_blank"
rel="noopener">
Trustpilot
  </a>
</div>
  4. I Component-klassen skal du:
    • Implementere OnInit.
    • Referere til elementet, du indsatte tidligere.
    • Kalde loadFromElement-funktionen.
    // 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. Placér komponenten i din app, der hvor du gerne vil vise din widget.
<app-trustbox></app-trustbox>

Hvis du bruger et framework, vi ikke gennemgår i denne artikel, vil vi anbefale dig at tilføje en TrustBox-widget ved at gennemgå og tilpasse JavaScript-afsnittet til dit framework.

Routing i en single page application

Vores bootstrapper-script udføres, når siden indlæses. Det søger efter alle TrustBox-widgets på siden og indlæser dem baseret på deres HTML-markup. Der er dog lidt forskel på, hvordan de forskellige single page applications’ frameworks håndterer routing, og der er ingen almindelig måde for os at registrere en routeændring på.

Derfor registrerer vores bootstrapper-script ikke altid routeændringer i visse single page applications. Hvis du eksempelvis indsætter en widget på en route i en single page application, som åbner efter bootstrapper-scriptet er blevet indlæst, bliver din widget muligvis ikke indlæst.

Hvis det er tilfældet, skal du bruge loadFromElement-funktionen til at indlæse din widget, når routen er ændret. loadFromElement-funktionen forventer et DOM-element som input.

Forrige: Introduktion til TrustBox-widgets

Næste: FAQ om TrustBox-widgets

 

Related articles