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

Beroende på hur du skapar din applikation, kan du använda JavaScript eller din apps relevanta ramverk för att lägga till en TrustBox.

Lägg 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-snippet 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 i <div>.
    <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);

React-applikationer

Så renderas 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 (kräver version 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änglig 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 kan hämta på din apps konfigurationssida på ditt företagskonto.

Angular-applikationer

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. Infoga din kod-snippet från integrationssidan i mallfilen, och lägg till ett eget id-attribut i <div>.
    // 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 klass-komponenten ska du:
    • Implementera OnInit.
    • Referera till elementet som du infogade tidigare.
    • Ringa 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-avsnittet och anpassar detta till ditt ramverk.