Trustpilot
Use to increase credibility and trust based on the visual representation of the Trustpilot logo, rating and reviews.
Description
When paired with Trustpilot quotes, this component offers an opportunity to demonstrate social proof and support claims about our products and service.
The TrustPilot component can be used as a standalone section. It can also be paired with other content or contained within other components, eg. it can be paired with a heading or contained within the Hero or Trust block, but it cannot contain any other content. It can live in the context of the Third Party Block or inside the Hero component.
Usage
Ensure the component contains the data attribute data-js-trustpilot-api.
API
This component fetches data from the Trustpilot API in order to show the current star rating, trustscore, and number of reviews. To reduce API calls, it stores the API data in localStorage, and only refreshes from the API after one day.
Variants
.trustpilot--small - makes it a bit smaller
.trustpilot--inverse - for use on dark background. make sure you use the inverse trustpilot logo too
.trustpilot--centered - centers the content of the component
Other
The element will automatically be hidden, if the number of stars on Trustpilot is 3 or less. This is so if there is a dramatic drop in the Trustpilot score, at least it won't be advertised on the website.
Logo
The link for the logo is optional - please remove hyperlink from the example markup if not required.
Dynamic elements
To use the information returned from the API, there are 4 dynamic elements that can be used. These are span tags with data attributes on them. When the trustpilot script runs, these tags will be found and replaced with the correct data.
<span data-js-trustpilot-headline-rating data-content-4stars="Great" data-content-5stars="Excellent"></span>- Displays a word which reflects the current star rating. The word displayed must be provided as a data attribute<span data-js-trustpilot-stars></span>- Displays images of stars. This element will be filled with either 4 or 5 image tags, depending on the current star rating.<span data-js-trustpilot-trustscore></span>- Displays the current trustscore<span data-js-trustpilot-review-count></span>- Displays the current number of reviews written
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-trustpilot;Import JS functionality
In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:
import trustpilot from 'radius/dist/m2dm/js/trustpilot';
trustpilot().start(); Usage
Usage example
Default size
Small size
Alternative layout, default size
The Trustscore for fundingcircle.com is /10 based on reviews
Alternative layout, small size
The Trustscore for fundingcircle.com is /10 based on reviews
Default size, inverse variant
Default size, centered
<div class="trustpilot" data-js-trustpilot-api>
<div class="trustpilot__row">
<div class="trustpilot__headline-rating">
<span data-js-trustpilot-headline-rating data-content-4stars="Great" data-content-5stars="Excellent"></span>
</div>
<div class="trustpilot__star-group" data-js-trustpilot-stars></div>
</div>
<div class="trustpilot__row">
<a href="https://uk.trustpilot.com/review/fundingcircle.com" target="_blank" rel="noopener">
<img class="trustpilot__tp-logo" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/trustpilot/tplogo.svg" alt="Trustpilot">
</a>
<div class="trustpilot__review-count trustpilot__review-count--with-divider">
<span data-js-trustpilot-review-count></span> reviews
</div>
</div>
</div>