Get the Convert add-on module to increase onsite conversion with our extensive library of service review TrustBoxes.

Get the module

Aggiungi un widget TrustBox a un'applicazione su singola pagina

Get the Convert add-on module to increase onsite conversion with our extensive library of service review TrustBoxes.

Get the module

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. Per esempio, puoi aggiungere un attributo id personalizzato nel <div>.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [ lista di tutti gli attributi...]>
    <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} // Abbiamo bisogno di un riferimento a questo elemento per caricare il TrustBox in componentDidMount.
      className="trustpilot-widget" // Rinomina "class" in "className".
      // [ lista di tutti gli attributi...]
        >
      <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() {
      // Se window.Trustpilot è disponibile significa che abbiamo bisogno di ricaricare il TrustBox dal nostro riferimento.
      // Se non lo è, significa che lo script che hai incollato nel <head /> non è stato ancora caricato.
      // Quando lo sarà, il TrustBox verrà automaticamente caricato.
      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 = () => {
        // Crea un riferimento all'elemento <div> che rappresenterà il TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Se window.Trustpilot è disponibile significa che abbiamo bisogno di caricare il TrustBox dal nostro riferimento.
      // Se non lo è, significa che lo script che hai incollato nel <head /> non è stato ancora caricato.
      // Quando lo sarà, il TrustBox verrà automaticamente caricato.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // Abbiamo bisogno di un riferimento a questo elemento per caricare il TrustBox nell'hook effect.
       className="trustpilot-widget" // Rinomina "class" in "className".
       // [ lista di tutti gli attributi...]
      >
        <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 del TrustBox che puoi ottenere nella pagina di configurazione su 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 comando ng g c trustbox.
  3. Nel file del template, incolla lo snippet di codice copiato dalla pagina delle integrazioni dei TrustBox e aggiungi un attributo id personalizzato nel <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // il nostro attributo personalizzato
      class="trustpilot-widget"
      [ lista di tutti gli attributi...]
    >
      <a
    href="https://it.trustpilot.com/review/www.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. Lo script cerca tutti i TrustBox sulla tua pagina e li carica sulla base del loro markup HTML. Tuttavia, esistono delle piccole differenze tra come si comportano le strutture delle diverse applicazioni a pagina singola con il routing; 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.