This article defines how to install the Slide-out Reviews Tab into a merchant's web page.

The Slide-out Reviews Tab is simple to implement and configure. It offers a quick method to integrating a merchant's service review rating into a floating Tab that remains within view whilst the customer is on the web page. The Tab's appearance, when collapsed, will be similar to:

When clicked on, the tab expands to:

Implementing a Slide-out Reviews Tab 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 Slide-out Reviews Tab integration involves adding two lines of code to your HTML. Both lines should be added to the HTML pages as far down the page as possible (in the footer is ideal) however, their location does not define the position of the tab. 

<script type="text/javascript" src="https://api.feefo.com/api/javascript/merchantidentifier" async></script>
<div id="feefo-service-review-floating-widgetId"></div>

Where:

  • merchantidentifier identifies the Feefo account. Replace merchantidentifier with your unique Feefo identifier which can be found in the Feefo Hub; see Where to find my merchant identifier?.  

Once added, the Slide-out Reviews Tab will float over the page when it's viewed. The position and styling of the tab are controlled by 'Marketing > Slide-out Reviews Tab' the options being:

  • Colour Theme

    This option applies to both desktop and mobile devices.

    • Grey (Default)
    • Yellow
    • White
  • Format

    This option determines the size of the badge on desktop devices.

    • Small (Default)
    • Large
  • Alignment

    This option determines the position of the badge on desktop devices.

    • Left (Default)
    • Right
  • Position from top

    This option determines the badge's relative position to the alignment on desktop devices. Continuously variable from 0 (at the top of the window) to 100 (at the bottom of the window). Default = 70% (quite close to the bottom of the window).

  • Mobile 

    This option determines how the badge will appear on mobile devices. 

    • Use a different badge (Default). This displays a smaller badge that is specifically designed for mobile devices. If the 'Colour Theme' for the above badge is changed, it also changes the colour of the mobile badge.
    • Hide badge on mobile. This option doesn't show any badge on mobile devices.
  • Alignment

    This option determines the position of the badge on mobile devices. 

    • Bottom (Default).
    • Left.
    • Right.
  • Position from left or top

    This option determines the badge's relative position to the alignment on mobile devices. When 'Alignment = Left or Right', the position is continuously variable from 0 (at the top of the window) to 100 (at the bottom of the window). When 'Alignment = Bottom' (Default), the position is continuously variable from 0 (at the left side of the window) to 100 (at the right side of the window). Default = 50%.

Once saved, the changes will be immediately applied to the widget.