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:
- 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 -->
- Inserisci il codice HTML del widget nella tua applicazione.
- 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>
- 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:
- 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 -->
- 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;
- Ecco un esempio in cui viene utilizzato un componente di classe:
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:
- 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>
- Crea un componente per mostrare il widget con il comando
ng g c trustbox
. - 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>
- 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); } }
- 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