​Ajouter une TrustBox à une application web monopage

Cette fonctionnalité est incluse dans le pack Free.

C'est parti !

Les TrustBoxs sont les widgets de Trustpilot. 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 une TrustBox en utilisant JavaScript ou le framework pertinent de votre application.

Ajouter une TrustBox avec JavaScript

Pour ajouter une TrustBox avec JavaScript :

  1. Insérez le script de la TrustBox 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 de la TrustBox dans votre application.
  3. Ajoutez une référence à l'élément HTML de la TrustBox 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 de la TrustBox et chargez la TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

Ajouter une TrustBox avec une application React

Pour utiliser une TrustBox dans une application React :

  1. Insérez le script de la TrustBox 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 la TrustBox. 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 de la TrustBox et afficher plusieurs TrustBoxs 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 de la TrustBox que vous pouvez obtenir dans son code HTML. 

Ajouter une TrustBox avec une application Angular

Pour utiliser une TrustBox dans une application Angular :

  1. Insérez le script de la TrustBox 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 la TrustBox avec la commande ng g c trustbox.
  3. Dans le fichier du modèle, vous pouvez coller le code HTML de la TrustBox 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 la TrustBox.
<app-trustbox></app-trustbox>

Remarque : si vous utilisez un framework différent de celui qui est mentionné dans cet article, envisagez d'ajouter une 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 toutes les TrustBoxs présentes 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 une TrustBox dans le routing d'une application web monopage qui s'ouvre à la suite du chargement du script bootstrapper, il est possible que la TrustBox ne se charge pas.

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