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

Implementing an On-Page Integration involves adding a reference to a JavaScript tag in the source of your web page. The JavaScript content is hosted by Feefo and sent to a client browser on request. The URL for the source of the JavaScript 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 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.

  1. 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).   

    <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:     
    • merchantidentifier identifies the Feefo account. Replace this with your unique Feefo identifier.
    • tags identify 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 JavaScript 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, 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:     

    Once this code is added to your HTML, reviews for the service or specified product will be shown in the appropriate location.


  4. 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:

    <div class="feefo-review-badge-wrapper-product"></div>

    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.