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.

Implementing a Service Review Carousel involves adding a reference to a JavaScript tag in the source of your web page. The JavaScript content is hosted by Feefo and sent to a client browser on request. The URL for the source of the JavaScript passes your merchant identifier as a parameter allowing the Feefo server to supply the correct content to the user. Knowledge of JavaScript is not required for this integration method as it is all taken care of by Feefo.

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:

  1. The first line of code is a <script> tag. It should be added as close to the closing <body> tag as possible:   

    <script type="text/javascript" src="https://api.feefo.com/api/javascript/merchantidentifier" async></script>

    Where:

    • merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier. Your merchant identifier can be found in the Feefo Hub; see Where to find my merchant identifier? 
  2. 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:  

    <script type="text/javascript" src="https://api.feefo.com/api/javascript/merchantidentifier?tags=language%3DEnglish,store%3DLondon" async></script>
        Where:          
    • merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier.
    • tags identify the sales tag ‘key value’ pairs to be included, in this case, where the sale has the tags 'language' with a value of 'English' AND 'store' with the value 'London'. Note the use of the URL encoded equals symbol of %3D between the key and the value and a comma between each ‘key value’ pair. Where several ‘key value’ pairs are listed in the JavaScript call, only those sales that have all of the listed ‘key value’ pairs will be selected. A full list of available sales tags can be viewed in the Sales And Product Tags.
  3. 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 Hub under 'Marketing > 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 Reviews 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. Options are to have the carousel without a border (the default) or with one, and it can also be configured to be a white (the default) or transparent version. However, due to the small screen size, the carousel template content on mobiles cannot be changed, showing only the Feefo rating and the number of reviews.:

  • Without a border:
  • With a border:

Once you are happy with the configuration, click on 'Save 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 'Marketing > Widgets Gallery > 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.