TABLE OF CONTENTS

Introduction


Feefo's Pop-up Reviews widget offers an effective solution for businesses seeking to showcase live service and product reviews directly to their website visitors without the need for a separate 'Reviews' page. 




While it may not provide SEO benefits like 'On-Page' review integrations, the Pop-up Reviews widget ensures customers can view reviews conveniently in a separate pop-up window, encouraging them to stay longer on your site and increasing the likelihood of making a purchase. In this knowledge base article, we will guide you through the process of installing and customising the Pop-up Reviews widget on your website.


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


Implementing the Pop-up 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 'Pop-up 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" async> </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.

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


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 

<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 


Feefo offers several customization options for both Service and Product reviews within the Pop-up Reviews widget. To begin customising, log in to the Feefo Hub and navigate to 'Marketing > Pop-up Reviews.'


Service Reviews 


You can choose the template, color, position, and other display options for the Service reviews pop-up. 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 pop-up 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 the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following: 
    • Inline (default) 
    • Fixed
  6. Click the ‘Show replies’ check box to choose whether or not to display your public replies 
  7. Click the ‘Show media panel’ check box to select whether or not to display photo and video reviews 
  8. 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
  9. 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


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 pop-up 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 pop-up 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 the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following: 
    • Inline (default) 
    • Fixed 
  7. Click the ‘Show replies’ check box to choose whether or not to display your public replies 
  8. From the ‘Lightbox options’ click the ‘Show media panel’ and ‘Enable attribute ratings panel’ checkboxes to select whether or not to display these features 
  9. 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 
  10. 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
  11. 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. 

Conclusion


Feefo's Pop-up Reviews widget provides businesses with an excellent solution for displaying live service and product reviews directly to website visitors. By following the installation and customisation instructions, businesses can enhance customer engagement, extend time on site, and increase the likelihood of conversions. Implementing Feefo's Pop-up Reviews widget allows businesses to harness the power of user-generated content and provide a compelling customer experience.