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.

TrustBoxes y enrutamiento en aplicaciones de página única

Nuestro código 'Bootstrapper' se pone en marcha cuando se carga la página, rastrea en busca de todos los TrustBoxes que haya en la página y los carga según las indicaciones de su marcador HTML. No obstante, hay pequeñas diferencias en la forma en que los 'frameworks' de las diversas aplicaciones de página única ('Single-page applications') tratan el enrutamiento y, desgraciadamente, no tenemos forma de detectar, cuándo se ha cambiado una ruta.

En consecuencia, nuestro código 'Bootstrapper' no siempre detecta los cambios de ruta en las aplicaciones de página única. Así, por ejemplo, si usted coloca un TrustBox en una aplicación de página única dentro de una ruta que se abre después de que se haya cargado el código 'Bootstrapper', puede que no se cargue ese TrustBox.

En caso de que esto ocurra, utilice la función loadFromElement para cargar el TrustBox cuando haya cambiado la ruta. La función loadFromElement precisa de un elemento DOM como entrada.