Our Pop-up Reviews widget is the perfect solution for having a live feed of all your service and product reviews available to visitors, without needing to create a separate ‘Reviews’ page on your site. 


Although it has no SEO benefits when compared with our ‘On-Page’ review integrations, allowing customers to view your reviews in a separate pop-up window ensures they stay on your site for longer and increases the likelihood of them making a purchase.  


How to install the Pop-up Reviews widget on your website 


Implementing a Pop-up Reviews widget is relatively straight-forward and only requires you to copy and paste two short pieces of JavaScript code in the footer of the HTML for your chosen page.  


Best of all, knowledge of JavaScript is not required for this integration method as we take care of all that for you! 


Each line of code will be unique to your account and customisation choices. It will automatically generate within the ‘Pop-up Reviews’ section of the Hub once you’ve chosen all of your customisation options. 


Feefo script 


The first line of code you’re going to need is a <script> tag. It should be added to the HTML of your chosen page as close to the closing <body> tag as possible (in the footer is ideal). The tag’s position within the code does not determine the position of the Feefo badge – that comes later.  


Example code 

<script type="text/javascript"  

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

Adding Sales & Product Tags

You can add your sales and product tags to the Feefo script code by following the format bel


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 the following line of code into your webpage’s HTML: 


<div id="feefologohere"></div> 


Product reviews 

To have your desired product reviews appear you need to copy and paste the badge code, including the product search code, in the location where you want the badge to show up. 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. 

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


Example code for single product SKU 

<div id="feefologohere" data-product-sku="my_product_sku"></div>


Example code for parent product SKU 

<div id="feefologohere" data-parent-product-sku="my_parent_product_sku"></div>


Customising your Pop-up Reviews widget 


Once the code has been added to your webpage, the pop-up will automatically display using the default setup. However, there are several customisation options available through the Feefo Hub. 


To get started on customising your pop-up, login to the Feefo Hub and head to ‘Marketing > Pop-up Reviews’. 


Service reviews 


Click the ‘Service Rating’ tab  

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’ 

To install a combined product and service ratings badge, when selecting your template scroll to the bottom and select the ‘Combined Stars’ option. 

 

  1. Select the 'Colour' of your pop-up from the following options: 

  • White (default) 
  • Grey 
  • Yellow 


  1. Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected 

  1. Choose the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following: 


  • Inline (default) 
  • Fixed 


  1. Click the ‘Show replies’ check box to choose whether or not to display your public replies 

  1. Click the ‘Show media panel’ check box to select whether or not to display photo and video reviews 

  1. Choose whether or not your pop-up 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 


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 Pop-up Reviews on your website’ section. 

 

Product reviews 


Click the ‘Product Rating’ tab  

  1. 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’ 

To install a combined product and service ratings badge, when selecting your template scroll to the bottom and select the ‘Combined Stars’ option. 


Select the 'Colour' of your pop-up from the following options: 


  • White (default) 
  • Grey 
  • Yellow 


  1. Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected 

  1. Choose the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following: 


  • Inline (default) 
  • Fixed 


  1. Click the ‘Show replies’ check box to choose whether or not to display your public replies 

  1. From the ‘Lightbox options’ click the ‘Show media panel’ and ‘Enable attribute ratings panel’ checkboxes to select whether or not to display these features 


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


  1. Choose whether or not your pop-up 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 


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 Pop-up Reviews on your website’ section.