Så lägger du till en TrustBox i en single-page application

Denna funktion ingår i Free-paketet.

Kom igång nu

Trustpilots widgets kallas TrustBoxar. Du kan lägga till en TrustBox på din webbsida för att visa upp dina senaste omdömen, din TrustScore och ditt stjärnbetyg. I den här artikeln går vi igenom hur du lägger till med TrustBox  med hjälp av JavaScript eller din applikations ramverk.

Så lägger du till en TrustBox med JavaScript

Så lägger du till en TrustBox med JavaScript:

  1. Lägg till TrustBox-skriptet i head-taggen 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. Infoga TrustBoxens HTML-kod i din app.
  3. Lägg till en referens till TrustBoxens HTML-element i JavaScript. Du kan till exempel lägga till ett eget id-attribut till <div>.-elementet.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [ lång lista över dataattribut...]>
        <a 
          href="https://se.trustpilot.com/review/example.com" 
          target="_blank" 
          rel="noopener">
          Trustpilot
        </a>
    </div>
    
  4. Referera till Trustboxens HTML-element och läs in TrustBoxen.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Så lägger du till en TrustBox med en React-applikation

Följ dessa steg för att rendera en TrustBox i en React-applikation:

  1. Lägg till TrustBox-skriptet i head-taggen 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. Skapa en komponent för att rendera TrustBoxen. Du kan antingen använda en klass-komponent eller en funktionell komponent och den nya hooks-API:en från React 16.8 eller nyare versioner.
    • I nedanstående exempel används en klass-komponent.
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
          ref={trustBoxRef} // Vi behöver en referens till detta element för att läsa in TrustBoxen i componentDidMount.
      className="trustpilot-widget" // Ändra "class" till "className".
      // [ lång lista över dataattribut...]
        >
          <a
            href="https://se.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() {
      // Om objektet window.Trustpilot är tillgängligt, ska du använda referensen för att läsa in TrustBoxen.
      // Om det inte är tillgängligt är skriptet som du satte in i <head />-taggen inte inläst ännu.
      // När det är tillgänglig kommer Trustboxen läsas in automatiskt.
      if (window.Trustpilot) {
            window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
          }
        }
        render() {
          return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • I nedanstående exempel används en funktionell komponent och hooks-API:en från React 16.8 eller nyare.
      import React from 'react';
      const TrustBox = () => {
        // Skapa en referens till <div>-elementet, som representerar TrustBoxen.
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Om objektet window.Trustpilot är tillgängligt, ska du använda referensen för att läsa in TrustBoxen.
      // Om det inte är tillgängligt är skriptet som du satte in i <head />-taggen inte inläst ännu.
      // När det är tillgängligt kommer Trustboxen läsas in automatiskt.
      if (window.Trustpilot) {
            window.Trustpilot.loadFromElement(ref.current, true);
          }
        }, []);
        return (
          <div
            ref={ref} // Du ska använda en referens till detta element för att läsa in TrustBoxen i effect-hook.
       className="trustpilot-widget" // Ändra "class" till "className".
       // [ lång lista över dataattribut...]
          >
            <a href="https://se.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot
            </a>
          </div>
        );
      };
      export default TrustBox;
      

Om du vill återanvända TrustBox-komponenten för att rendera flera TrustBoxar i din app, kan du konvertera data-template-id-attributen till en prop och föra vidare de mall-ID som du vill använda. Mall-ID:et är TrustBoxens unika identifierare som du hittar i HTML-koden. 

Så lägger du till en TrustBox med en Angular-applikation

Så renderas en TrustBox i en Angular-applikation:

  1. Lägg till TrustBox-skriptet i head-taggen 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. Skapa en komponent för att rendera TrustBoxen med kommandot ng g c trustbox.
  3. Klistra in TrustBoxens HTML-kod  i mallfilen och lägg till ett eget id-attribut i <div>-elementet.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // vårt anpassade id-attribut
      class="trustpilot-widget"
      [ lång lista över dataattribut...]
    >
      <a
        href="https://se.trustpilot.com/review/example.com"
        target="_blank"
        rel="noopener">
        Trustpilot
      </a>
    </div>
    
  4. I Component-klassen behöver du:
    • Implementera OnInit.
    • Referera till elementet som du infogade tidigare.
    • Anropa 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. Rendera komponenten i din app där du vill att TrustBoxen ska visas.
<app-trustbox></app-trustbox>

Obs: Om du använder ett annat ramverk, som vi inte går igenom i denna artikel, rekommenderar vi att du lägger till en Trustbox med hjälp av Javascript och anpassar detta till ditt ramverk.

Dirigering i en single-page application

Vårt bootstrap-skript kör när webbsidan laddas. Det söker efter alla TrustBoxar på sidan och laddar dem enligt deras HTML-uppmärkning. Det finns subtila skillnader mellan hur olika ramverk för single-page applications hanterar dirigering, och det finns inget sätt för oss att upptäcka när en dirigering har ändrats.

Detta resulterar i att vårt bootstrap-skript inte alltid upptäcker vägförändringar i vissa single-page applications. Om du t.ex. har placerat en TrustBox på en väg i en single-page application som öppnar efter att bootstrap-skriptet har laddat, kan det hända att TrustBoxen inte laddar.

Om detta händer, använd funktionen loadFromElement för att ladda TrustBoxen när vägen har ändrats. Funktionen loadFromElement behöver ett DOM-element som input.