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.
Select the 'Colour' of your pop-up from the following options:
- White (default)
- Grey
- Yellow
Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected
Choose the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following:
- Inline (default)
- Fixed
Click the ‘Show replies’ check box to choose whether or not to display your public replies
Click the ‘Show media panel’ check box to select whether or not to display photo and video reviews
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
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
Choose the size of the score badge. The dimensions will differ depending on the template you’ve selected
Choose the ‘Position’ that your pop-up will appear once a user interacts with your badge from the following:
- Inline (default)
- Fixed
Click the ‘Show replies’ check box to choose whether or not to display your public replies
From the ‘Lightbox options’ click the ‘Show media panel’ and ‘Enable attribute ratings panel’ checkboxes to select whether or not to display these features
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
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.