Ajouter une TrustBox à une application web monopage

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 une caractéristique id personnalisée dans le <div>.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [ longue liste de caractéristiques de donnés...]>
    <a 
      href="https://www.trustpilot.com/review/example.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 (component) pour utiliser la TrustBox. Il existe deux manières de procéder : en utilisant 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 de caractéristiques de données...]
        >
      <a
        href="https://fr.trustpilot.com/review/example.com"
        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" // Ceci a été renommé className.
       // [ longue liste de caractéristiques de données...]
      >
        <a href="https://fr.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Si vous voulez réutiliser le composant de la TrustBox et utiliser plusieurs TrustBoxs dans votre application, vous pouvez convertir la caractéristique 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 d'intégration et ajoutez une caractéristique id personnalisée au <div>.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // notre caractéristique id personnalisée
      class="trustpilot-widget"
      [ longue liste de caractéristiques de données...]
    >
      <a
    href="https://fr.trustpilot.com/review/example.com"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. Dans la classe Component, vous devez :
    • Intégrer OnInit.
    • Obtenir une référence à 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.