This article documents the code changes needed to add the Feefo Places Widget into your web page.

To integrate the Feefo Places Widget into a website, add the following code snippet to the relevant web pages. Note that if a 'Display=Inline’ is defined in the Places Widget preferences, the widget position will be determined by where the element referring to the widget is located in the web page. If a 'Display=Fixed’ is chosen, the position will be determined by the options 'Position' and 'Offset'.

  1. The first step is to include the widget on the web page:
    <!-- Include the Feefo Places Widget -->
    <script type='text/javascript' src='https://api.feefo.com/api/assets/js-places-integration/feefo-js-places-integration.js'></script>
  2. The second step is to add a page element to anchor the widget to: 
    <!-- Include the Feefo Places Widget -->
    <div id="FPI_Destination"></div>
  3. The last step is to configure the widget. This code must be added just before the closing </body> tag of your webpage: 
    <!-- Initialise the Widget -->
    <script type='text/javascript'>
    
    // Configure the widget
    var feefo = new Feefo.PlacesIntegration({
    
    // Outputs debug logs
    debug: true,
    
    // Where to place the widget
    destination: document.getElementById('FPI_Destination'),
    
    // Merchant identifier
    merchantIdentifier: 'example-retail-merchant',
    });
    
    // Show the widget
    feefo.init();
    
    // Close the script
    </script>

    Where:

    • debug = option to display the widget debug logs in the browser's console. Values can be true (display debug logs) or false (do not display debug logs).
    • destination = this is a Document Object Model (DOM) reference to an element in your website where the widget will be inserted. In the above example, replace FPI Destination with the correct element id.
    • merchantIdentifier = your unique Feefo identifier. This is used to fetch your preferences for the Feefo Places Widget. In the example above, replace example-retail-merchant with the correct merchant identifier.
    • feefo.init() = the call that renders the widget on your website. If not included, the widget will be hidden. For example, the widget can be hidden until $(document).ready() or after a certain action has been performed.

Setting Up Feefo Places