Comment ajouter une TrustBox à une application web monopage

Cette fonctionnalité est incluse dans le pack Free.

C'est parti !

En fonction de la manière dont vous créez votre application, ajoutez une TrustBox en utilisant JavaScript dans le framework pertinent de votre application.

Ajouter une TrustBox avec JavaScript

Pour ajouter une TrustBox avec JavaScript :

  1. Entrez 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 l'extrait 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"
      [ long list of data attributes...]>
    <a 
      href="https://fr.trustpilot.com/review/exemple.com" 
      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);

Applications 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 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 (requiert la version 16.8 ou ultérieure de React).
      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.com" 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 la page de configuration de l'application Trustpilot Business.

Applications 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, copiez l'extrait de code de la page et ajoutez un attribut id personnalisé au <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.com"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. Dans la classe Component, vous devez :
    • Intégrer OnInit.
    • Référencer l'élément que nous avons 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.

Les TrustBoxs et 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 malheureusement pas de procédure générale 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.