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

Dieses Feature ist im Free-Paket enthalten.

Los geht’s!

TrustBoxes sind Widgets von Trustpilot, die Sie in Ihre Website einbinden können, um Ihre neuesten Bewertungen, Ihren TrustScore und Ihre Sterne zu präsentieren. Die folgenden Anleitungen beschreiben, wie Sie ein Widget in Ihrer Single-Page-Webanwendung hinzufügen können, indem Sie JavaScript oder das für Ihre Anwendung relevante Framework verwenden.

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

Um ein Widget mit JavaScript hinzuzufügen, gehen Sie so vor:

  1. Fügen Sie das Widget-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 den Widget-HTML-Code in Ihre Anwendung ein.
  3. Fügen Sie einen Verweis auf das Widget-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 Widget-HTML-Element und laden Sie das Widget.
const trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);

So fügen Sie ein TrustBox-Widget in einer React-Anwendung hinzu

Um ein Widget in einer React-Anwendung einzusetzen, gehen Sie so vor:

  1. Fügen Sie das Widget-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 des Widgets. Hierfür gibt es zwei Möglichkeiten: durch die Verwendung einer Klassen-Komponente 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 der React-Version 16.8 oder neuer:
      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 Widget-Komponente wiederverwenden und mehrere Widgets 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 des TrustBox-Widgets – Sie finden sie im HTML-Code des Widgets. 

So fügen Sie ein TrustBox-Widget in einer Angular-Anwendung hinzu

Um ein Widget in einer Angular-Anwendung einzusetzen, gehen Sie so vor:

  1. Fügen Sie das Widget-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 des Widgets mit dem Befehl ng g c trustbox.
  3. Fügen Sie den Widget-HTML-Code in die Vorlagendatei ein und ein benutzerdefiniertes id-Attribut in das <div>-Element.
    // 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 Sie 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 das Widget 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 das TrustBox-Widget hinzuzufügen, und nehmen Sie entsprechende Anpassungen an Ihr Framework vor.

Routing in Single-Page-Webanwendungen

Unser Bootstrapper-Skript wird ausgeführt, wenn die Seite geladen wird. Es sucht nach allen TrustBox-Widgets 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 es gibt 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 ein Widget in einer Route einer Single-Page-Anwendung platzieren, die nach dem Laden des Bootstrapper-Skripts geöffnet wird, wird das Widget u. U. nicht geladen.

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

Zurück Einführung in TrustBox-Widgets

Weiter Häufig gestellte Fragen zu TrustBox-Widgets