So setzen Sie ein TrustBox-Widget in eine Single-Page-Webanwendung ein

Abhängig davon, wie Sie Ihre Webanwendung erstellen, können Sie JavaScript oder das für Ihre Anwendung relevante Framework verwenden, um ein TrustBox-Widget hinzuzufügen.

So fügen Sie ein TrustBox-Widget mit JavaScript hinzu

Um eine TrustBox mit JavaScript hinzuzufügen, gehen Sie so vor:

  1. Fügen Sie das TrustBox-Skript in Ihre Anwendung ein, am besten in das head-Tag.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Fügen Sie das TrustBox-HTML-Snippet in Ihre Anwendung ein.
  3. Fügen Sie einen Verweis auf das TrustBox-HTML-Element in JavaScript hinzu. Sie können z. B. ein benutzerdefiniertes id-Attribut in das <div>-Element einfügen.
    <div
      id="trustbox"
      class="trustpilot-widget"
      [lange Liste von Datenattributen ...]>
    <a 
      href="https://de.trustpilot.com/review/beispiel.de" 
      target="_blank" 
      rel="noopener">
      Trustpilot
    </a>
    </div>
    
  4. Verweisen Sie auf das TrustBox-HTML-Element und laden Sie die TrustBox.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

React-Anwendungen

Um eine TrustBox in einer React-Anwendung einzusetzen, gehen Sie so vor:

  1. Fügen Sie das TrustBox-Skript in Ihre Anwendung ein, am besten in das head-Tag.
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
    
  2. Erstellen Sie eine Komponente zum Rendern der TrustBox. Hierfür gibt es zwei Möglichkeiten: durch die Verwendung einer Klassen-Kompontente oder die Verwendung einer funktionalen Komponente und der neuen Hooks-API der React-Version 16.8 oder neuer.
    • Hier ein Beispiel mit einer Klassen-Komponente:
      import React, { Component } from 'react';
      const TrustBox = ({ trustBoxRef }) => (
        <div
      ref={trustBoxRef} // Wir benötigen einen Verweis auf dieses Element, um die TrustBox in componentDidMount zu laden.
      className="trustpilot-widget" // Hier wurde „class“ in „className“ umbenannt.
      // [lange Liste von Datenattributen ...]
        >
      <a
        href="https://de.trustpilot.com/review/beispiel.de"
        target="_blank"
        rel="noopener noreferrer"
      >
        Trustpilot
      </a>
        </div>
      );
      class TrustBoxContainer extends Component {
        constructor(props) {
      super(props);
      this.trustBoxRef = React.createRef();
        }
        componentDidMount() {
      // Wenn window.Trustpilot verfügbar ist, bedeutet dies, dass wir die TrustBox aus unserem Verweis laden müssen.
      // Wenn es nicht verfügbar ist, bedeutet dies, dass das Skript, das Sie in das <head />-Tag eingefügt haben, noch nicht geladen ist.
      // Sobald es dies ist, lädt es automatisch die TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(this.trustBoxRef.current, true);
      }
        }
        render() {
      return <TrustBox trustBoxRef={this.trustBoxRef} />;
        }
      }
      export default TrustBoxContainer;
      
    • Hier ein Beispiel mit einer funktionalen Komponente und der Hooks-API von React (unterstützt ab der React-Version 16.8):
      import React from 'react';
      const TrustBox = () => {
        // Erstellen Sie einen Verweis auf das <div>-Element, das die TrustBox darstellt.
        const ref = React.useRef(null);
        React.useEffect(() => {
      // Wenn window.Trustpilot verfügbar ist, bedeutet dies, dass wir die TrustBox aus unserem Verweis laden müssen.
      // Wenn es nicht verfügbar ist, bedeutet dies, dass das Skript, das Sie in das <head />-Tag eingefügt haben, noch nicht geladen ist.
      // Sobald es dies ist, lädt es automatisch die TrustBox.
      if (window.Trustpilot) {
        window.Trustpilot.loadFromElement(ref.current, true);
      }
        }, []);
        return (
      <div
        ref={ref} // Wir benötigen einen Verweis auf dieses Element, um die TrustBox im Effect-Hook zu laden.
       className="trustpilot-widget" // Hier wurde „class“ in „className“ umbenannt.
       // [lange Liste von Datenattributen ...]
      >
        <a href="https://de.trustpilot.com/review/beispiel.de" target="_blank" rel="noopener"> Trustpilot
        </a>
      </div>
        );
      };
      export default TrustBox;
      

Falls Sie die TrustBox-Komponente wiederverwenden und mehrere TrustBoxes in Ihrer Anwendung rendern möchten, können Sie das data-template-id-Attribut in ein Prop konvertieren und die verschiedenen Vorlagen-IDs, die Sie verwenden möchten, übergeben. Die Vorlagen-ID ist der eindeutige Identifikator der TrustBox – Sie erhalten sie auf der Konfigurationsseite in Ihrem Trustpilot-Business-Account.

Angular-Anwendungen

Um eine TrustBox in einer Angular-Anwendung einzusetzen, gehen Sie so vor:

  1. Fügen Sie das TrustBox-Skript in Ihre Anwendung ein, am besten in das head-Tag.
    <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. Erstellen Sie eine Komponente zum Rendern der TrustBox mit dem Befehl ng g c trustbox.
  3. Kopieren Sie das Code-Snippet von der TrustBox-Konfigurationsseite in Ihrem Trustpilot-Business-Account in die Vorlagendatei und fügen Sie ein benutzerdefiniertes id-Attribut in das <div>-Element ein.
    // file: trustbox.component.html
    <div    
      id="trustbox"   // unser benutzerdefiniertes id-Attribut
      class="trustpilot-widget"
      [lange Liste von Datenattributen ...]
    >
      <a
    href="https://de.trustpilot.com/review/beispiel.de"
    target="_blank"
    rel="noopener">
    Trustpilot
      </a>
    </div>
    
  4. In der Component-Klasse müssen Sie:
    • OnInit implementieren,
    • auf das Element verweisen, das wir zuvor eingefügt haben, und
    • die Funktion loadFromElement aufrufen.
    // 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. Rendern Sie die Komponente an der Stelle in Ihrer Anwendung, an der die TrustBox angezeigt werden soll.
<app-trustbox></app-trustbox>

Bitte beachten: Wenn Sie für Ihre Anwendung ein anderes Framework verwenden, das hier nicht behandelt wird, ziehen Sie in Betracht, JavaScript zu verwenden, um die TrustBox hinzuzufügen, und nehmen Sie entsprechende Anpassungen an Ihr Framework vor.

TrustBoxes und Routing in Single-Page-Webanwendungen

Unser Bootstrapper-Skript wird ausgeführt, wenn die Seite geladen wird. Es sucht nach allen TrustBoxes auf der Seite und lädt sie auf Grundlage ihres HTML-Markups. Wie verschiedene Frameworks von Single-Page-Anwendungen das Routing handhaben, ist jedoch mitunter etwas unterschiedlich, und leider gibt es für uns kein allgemeines Verfahren zur Erkennung von Routenänderungen.

Dies führt dazu, dass unser Bootstrapper-Skript Routenänderungen in manchen Single-Page-Anwendungen nicht immer erkennen kann. Wenn Sie beispielsweise eine TrustBox in einer Route einer Single-Page-Anwendung platzieren, die nach dem Laden des Bootstrapper-Skripts geöffnet wird, wird die TrustBox u. U. nicht geladen.

Verwenden Sie in diesem Fall die Funktion loadFromElement, um die TrustBox zu laden, wenn eine andere Route vorliegt. Die loadFromElement-Funktion erwartet als Input ein DOM-Element.