Adding a Rating Score Badge to Your Website

TABLE OF CONTENTS

• Introduction
• Recommendations
• How to install the Badge Reviews widget on your website
• Customising Your Badge Reviews Widget 
• Summary

 

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.

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 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/feefo-com">
</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.'

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.

 

Badge Tab

 

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.