Aggiungi un widget TrustBox a un'applicazione su singola pagina

Questa funzione è inclusa nei piani Free, Plus, Premium, Advanced ed Enterprise.

I TrustBox sono i nostri widget Puoi integrarne uno sul tuo sito web per mettere in mostra le recensioni più recenti, il TrustScore e le valutazioni in stelle. Questo articolo ti spiega come aggiungere un TrustBox con JavaScript o con il framework di riferimento per la tua app.

Aggiungi un widget TrustBox con JavaScript

Per aggiungere un widget con JavaScript:

  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. Inserisci il codice HTML del widget nella tua applicazione.
  3. Aggiungi un riferimento all'elemento HTML del widget 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://it.trustpilot.com/review/esempio.it" 
      target="_blank" 
      rel="noopener">
      Trustpilot
    </a>
    </div>
    
  4. Aggiungi un riferimento all'elemento HTML del widget e carica il widget.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Aggiungi un widget TrustBox con un'applicazione React

Per mostrare un widget in un'applicazione React:

  1. Inserisci lo script del widget 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 widget. 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" // Classe rinominata "className".
      // [ lista di tutti gli attributi...]
        >
      <a
        href="https://it.trustpilot.com/review/esempio.it"
        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 un componente funzionale e i ganci API della versione 16.8 di React o superiore.
      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'effect.
       className="trustpilot-widget" // Classe rinominata "className".
       // [ lista di tutti gli attributi...]
      >
        <a href="https://it.trustpilot.com/review/esempio.it" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Se desideri riutilizzare il componente widget e mostrare diversi widget 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 widget TrustBox che puoi trovare nel suo codice HTML. 

Aggiungi un widget TrustBox con un'applicazione Angular

Per mostrare un widget in un'applicazione Angular:

  1. Inserisci lo script del widget 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 widget con il comando ng g c trustbox.
  3. Nel file del template, copia il codice HTML del widget 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.esempio.it"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. Nella classe Component, devi:
    • implementare OnInit;
    • ottenere un riferimento all'elemento incollato 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, nel punto in cui vuoi che venga inserito il widget.
<app-trustbox></app-trustbox>

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

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 e 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 widget su un percorso in un'applicazione a pagina singola che si apre dopo che lo script bootstrapper è stato caricato, il widget potrebbe non caricarsi.

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

Precedente Introduzione ai TrustBox

Successivo TrustBox - Domande frequenti

 

Related articles