Aggiungi un widget TrustBox a un'applicazione su singola pagina

A seconda di come crei la tua applicazione, aggiungi un widget TrustBox usando JavaScript o il framework di riferimento per la tua app.

Aggiungi un widget TrustBox con JavaScript

Per aggiungere un TrustBox con JavaScript:

  1. Assicurati di inserire lo script del TrustBox nella tua app, preferibilmente all'interno del tag head.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Inserisci lo snippet di codice HTML del TrustBox nella tua applicazione.
  3. Aggiungi un riferimento all'elemento HTML del TrustBox in JavaScript. Ad esempio, puoi aggiungere un attributo id personalizzato nel <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. Menziona il riferimento all'elemento HTML del TrustBox e carica il TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Applicazioni React

Per mostrare un TrustBox in un'applicazione React:

  1. Inserisci lo script del TrustBox nella tua app, preferibilmente all'interno del tag head.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Crea un componente per mostrare il TrustBox. Esistono due modi per farlo: usare un componente di classe o usare un componente funzionale e i nuovi ganci (hook) API della versione di React 16.8 o successive.
    • Ecco un esempio in cui viene utilizzato un componente di classe:
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
      ref={trustBoxRef} // We need a reference to this element to load the TrustBox in componentDidMount.
      className="trustpilot-widget" // Renamed this to className.
      // [ long list of data attributes...]
        >
      <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() {
      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
      // If it's not, it means the script you pasted into <head /> isn't loaded just yet.
      // When it is, it will automatically load the TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
      }
        }
        render() {
      return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • Ecco un esempio in cui vengono utilizzati il componente funzionale e i ganci API di React (è richiesta come minimo la versione 16.8 di React).
      import React from 'react';
      const TrustBox = () => {
        // Create a reference to the <div> element which will represent the TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.
      // If it's not, it means the script you pasted into <head /> isn't loaded  just yet.
      // When it is, it will automatically load the TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // We need a reference to this element to load the TrustBox in the effect.
       className="trustpilot-widget" // Renamed this to className.
       // [ long list of data attributes...]
      >
        <a href="https://www.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Se desideri riutilizzare il componente TrustBox e mostrare diversi TrustBox nella tua app, potresti convertire l'attributo data-template-id in un prop e trasmettere i diversi ID del template che vuoi usare. L'ID del template è l'identificatore unico che puoi ottenere nella pagina di configurazione dell'applicazione Trustpilot Business.

Applicazioni Angular

Per mostrare un TrustBox in un'applicazione Angular:

  1. Inserisci lo script del TrustBox nella tua app, preferibilmente all'interno del tag head.
    <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. Crea un componente per mostrare il TrustBox con il componente ng g c trustbox.
  3. Nel file del template, incolla lo snippet di codice copiato dalla pagina delle integrazioni e aggiungi un attributo id personalizzato nel <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. Nella classe Component devi:
    • implementare OnInit;
    • ottenere un riferimento all'elemento copiato precedentemente;
    • eseguire una call per la funzione loadFromElement.
    // 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. Mostra il componente nell'app, nella posizione in cui desideri che venga inserito il TrustBox.
<app-trustbox></app-trustbox>

NB: se usi un altro framework per l'app, che non abbiamo menzionato in quest'articolo, valuta di aggiungere un TrustBox usando JavaScript e di modificarlo per adattarlo al tuo framework.

I TrustBox e il routing in applicazioni a pagina singola

Il nostro script bootstrapper entra in funzione quando si carica la pagina. Cerca tutti i TrustBox presenti nella pagina e li carica sulla base del loro markup HTML. Ciononostante, esistono delle piccole differenze tra come si comportano le strutture delle diverse applicazioni a pagina singola con il routing e, sfortunatamente, non esiste un metodo universale che ci consenta di rilevare quando un percorso è stato cambiato.

Di conseguenza, il nostro script bootstrapper non è sempre in grado di individuare i cambiamenti di percorso di alcune delle applicazioni a pagina singola. Per esempio, se posizioni un TrustBox su un percorso in un'applicazione a pagina singola che si apre dopo che lo script bootstrapper è stato caricato, il TrustBox stesso potrebbe non caricarsi.

Se ciò accade, usa la funzione loadFromElement per caricare il TrustBox quando il percorso è cambiato. La funzione loadFromElement prevede un elemento DOM come input.