This article defines the code changes needed for a Reviews Lightbox Integration.

Integrations using the Reviews Lightbox Integration offer fewer Search Engine Optimisation (SEO) benefits when compared to On-Page Integrations or Reviews API Integrations but can still produce a neat solution with the merchant's live Feefo data appearing on the merchant's website and the reviews in a separate window. This integration method is described as a ‘Medium Integration’. 

If you choose to use this integration technique, a line of JavaScript code is inserted into the footer of your website in much the same way as a Facebook 'Like' Button or a Google Analytics function is added to the site. The JavaScript will insert a Feefo badge onto the page, which displays your feedback rating and when the badge is clicked, the latest Feefo feedback will be loaded into a separate floating window (or 'lightbox') that requires users to interact with it before they can return to your website.

The Feefo badge can include live star ratings for service or product. There are many standard designs to choose from, your choice of badge being customisable with the preference being stored on the Feefo server. A full list of badges can be viewed in Feefo Badges and configured using the interactive badge selector in the Feefo Hub menu 'Marketing > Reviews Lightbox'.

The following example shows a JavaScript lightbox for service ratings only:

Reviews Lightbox Integrations can also be used to display product ratings as shown in this example:

Implementing a Reviews Lightbox Integration is relatively straight-forward as the JavaScript content is hosted by Feefo and sent to a client browser on request. The URL for the source of the code passes your merchant identifier as a parameter allowing the Feefo server to supply the correct content to the user. Knowledge of JavaScript is not required for this integration method as it is all taken care of by Feefo.

The Reviews Lightbox Integration involves adding two lines of code to your HTML.

  1. The first line of code is a <script> tag. It should be added to HTML pages as far down the page as possible (in the footer is ideal). Note that the tag’s position within the code does not determine the position of the dynamic Feefo badge. This script sets up identifiers that can be used by HTML tags within the page to locate the Feefo badge and determine the type of review that is displayed when the badge is clicked on:

    <script type="text/javascript" src="https://api.feefo.com/api/javascript/merchantidentifier" async> </script>
     Where:           
    • merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier. Your merchantidentifier can be found in the Feefo Hub; see Where to find my merchant identifier?. 
  2. In a similar way, to take advantage of sales or product tags for selecting the feedbacks, the script can be appended with one or more tags of interest. For example:

    <script type="text/javascript" src="https://api.feefo.com/api/javascript/merchantidentifier?tags=language%3DEnglish,store%3DLondon" async> </script>
      Where:           
    • tags identifies the sales or product tag ‘key value’ pairs to be included, in this case, where the sale has the tags 'language' with a value of 'English' AND 'store' with the value 'London'. Note the use of the URL encoded equals symbol of %3D between the key and the value and a comma between each ‘key value’ pair. Where several ‘key value’ pairs are listed in the call, only those sales or products that have all of the listed ‘key value’ pairs will be selected. A full list of available tags can be viewed in the Sales And Product Tags.
  3. The second line of code, a <div> tag is required in all cases.

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

For service reviews, insert the following line of code:

<div id="feefologohere"></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 rating for the shirt (any colour) (i.e. the parent product) instead.
For a product SKU add the following line of code:

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

Or for a parent product SKU add this line of code instead:

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

Optionally, if you plan on having multiple page elements that open the Reviews Lightbox (for example, Feefo badges in multiple locations on a page or your own graphics or links), you'll need to add an additional line of JavaScript code where each instance of the lightbox will be opened from:

<a href="javascript:FeefoToggle('popup');">
<Add here any text or graphical elements that will be used to open the Feefo Lightbox></a>

Once the above lines of code are working successfully, the display badge can be modified. Feefo supports different badges for the service and the product feedback. To setup your badge use 'Marketing > Reviews Lightbox', choose your badges and configure and preview their design, colour and size, and define further options such as:

  • Would you like a special badge for mobile phones (usually a smaller one)?
  • Setting the style of the lightbox that is displayed (e.g. which side of the screen the badge is positioned). 
  • If a product has no reviews, should the product badge showing no reviews be displayed or should your service badge and rating be used instead?
Once completed, 'Save Settings' and follow the installation instructions provided.