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 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> 

Integrating Additional Features to Your On-page Reviews


You can easily add additional features into your On-page Reviews by checking the corresponding box on your ‘service rating’ or ‘product rating’ tab within the On-page Reviews section of the Hub.  


For service reviews you can choose from the following options: 


  • Show media panel 
  • Show replies


For product reviews you can choose from the following options: 

  • Show media panel 
  • Show product attributes 
  • Show replies 

Additional features will only take effect if you have them enabled on your Feefo account. If you want to find out more about adding Photo and Video reviews and Product Attributes to your account, contact our support team or your Customer Success Manager.  


Conclusion


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.