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

On-Page Reviews

TABLE OF CONTENTS

 

Introduction

Integrating user-generated content into your website can significantly enhance customer engagement and boost sales potential. Feefo's On-page Reviews widget offers an ideal solution for businesses with limited development resources, allowing them to effortlessly display live product and service reviews directly on their website. In this knowledge base article, we will guide you through the installation process of On-page Reviews and explore various customisation options to optimise the display of reviews on your site.

 

How to enable Widgets 2.0 via Hub Toggle

  1. Go the ‘Marketing’ 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 customise On-page Reviews

The On-Page Widget gives you flexibility to customise how your product or service reviews are displayed directly on your website. Use this guide to tailor the widget’s design, layout, and content to suit your brand and enhance customer experience.

Preview Options

Use the Preview Screen to visualise your widget on both laptop and mobile devices.
You can enter a Product SKU or Parent SKU to preview how the widget would appear for specific products or groups.
If no reviews have been collected yet, dummy data will be displayed to simulate the final appearance.

Design Customisation

Tailor the visual elements of your widget to align with your brand:

  • Attribute Colour: Choose a #hex value to match your brand’s attribute colour.

  • Highlight Colour: Pick a #hex value for highlights (e.g., hover states or section headers).

  • Average Rating Banner Stars: Select between light or dark stars styled in the Feefo brand.

  • Individual Rating Stars:

    • Choose between Feefo stars or Basic stars

    • Customise star colour using a #hex value.


AI Summary (Paid Feature)

If you're using our AI Summary feature, you can control what content is shown:

Product/Service Reviews

  • Show Topics

  • Show Snippets

  • Choose to display them separately or as part of the main review content.


Media

  • Show All Media: Toggle to show or hide customer-uploaded media.


Attributes Display Settings

Choose how product and service attributes appear in the widget:


Product/Service Attributes Display Mode

  • Show all attributes

  • Show aggregated attributes only (averaged across reviews)

  • Show in reviews only (unique to each review)

  • Show no attributes

You can also enable or disable specific custom attributes, such as Sizing Attribute.

 

Icons and Badges

Add credibility and visual appeal with these additional icons:

  • Trusted Service Awards

  • Ecolabels

  • Treefo

Note: If any option is greyed out, please contact your Customer Success Manager to discuss activation.


Final Steps

Once your changes are complete:

  • Click Save and Apply to push updates live to your site.

 

How to Install On-page Reviews

To get started with On-page Reviews,

  1. Log in to the Feefo Hub. 
  2. Navigate to 'Marketing > On-page Reviews.' 
  3. Install either 'service' or 'product' reviews on your website by adding a few simple lines of code to your website's HTML. The code is unique to your account and customisations, automatically generated within the 'On-page Reviews' section of the Hub.

To install your On-page Reviews copy and paste the code from the ‘Feefo Script’ text box into your website's HTML code, as close to the closing <body> tag as possible. 

Example code 

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

 

Adding Sales and Product Tags to Your On-page Reviews 


You can easily add sales and product tags to the 'Feefo Script' code by following the provided format. These tags allow you to filter and display specific review data on your website. Simply copy and paste the code from the 'On-page Reviews code' text box into your website's HTML at the desired location.

Example code 

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

To determine the location of your On-page Reviews, copy and paste the code from the ‘On-page Reviews code’ text box into your website’s HTML in the exact location where you want them to appear.  

For service reviews, use the following code: 

<div id="feefo-service-review-widgetId" class="feefo-review-widget-service"></div>

For product reviews, either the rating for the product SKU or the rating for the parent product SKU can be displayed.

For example, if you have separate SKUs for different colours of the same shirt (product), you may want to display the overall rating for the shirt (in every colour) (i.e. the parent product) instead. 

For product SKU, use the following code:  

<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-product-sku="product-search-code"></div>

Make sure you replace ‘product-search-code’ with your actual Product Search Code. 

For parent product SKU, use the following code: 

<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-parent-product-sku="my_parent_product_ref"></div>

Make sure to replace the ‘my_parent_product_ref’ with your actual Parent Product Ref.  

 

Choosing a Widget Title


For added customisation, you can specify a title for your on-page product review widgets. This enables you to change the name that appears above the star rating on the widget to suit your preferences. Use the provided line of code and replace 'my_product_ref' with your actual Parent Product Ref.

<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-product-sku="my_product_ref"data-widget-title="My Product Title"></div>

 

Adding a Separate Product Ratings Badge


With the On-page Reviews integration, you have the option to display your product ratings separately using a product ratings badge. This badge showcases the star rating, number of reviews, and the Feefo logo for your chosen product, redirecting users to your full list of product or service reviews when clicked.

To install your product ratings badge login to the Hub and head to ‘Marketing > ‘On-page Reviews’ > ‘Product Rating’ 

Copy the code from the ‘Product Stars Code’ text box into your website’s HTML in the location that you want the product ratings badge to appear 

An example of the ‘Product Stars Code’ can be found below: 

<div class="feefo-review-badge-wrapper-product"></div> 

 

Summary

Feefo's On-page Reviews widget is a valuable tool for businesses seeking to display fresh user-generated content directly on their websites. By following the installation guide and leveraging the various customisation options, businesses can create dedicated 'Reviews' pages and provide visitors with easy access to trending themes and positive feedback. Utilising On-page Reviews effectively enhances the customer journey, increases engagement, and drives conversions, ultimately contributing to the success of the business.