TrustBoxar är widgetar som vi har tagit fram för att du enkelt ska kunna visa upp dina betyg och omdömen på din sajt. Du kan lägga till en TrustBox på din webbsida för att visa upp dina senaste omdömen, din TrustScore och ditt stjärnbetyg. I den här artikeln går vi igenom hur du lägger till en widget med JavaScript eller din applikations ramverk.
Lägg till en TrustBox med JavaScript
För att lägga till en widget med JavaScript gör du följande:
- Lägg till widgetens skript i head-taggen i din app.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End TrustBox script -->
- Klistra in widgetens HTML-kod i din app.
- Lägg till en referens i widgetens HTML-element i JavaScript. Du kan till exempel lägga till ett eget
id
-attribut till<div>
.-elementet.<div id="trustbox" class="trustpilot-widget" [ lång lista över dataattribut...]> <a href="https://se.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot </a> </div>
- Referera till widgetens HTML-element och läs in TrustBoxen .
const trustbox = document.getElementById('trustbox'); window.Trustpilot.loadFromElement(trustbox);
Lägg till en TrustBox-widget med en React-applikation
Så här renderar du en widget i en React-applikation:
- Lägg till widgetens skript i head-taggen i din app.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> <!-- End TrustBox script -->
- Skapa en komponent för att rendera widgeten. Du kan antingen använda en klass-komponent eller en funktionell komponent och den nya hooks-API:en från React 16.8 eller nyare versioner.
- I nedanstående exempel används en klass-komponent.
import React, { Component } from 'react'; const TrustBox = ({ trustBoxRef }) => ( <div ref={trustBoxRef} // Vi behöver en referens till detta element för att läsa in TrustBoxen i componentDidMount. className="trustpilot-widget" // Ändra "class" till "className". // [ lång lista över dataattribut...] > <a href="https://se.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() { // Om objektet window.Trustpilot är tillgängligt, ska du använda referensen för att läsa in TrustBoxen. // Om det inte är tillgängligt är skriptet som du satte in i <head />-taggen inte inläst ännu. // När det är tillgänglig kommer Trustboxen läsas in automatiskt. if (window.Trustpilot) { window.Trustpilot.loadFromElement(this.trustBoxRef.current, true); } } render() { return <TrustBox trustBoxRef={this.trustBoxRef} />; } } export default TrustBoxContainer;
- I nedanstående exempel används en funktionell komponent och hooks-API:en från React 16.8 eller nyare.
import React from 'react'; const TrustBox = () => { // Skapa en referens till <div>-elementet, som representerar TrustBoxen. const ref = React.useRef(null); React.useEffect(() => { // Om objektet window.Trustpilot är tillgängligt, ska du använda referensen för att läsa in TrustBoxen. // Om det inte är tillgängligt är skriptet som du satte in i <head />-taggen inte inläst ännu. // När det är tillgängligt kommer Trustboxen läsas in automatiskt. if (window.Trustpilot) { window.Trustpilot.loadFromElement(ref.current, true); } }, []); return ( <div ref={ref} // Du ska använda en referens till detta element för att läsa in TrustBoxen i effect-hook. className="trustpilot-widget" // Ändra "class" till "className". // [ lång lista över dataattribut...] > <a href="https://se.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot </a> </div> ); }; export default TrustBox;
- I nedanstående exempel används en klass-komponent.
Om du vill återanvända widgetens komponent för att rendera flera widgetear i din app, kan du konvertera data-template-id-attributen till en prop och föra vidare de mall-ID som du vill använda. Mall-ID:et är TrustBox-widgetens unika identifierare som du hittar i HTML-koden.
Lägg till en TrustBox med en Angular-applikation
Så här renderar du en widget i en Angular-applikation:
- Lägg till widgetens skript i head-taggen i din app.
<head> <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async> </script> <!-- End TrustBox script --> </head>
- Skapa en komponent för att rendera widgeten med kommandot
ng g c trustbox
. - Klistra in widgetens HTML-kod i mallfilen och lägg till ett eget
id
-attribut i<div>
-elementet.// file: trustbox.component.html <div id="trustbox" // vårt anpassade id-attribut class="trustpilot-widget" [ lång lista över dataattribut...] > <a href="https://se.trustpilot.com/review/example.com" target="_blank" rel="noopener"> Trustpilot </a> </div>
- I Component-klassen behöver du:
- Implementera OnInit.
- Referera till elementet som du infogade tidigare.
- Anropa loadFromElement-funktionen.
// 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); } }
- Rendera komponenten i din app där du vill att widgeten ska visas.
<app-trustbox></app-trustbox>
Om du använder ett annat ramverk, som vi inte går igenom i denna artikel, rekommenderar vi att du lägger till en Trustbox-widget med hjälp av Javascript och anpassar detta till ditt ramverk.
Dirigering i en single-page application
Vårt bootstrap-skript kör när webbsidan laddas. Det söker efter alla TrustBox-widgetar på sidan och laddar dem enligt deras HTML-uppmärkning. Det finns subtila skillnader mellan hur olika ramverk för single-page applications hanterar dirigering, och det finns inget sätt för oss att upptäcka när en dirigering har ändrats.
Detta resulterar i att vårt bootstrap-skript inte alltid upptäcker vägförändringar i vissa single-page applications. Om du t.ex. har placerat en widget på en väg i en single-page application som öppnar efter att bootstrap-skriptet har laddat, kan det hända att widgeten inte laddar.
Om detta händer, använd funktionen loadFromElement
för att ladda widgeten när routen har ändrats. Funktionen loadFromElement
behöver ett DOM-element som input.
Föregående Introduktion till TrustBox-widgetar
Nästa Vanliga frågor om TrustBox-widgetar