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

Esta función está incluida en el Plan Free.

Empezar

Según cómo quieras disponer tu aplicación, puedes incluir un TrustBox utilizando JavaScript o bien el framework de referencia de tu app.

Añadir un TrustBox con JavaScript

Para añadir un TrustBox utilizando JavaScript:

  1. Asegúrate de estar escribiendo el código del TrustBox en tu aplicación, 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. Inserta el fragmento HTML del TrustBox en tu aplicación.
  3. Añade una referencia al elemento HTML del TrustBox en JavaScript. Por ejemplo, puedes añadir un atributo id personalizado en la sección <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. Haz referencia al elemento HTML del TrustBox y cárgalo.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Aplicaciones React

Para mostrar un TrustBox en una aplicación React:

  1. Introduce el código del TrustBox en tu aplicación, 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. Crea un componente para mostrar el TrustBox. Hay dos formas de hacerlo: una, utilizando un componente de clase y la otra, con un componente funcional y los nuevos hooks API de la versión React 16.8 o posterior.
    • Este es un ejemplo utilizando un componente de clase:
      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" // renombra 'class' a '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', utiliza 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 componente funcional y los hooks API de React (versión React 16.8 o superior):
      import React from 'react';
      const TrustBox = () => {
        // Crea una referencia al <div> elemento que representará el TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Si aparece la ventana 'Trustpilot available', utiliza 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" // renombra 'class' a '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 quieres reutilizar el TrustBox y mostrar varios TrustBoxes en tu aplicación, puedes convertir el atributo data-template-id en un prop y transferir los diferentes IDs de las plantillas que quieras utilizar. El ID de la plantilla es el identificador del TrustBox. Puedes conseguirlo en la página de configuración de Trustpilot Business.

Aplicaciones Angular

Para incluir un TrustBox en una aplicación Angular:

  1. Introduce el código del TrustBox en tu aplicación, 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. Crea un componente para mostrar el TrustBox con la orden ng g c trustbox.
  3. Copia el fragmento de código de la página de configuración del TrustBox en el archivo de la plantilla y añade un atributo id personalizado en la sección <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // nuestros atributos id personalizados
      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 Componente clase, tienes 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. Inserta el componente en tu aplicación, en el lugar en el que quieras que aparezca el TrustBox.
<app-trustbox></app-trustbox>

Nota: Si para tu aplicación utilizas un framework que no tratamos aquí, considera la posibilidad de incluir el TrustBox utilizando JavaScript y luego ajustarlo a tu framework.

TrustBoxes y routing en aplicaciones de página única

Nuestro 'bootstrapper script' entra en funcionamiento cuando se carga la página. El script escruta la página en busca TrustBoxes y los carga según el 'markup' de su HTML. No obstante, hay pequeñas diferencias en el comportamiento de las estructuras de las diversas aplicaciones de página única con el routing. Lamentablemente, no existe un método universal para detectar cuándo se ha producido un cambio de ruta.

En consecuencia, nuestro 'bootstrapper script' no siempre puede detectar el cambio de ruta en las aplicaciones de página única. Así, por ejemplo, si colocas un TrustBox en una ruta de una aplicación de página única operando después de que se haya cargado el 'bootstrapper script', puede que no el TrustBox no se llegue a cargar.

Si esto ocurre, utiliza la función loadFromElement para cargar el TrustBox, cuando la ruta haya cambiado. La función loadFromElement precisa de un elemento DOM como 'input'.