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'.
- 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>
- The second step is to add a page element to anchor the widget to:
<!-- Include the Feefo Places Widget --> <div id="FPI_Destination"></div>
- 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.