This article defines how to install the Service Review Carousel into a website and looks at its various options.
The Service Review Carousel is an excellent way of displaying several Feefo reviews in a limited space. It is simple to add and offers several different display options depending on your needs.
The following example shows a typical Service Review Carousel integrated within a merchant's website:
The Service Review Carousel needs just two lines of code added to your HTML:
The first line of code is a <script> tag. It should be added as close to the closing <body> tag as possible:
- merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier. Your merchantidentifier can be found in the Feefo Administration Portal; see Where to find my merchant identifier?
In a similar way, to take advantage of sales tags (not product tags) for selecting the feedback, the script can be appended with one or more tags of interest. For example:
- merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier.
- The second line of code, a <div> tag, determines the location of the carousel. Its position within the HTML code will define its display location on the page.
<div id="feefo-service-review-carousel-widgetId" class="feefo-review-carousel-widget-service"></div>
Once the code is added to the page, the carousel will be displayed using its defaults, however, there are several customisation options available through the Feefo Administration Portal under 'Settings > Integration Preferences > Service Review Carousel'. Full details for each option are shown below.
First, select your carousel template. We offer 3 templates:
- Single Review - This shows just a single review at a time, with the 5 most recent reviews that meet the display criteria being shown on a rotating carousel. A link to see all reviews is included which when clicked will display all of your service reviews (see Read All Reviews).
- Snapshot - This option displays the 3 most recent reviews which meet the display criteria. Additional reviews can be accessed by clicking the right-hand arrow or by clicking the link to Read All Reviews.
- Average Customer Rating - This is the default option which displays the 4 most recent reviews which meet the display criteria. Additional reviews can be accessed by clicking the right-hand arrow or by clicking the link to Read All Reviews.
Next, decide which reviews will be displayed in the carousel. We offer a filter that uses the star rating to determine which reviews are displayed in the carousel:
Do you want a border around the carousel or not? Both options are available, for example:
- The average rating carousel without border (the default) is displayed as:
- The average rating carousel with a border is displayed as:
The carousel can either have a white background (the default) or if preferred, it can have a transparent background so that the carousel will be overlaid on top of any background colour or image on the web page allowing the background to be seen behind the carousel.
Providing customers with the ability to 'Read All reviews' is an important feature of each carousel but you can decide how it will work for your customers. The default is to display a lightbox that pops up over the current view in a similar way to the Lightbox Integration but, if preferred, you can define the link so that it takes customers to your Feefo Merchant Page.
You can also configure how the carousel will appear on mobile devices. The options are similar to the ones already described above except due to the limited screen size on mobiles, the carousel template cannot be changed. This means that whichever carousel template is chosen in the first step above, the result will always be just a single review on mobile devices. Options are to have the carousel on mobiles without a border (the default) or with one, and it can also be configured to be a white (the default) or transparent version:
- Without a border:
- With a border:
Once you are happy with the configuration, click on 'Save Integration Settings'. Refresh the web page where the carousel is integrated to see the updated carousel.
And finally, you may wish to consider the timeframe over which the reviews are sourced for displaying in the carousel. This can be defined in 'Settings > Integrations Preferences > General Settings > Service - Rating Timeframe':
- Our recommended option, and the default, is to 'Show Reviews Only For The Past Year'. This means that all reviews displayed on the carousel will be less than 1 year old and so will contain fresh content that most customers will find relevant.
- The alternative option is 'All Reviews'. If you have only received a small number of reviews in the past year, this option can provide a greater selection of reviews but as they will be sourced from data that could be have been created a long time ago, the reviews may not be as helpful for future customers as the more recent reviews.
- After making your choice, click 'Save Settings'.
- Again refresh the web page where the carousel is integrated to see the updated carousel.