Ajouter une TrustBox à une application web monopage

Cette fonctionnalité est incluse dans les packs Free, Plus, Premium, Advanced et Enterprise.

Les TrustBoxs sont nos widgets. Intégrez-les à votre site web pour afficher vos avis les plus récents, votre TrustScore et votre note en étoile. Lisez cet article pour découvrir comment ajouter un widget en utilisant JavaScript ou le framework pertinent de votre application.

Ajouter un widget TrustBox avec JavaScript

Pour ajouter un widget avec JavaScript :

  1. Insérez le script du widget dans votre application, de préférence dans la balise head. 
    <!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
  2. Insérez le code HTML du widget dans votre application.
  3. Ajoutez une référence à l'élément HTML du widget dans JavaScript. Par exemple, vous pouvez ajouter un attribut id personnalisé dans le <div>. 
    <div
  id="trustbox"
  class="trustpilot-widget"
  [ longue liste d'attributs de données...]>
<a 
  href="https://fr.trustpilot.com/review/exemple.fr" 
  target="_blank" 
  rel="noopener">
  Trustpilot
</a>
</div>
  4. Référencez l'élément HTML du widget et chargez ce widget.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Ajouter un widget TrustBox avec une application React

Pour utiliser un widget dans une application React :

  1. Insérez le script du widget dans votre application, de préférence dans la balise head. 
    <!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
  2. Créez un composant (component) pour utiliser le widget. Il existe deux manières de procéder : en choisissant un composant de classe (class component) ou un composant fonctionnel (functional component) et les nouveaux hooks API de la version 16.8 (ou ultérieure) de React.
    • Voici un extrait qui utilise un composant de classe : 
      import React, { Component } from 'react';
const TrustBox = ({ trustBoxRef }) => (
  <div
ref={trustBoxRef} // Nous avons besoin d'une référence qui renvoie à cet élément pour charger la TrustBox dans componentDidMount.
className="trustpilot-widget" // Cette classe a été renommée « className ».
// [ longue liste d'attributs de données...]
  >
<a
  href="https://fr.trustpilot.com/review/exemple.fr"
  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, cela signifie que nous devons charger la TrustBox depuis notre référence.
// Si ce n'est pas le cas, cela signifie que le script que vous avez collé dans <head /> n'est pas encore chargé.
// Quand il sera chargé, la TrustBox sera automatiquement affichée.
if (window.Trustpilot) {
  window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
}
  }
  render() {
return <TrustBox trustBoxRef={this.trustBoxRef} />;
  }
}
export default TrustBoxContainer;
    • Voici un extrait utilisant un composant fonctionnel et les hooks API de React (version 16.8 ou ultérieure). 
      import React from 'react';
const TrustBox = () => {
  // Créez une référence qui renvoie à l'élément <div> qui va représenter la TrustBox
  const ref = React.useRef(null);
  React.useEffect(() => {
// Si window.Trustpilot est disponible, cela signifie que nous devons charger la TrustBox depuis notre référence.
// Si ce n'est pas le cas, cela signifie que le script que vous avez collé dans <head /> n'est pas encore chargé.
// Quand il sera chargé, la TrustBox sera automatiquement affichée.
if (window.Trustpilot) {
  window.Trustpilot.loadFromElement(ref.current, true);
}
  }, []);
  return (
<div
  ref={ref} // Nous avons besoin d'une référence à cet élément pour charger la TrustBox dans l'effet (effect).
 className="trustpilot-widget" // Cette classe a été renommée « className ».
 // [ longue liste d'attributs de données...]
>
  <a href="https://fr.trustpilot.com/review/exemple.fr" target="_blank" rel="noopener"> Trustpilot
  </a>
</div>
  );
};
export default TrustBox;

Si vous souhaitez réutiliser le composant du widget et afficher plusieurs widgets dans votre application, vous pouvez convertir l'attribut data-template-id en prop et transférer les différents IDs des modèles que vous voulez utiliser. L'ID du modèle est l'identifiant unique du widget que vous pouvez obtenir dans son code HTML. 

Ajouter un widget TrustBox avec une application Angular

Pour utiliser un widget dans une application Angular :

  1. Insérez le script du widget dans votre application, de préférence dans la balise 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. Créez un composant pour utiliser le widget avec la commande ng g c trustbox.
  3. Dans le fichier du modèle, vous pouvez coller le code HTML du widget et ajouter un attribut id personnalisé dans le <div>. 
    // file: trustbox.component.html
<div    
  id="trustbox"   // notre attribut id personnalisé
  class="trustpilot-widget"
  [ longue liste d'attributs de données...]
>
  <a
href="https://fr.trustpilot.com/review/exemple.fr"
target="_blank"
rel="noopener">
Trustpilot
  </a>
</div>
  4. Dans le Component class, vous devez :
    • Intégrer OnInit.
    • Référencer l'élément que vous avez collé précédemment.
    • Appeler la fonction 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. Utilisez le composant dans l'application où vous voulez afficher le widget.
<app-trustbox></app-trustbox>

Si vous utilisez un framework différent de celui qui est mentionné dans cet article, envisagez d'ajouter un widget TrustBox en utilisant JavaScript et ajustez votre intégration à votre framework.

Le routing dans les applications web monopages

Notre script bootstrapper s'exécute quand la page se charge. Il cherche tous les widgets TrustBox présents sur la page et les charge en fonction de leurs balises HTML. Cependant, la façon dont les différents frameworks des applications web monopages gère le routing est parfois un peu différente, et il n'existe pas de méthode universelle pour nous permettre de détecter si le routing a été modifié.

Par conséquent, notre script bootstrapper ne détecte pas toujours les modifications de routing dans certaines applications web monopages. Par exemple, si vous placez un widget TrustBox dans le routing d'une application web monopage qui s'ouvre à la suite du chargement du script bootstrapper, il est possible que le widget ne se charge pas.

Si cela arrive, utilisez la fonction loadFromElement pour charger le widget quand le routing a été modifié. La fonction loadFromElement attend un élément DOM comme input.

Précédent Présentation des widgets TrustBox

Suivant Widgets TrustBox - FAQ

 

Related articles