Cómo incluir un TrustBox en una 'Single-page application'

Según cómo quiera disponer su aplicación, incluya un TrustBox usando JavaScript o el framework de referencia de su app.

Añadir un TrustBox con JavaScript

Para añadir un TrustBox con JavaScript:

  1. Asegúrese de estar escribiendo el código del TrustBox en su app, preferiblemente en la sección head.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Introduzca el fragmento HTML del TrustBox en su aplicación.
  3. Añada una referencia al elemento HTML del TrustBox en JavaScript. Así, por ejemplo, puede añadir un característica de identificación personalizada id atributo <div>.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [ larga lista de atributos...]>
    <a 
      href="https://es.trustpilot.com/review/example.com" 
      target="_blank" 
      rel="noopener">
      Trustpilot
    </a>
    </div>
    
  4. Haga referencia al elemento HTML del TrustBox y cárguelo.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Aplicaciones React

Para incluir un TrustBox en una aplicación React:

  1. Introducir el código del TrustBox en su app, preferiblemente en la sección head
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Crear un componente para mostrar el TrustBox. Hay dos formas de hacerlo – una utilizando un 'class component' y la otra con un 'functional component' y los nuevos hooks API de la versión React 16.8 o posterior.
    • Este es un ejemplo utilizando un 'class component':
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
      ref={trustBoxRef} // Necesitamos una referencia a este elemento para cargar el TrustBox en componentDidMount.
      className="trustpilot-widget" // 'class' ha sido renombrada 'className'.
      // [ larga lista de atributos...]
        >
      <a
        href="https://es.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() {
      // Si aparece la ventana 'Trustpilot is available', significa que tenemos que usar la referencia para cargar el TrustBox.
      // Si no, significa que el código introducido en <head /> aún no se ha cargado.
      // Cuando esté listo, el TrustBox se cargará automáticamente.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
      }
        }
        render() {
      return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • Este es un ejemplo utilizando un 'functional component' y los hooks API de React (versión React 16.8 o superior).
      import React from 'react';
      const TrustBox = () => {
        // Cree una referencia al <div> elemento que representará al TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Si aparece la ventana 'Trustpilot available', significa que tenemos que usar la referencia para cargar el TrustBox.
      // Si no, significa que el código introducido en <head /> aún no se ha cargado.
      // Cuando esté listo, el TrustBox se cargará automáticamente.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // Necesitamos una referencia a este elemento para cargar el TrustBox en el hook effect.
       className="trustpilot-widget" // 'class' ha sido renombrada 'className'.
       // [ larga lista de atributos...]
      >
        <a href="https://es.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Si quiere reutilizar el TrustBox y mostrar varios TrustBoxes en su aplicación, puede convertir el atributo data-template-id en un prop y transferir las diferentes IDs de las plantillas que quiera utilizar. El ID de la plantilla es el identificador del TrustBox. Puede conseguirlo en la página de configuración de Trustpilot Business.

Aplicaciones Angular

Para incluir un TrustBox en una aplicación Angular:

  1. Introducir el código del TrustBox en su app, preferiblemente en la sección 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. Crear un componente para mostrar el TrustBox con la orden ng g c trustbox.
  3. En el archivo de la plantilla, pegue el fragmento de código de la página de integración y añada un atributo id atributo <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // atributo personalizado
      class="trustpilot-widget"
      [ larga lista de atributos...]
    >
      <a
    href="https://es.trustpilot.com/review/example.com"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. Con el 'Component class' tiene que:
    • Implementar OnInit.
    • Tener una referencia al elemento previamente pegado.
    • Activar la función 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. Inserte el componente en su app, en el lugar en el que quiera mostar el TrustBox.
<app-trustbox></app-trustbox>

Nota: Si para su aplicación utiliza un framework que no tratamos aquí, sopese la posibilidad de incluir el TrustBox usando JavaScript y luego ajustarlo a su framework.