Cómo añadir un TrustBox a una aplicación de página única

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

Empezar

Los TrustBoxes son widgets de Trustpilot que puedes integrar en tu web para mostrar las opiniones más recientes, tu TrustScore y tu valoración en estrellas. En este artículo explicamos cómo añadir un TrustBox utilizando JavaScript o el framework de tu aplicación.

Añadir un TrustBox con JavaScript

Para añadir un TrustBox utilizando JavaScript:

  1. Inserta el script del TrustBox en el elemento head de tu aplicación.
    <!-- 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 código 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 el elemento <div>.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [larga lista de atributos...]>
    <a 
      href="https://es.trustpilot.com/review/ejemplo.es" 
      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);

Añadir un TrustBox con una aplicación React

Para incluir un TrustBox en una aplicación React:

  1. Inserta el script del TrustBox en el elemento head de tu aplicación.
    <!-- 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.
    • 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" // Cambia el nombre 'class' a 'className'.
      // [larga lista de atributos...]
        >
      <a
        href="https://es.trustpilot.com/review/ejemplo.es"
        target="_blank"
        rel="noopener noreferrer"
      >
        Trustpilot
      </a>
        </div>
      );
      class TrustBoxContainer extends Component {
        constructor(props) {
      super(props);
      this.trustBoxRef = React.createRef();
        }
        componentDidMount() {
      // Si 'window.Trustpilot' está disponible, debes utilizar nuestra 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;
      
    • Ejemplo utilizando un componente funcional y los hooks API de React (versión 16.8 o posterior):
      import React from 'react';
      const TrustBox = () => {
        // Crea una referencia al elemento <div>, que representa el TrustBox
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Si 'window.Trustpilot' está disponible, debes utilizar nuestra 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 efecto 'hook'.
       className="trustpilot-widget" // renombra 'class' a 'className'.
       // [larga lista de atributos...]
      >
        <a href="https://es.trustpilot.com/review/ejemplo.es" 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 exclusivo del TrustBox y puedes encontrarlo en su código HTML. 

Añadir un TrustBox con una aplicación Angular

Para incluir un TrustBox en una aplicación Angular:

  1. Inserta el script del TrustBox en el elemento head de tu aplicación.
    <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 el comando ng g c trustbox.
  3. Pega el código HTML del TrustBox en el archivo de la plantilla y añade un atributo 'id' personalizado en el elemento <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // el atributo 'id' personalizado
      class="trustpilot-widget"
      [larga lista de atributos...]
    >
      <a
    href="https://es.trustpilot.com/review/ejemplo.es"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. En el Componente de 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.

'Routing' en las 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 y no existe un método universal para detectar cuándo se ha producido un cambio de ruta.

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

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