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’.
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'.
Reviews Lightbox Integrations can also be used to display product ratings as shown in this example:
The Reviews Lightbox Integration involves adding two lines of code to your HTML.
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:
- 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?.
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:
- 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.
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:
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:
- my_product_sku = the product search code for this product.
- my_parent_product_sku = the parent product ref for this product.
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?