This article defines how to configure a merchant website for an On-Page Integration.
On-Page Integrations are simple to configure, offer Search Engine Optimisation (SEO) benefits through rich snippets and produce a set of reviews that are integrated directly into the web page thereby keeping website visitors on the site and maximising any sales opportunity. This integration technique is an excellent solution for merchants with limited development resources. Due to the all-round capabilities of this technique, this is Feefo's ‘Full Integration’.
The following example shows an On-Page Integration for service ratings only:
On-Page Integrations can also be used to display product ratings as shown in this example:
The On-Page Integration involves adding a few lines of code to your HTML.
The first line of code is a <script> tag. It should be added as far down the page as possible (in the footer is ideal).
- merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier. Your merchantidentifier can be found in the Feefo Administration Portal; 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:
- merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier.
The second line of code, a <div> tag, determines the location of the Feefo reviews. Wherever it's located in the HTML code will define the reviews widget location.
For service reviews, the required <div> code is:
<div id="feefo-service-review-widgetId" class="feefo-review-widget-service"></div>
For product reviews, either the reviews for a corresponding product SKU OR a 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. Only one SKU (product or parent product) should be called within the <div> tag however if both are included within the same tag, the parent product SKU results will be displayed.For a product SKU add the following line of code:
<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-product-sku="my_product_sku"></div>
Or for a parent product SKU, add this line of code instead:
<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-parent-product-sku="my_parent_product_ref"></div>Where:
- my_product_sku = the product search code for this product.
- my_parent_product_ref = the parent product ref for this product.
Once this code is added to your HTML, reviews for the service or specified product will be shown in the appropriate location.
For product reviews specifically, a third line of code, also a <div> tag, can be added to display a Feefo badge with the star rating and review count for the product. The positioning of the <div> determines the location of the Feefo badge displaying similar results to:
The required code is:
By clicking on the badge, the viewer is taken to a full set of reviews, either service or product (depending on which of the second lines of code is inserted), presented directly within your web page.