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

Afhængigt af hvordan du opsætter din app, kan du bruge JavaScript eller din apps relevante framework til at tilføje en TrustBox.

Tilføj en TrustBox med JavaScript

Sådan tilføjer du en TrustBox med JavaScript:

  1. Indsæt TrustBox-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 TrustBoxens HTML-snippet i din app.
  3. Tilføj en reference til TrustBoxens 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/example.com" 
      target="_blank" 
      rel="noopener">
      Trustpilot
    </a>
    </div>
    
  4. Referér til TrustBoxens HTML-element, og indlæs TrustBoxen.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

React-apps

Sådan gengives en TrustBox i en React-app:

  1. Indsæt TrustBox-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 TrustBoxen. Du kan enten bruge en klasse-komponent eller 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/example.com"
        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 (kræver version 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 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/example.com" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Hvis du vil bruge den samme TrustBox-komponent til at gengive flere TrustBoxe 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 TrustBoxens unikke identifikator, som du kan hente på din apps konfigurationsside på din virksomhedskonto.

Angular-apps

Sådan gengives en TrustBox i en Angular-app:

  1. Indsæt TrustBox-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 TrustBoxen med kommandoen ng g c trustbox.
  3. Indsæt din kode-snippet fra integrationssiden i skabelonfilen, og tilføj en brugerdefineret id-attribut i <div>-elementet.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // Brugerdefineret id-attribut
      class="trustpilot-widget"
      [ lang liste af data-attributter...]
    >
      <a
    href="https://dk.trustpilot.com/review/example.com"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. I klasse-komponenten 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 TrustBoxen.
<app-trustbox></app-trustbox>

Bemærk: Hvis du bruger et framework, vi ikke gennemgår i denne artikel, vil vi anbefale dig at tilføje TrustBoxe ved at gennemgå og tilpasse JavaScript-afsnittet til dit framework.

TrustBoxe og routing i en single page application

Vores bootstrapper-script udføres, når siden indlæses. Det søger efter alle TrustBoxe 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 desværre 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 TrustBox på en route i en single page application, som åbner efter bootstrapper-scriptet er blevet indlæst, bliver TrustBoxen muligvis ikke indlæst.

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