Skip to content
Raise a ticket
  • There are no suggestions because the search field is empty.

Score Badge

TABLE OF CONTENTS

 

Introduction

Feefo's Score Badge offers a simple integration technique to display Feefo rating badges on merchant websites, providing customers with easy access to the merchant's review page on the Feefo website. This article introduces the Score Badge integration, which falls under Feefo's 'Light' Integration category due to its straightforward implementation and limited SEO benefits. By incorporating the Feefo badge into their website, merchants can showcase their current service and/or product ratings, enhancing their credibility and customer trust. This article explores the process of implementing and customising the Score Badge integration.


Recommendations

Feefo recommends that the integration link opens a new window to the Feefo site so that the merchant’s site remains open in the customer’s browser - The examples shown below will do this however merchants may wish to customise the code.

When choosing this method, the Feefo badge carries our branding but has dynamic elements that show your current service and/or product rating given as a star rating and optionally, a review count.

Note that the dynamically generated images are cached and so the dynamic content updates about once an hour to reduce server load. 

The language of the badge is configured automatically by reading the viewer's default locale from their web browser and then loading the appropriate localised content to the badge.

Feefo has many badges available to choose from with a variety of styles, colours, layouts and width/height combinations. The full list split between service only and product only badges, can be viewed at Feefo Badges and configured using the interactive badge selector

  1. Go to Feefo Hub
  2. Click 'Display > Score Badge'. 
The ratings will be calculated by looking back at up to one year's worth of reviews but if you'd like this to be different, the setting can be modified by Feefo's Support Team.

 

How to enable Widgets 2.0 via Hub Toggle

  1. Go the ‘Display’ tab in the Hub, and select ‘Widget Gallery'.

  2. Click the toggle in the top-right corner to enable the new widgets.

    Tip: Hover over the info icon next to the toggle for more details.

  3. A confirmation modal will appear. Click ‘Confirm’ to proceed.

  4. Once confirmed, a success banner will appear, letting you know the new widgets are enabled.

  5. Your updated on-page widget will now display wherever it has been implemented on your site.

Need to go back? You can return to the original widgets at any time by toggling the switch off again.

 

How to install the Score Badge Reviews widget on your website

Implementing the Score Badge Reviews widget is straightforward, requiring you to copy and paste two short pieces of JavaScript code into the footer of your chosen page's HTML. The process is hassle-free, as Feefo takes care of the JavaScript configuration for you. The code will be unique to your account and customisation choices, automatically generated within the 'Score Badge Reviews' section of the Feefo Hub.

 

Feefo script 


The first line of code you need is a <script> tag, which should be added to the HTML of your chosen page near the closing <body> tag (in the footer). The tag's position in the code doesn't affect the Feefo badge's placement; that will be determined later.

Example code 

<script type="text/javascript" src="https://api.feefo.com/api/javascript/{merchantIdentifier}"></script>

 

Adding Sales & Product Tags

You can easily add your sales and product tags to the Feefo script code using the provided format. This allows you to filter and display specific review data on your website, enhancing the customer experience.

Example code 

<script type="text/javascript" 

src="https://api.feefo.com/api/javascript/merchantidentifier?tags=language%3DEnglish,store%3DLondon" async> </script> 

 

Badge code


Copy and paste the badge code in the location where you want the badge to show up.  


If a fixed floating location is defined, the <div> tag is required but its position in the code is not important. 

If a fixed floating location is not defined, the <div> tag's position in the code determines the location of the Feefo badge. 

 

Service reviews  


For service reviews, insert a specific line of code into your webpage's HTML to display the Feefo badge in the desired location.

<feefo-score-badge></feefo-score-badge>

 

Product Reviews 


For product reviews, you can display either the rating for the product SKU or the rating for the parent product SKU. The badge code for both options is provided, and you can replace the 'product-search-code' with your actual product search code.

Example code for single product SKU 

<feefo-score-badge sku="{productSku}"></feefo-score-badge>

Example code for parent product SKU 

<feefo-score-badge data-parent-product-sku="my_parent_product_sku"></feefo-score-badge>

 

Customising Your Badge Reviews Widget 

Feefo offers several customisation options for both Service and Product reviews within the Badge Reviews widget. To begin customising, log in to the Feefo Hub and navigate to 'Display > Score Badge Reviews.'

 

Service Reviews 

You can choose the template, colour, position, and other display options for the Service reviews badge. Once satisfied with the configuration, save the settings, and copy the unique codes for the Feefo script and badge, pasting them into your website's HTML.

  1. Click the ‘Service Rating’ tab  
  2. Choose your template by clicking on the preview image shown and selecting from: 
    • ‘Service Stars – Rectangle’  
    • ‘Service Stars – Independent’ 
    • ‘Service Stars – Square’ 
    • ‘Simple Service Stars’ 
  3. Select the 'Colour' of your badge from the following options: 
    • White (default) 
    • Grey 
    • Yellow 
  4. Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected 
  5. Choose whether or not your badge displays on mobile by selecting from the following options: 
    • Use a different badge (customise new mobile badge below using the same set-up as above) 
    • Hide badge on mobile 
    • Use the same badge on mobile
  6. Once you’re happy with the configuration, click on 'Save Settings'.  

Your unique codes will have generated in the 'Feefo Script’ and ‘Badge Code’ text boxes. Copy and paste these directly into your website’s HTML using the instructions in the above ‘How to install badge Reviews on your website’ section. 

 

Product reviews

For Product reviews, you can select the template, color, position, and display options. Additionally, you can choose how to handle products with no reviews. Save the settings and copy the unique codes to integrate the customised badge on your website.

  1. Click the ‘Product Rating’ tab  
  2. Choose your template by clicking on the preview image shown and selecting from: 
    • ‘Product Stars – Rectangle’  
    • ‘Product Stars – Independent’ 
    • ‘Product Stars – Square’ 
    • ‘Simple Product Stars’
  3. To install a combined product and service ratings badge, when selecting your template scroll to the bottom and select the ‘Combined Stars’ option. 
  4. Select the 'Colour' of your badge from the following options:
    • White (default) 
    • Grey 
    • Yellow 
  5. Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected 
  6. Choose from the following options if your product has no reviews: 
    • Show my service badge instead 
    • Hide my product badge 
    • Hide my product badge, but preserve layout 
  7. Choose whether or not your badge displays on mobile by selecting from the following options: 
    • Use a different badge (customise new mobile badge below using the same set-up as above) 
    • Hide badge on mobile 
    • Use the same badge on mobile
  8. Once you’re happy with the configuration, click on 'Save Settings'.  

Your unique codes will have generated in the 'Feefo Script’ and ‘Badge Code’ text boxes. Copy and paste these directly into your website’s HTML using the instructions in the above ‘How to install Badge Reviews on your website’ section. 

Summary

Feefo's Score Badge integration provides a simple and effective way for merchants to display their Feefo rating badges on their websites. By incorporating the Score Badge, merchants can give customers easy access to their Feefo review page, thereby enhancing transparency and building trust. This 'Light' Integration technique allows merchants to showcase their current service and product ratings dynamically. By following the implementation and customisation guidelines in this article, merchants can seamlessly integrate the Feefo Score Badge into their websites, improving their online reputation and customer engagement. For additional customisation and support, Feefo's Support Team is available to assist merchants in optimising their Score Badge integration.