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

Este widget está incluido en los planes Free, Plus, Premium, Advanced y Enterprise.

Los TrustBoxes son nuestros widgets. Puedes integrar uno en tu sitio web para mostrar las opiniones más recientes, tu TrustScore y tu valoración en estrellas. Este artículo muestra cómo añadir un widget utilizando JavaScript o el framework correspondiente de tu aplicación.

Cómo añadir un TrustBox con JavaScript

Para añadir un widget con JavaScript:

  1. Inserta el script del widget en tu aplicación, preferiblemente en la etiqueta 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 código HTML del widget en tu aplicación.
  3. Añade una referencia al elemento HTML del widget 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 widget y cárgalo .
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Cómo añadir un TrustBox con una aplicación React

Para incluir un widget en una aplicación React:

  1. Inserta el script del widget en tu aplicación, preferiblemente en la etiqueta 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 widget. 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 deseas reutilizar el componente del widget y mostrar varios widgets en tu aplicación, puedes convertir el atributo data-template-id en un prop y pasar 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. 

Cómo añadir un TrustBox con una aplicación Angular

Para incluir un widget en una aplicación Angular:

  1. Inserta el script del widget en tu aplicación, preferiblemente en la etiqueta 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 widget con el componente ng g c trustbox.
  3. Pega el código HTML del widget 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 widget.
<app-trustbox></app-trustbox>

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. Buscar todos los TrustBoxes en la página y los carga basándose en 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. Por ejemplo, si colocas un widget en una ruta en una aplicación de una sola página que se abre después de que se haya cargado el script "bootstrapper", es posible que el widget no se cargue.

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

Anterior Introducción a los TrustBoxes

Siguiente TrustBox-widgets - Preguntas frecuentes

 

Related articles