How to install the ExpertVoice Recommendation Display on your website

Overview

The ExpertVoice Recommendations Display is a plugin enabling expert reviews to be shared on partner e-commerce platforms. 

The instructions included within this document cover the requirements for installing the display onto an e-commerce website. 

Requirements

The display requires a few data points to identify the appropriate recommendations to display.

• API Key: The API Key is a string token that uniquely identifies the brand to which the request is scoped. The key will be provided as part of the final implementation instructions by your Customer Success partner.
• Product Code: This code is the unique identifier for each product. Commonly referred to as a parent or master SKU. The ID for the entity sitting hierarchically above individual SKUs signifies a single product independent of color or sizing selections. Within the ExpertVoice platform, this is the product identifier that recommendations are associated with.

How to install the display

Installing the ExpertVoice Recommendation Display will require someone who can edit the HTML of your website's Product Detail Page template. They should ideally have prior experience editing such pages, but they don't need a high degree of technical knowledge. These are the high-level installation steps:

1. Ensure the productCodes listed in the Review Manager match what your eCommerce platform uses as its product identifiers. (if not, see below for info on mapping productCodes)
2. Locate and open the Product Detail Page (PDP) template editor in their eCommerce platform
3. Identify where the client wishes to place the ExpertVoice Recommendation Display on the page. This may require some trial and error with some "test" text.
4. Open the ExpertVoice Review Manager and access the Display tab. Click the "Embed Display" button to access the code needed
   • NOTE: You must make all your display customizations before copying the code in Step 5
5. Copy/Paste the container <div> HTML code into the chosen location in the HTML of the page
6. Copy/Paste the JavaScript snippet below the HTML <div>
7. In the JavaScript snippet, replace the {apiKey} placeholder with the provided apiKey. (Will look like this: apiKey: '9fe7f2fab7726b2a49a6b190fcc8d9ec')
8. Also in the JS Snippet, replace the {productCode} placeholder with the PDP templates product identifier variable. (For Shopify, this looks like this: productCode: '{{product.id}}')
9. Save the changes and load a page on the website that has some syndicated recommendations

Additional installation information

The display functions through a simple JavaScript library that embeds an <iframe> into a container <div> placed within the page structure. Using this approach, the effort involved with integrating the display into any page should be minimal.

The page rendered by ExpertVoice within the <iframe> will decide which recommendations to include & will automatically collapse if no expert reviews have been selected to show for that product. The JavaScript library will also manage resizing of the <iframe> element to match the size of the content, including browser resize events to accommodate various devices and screen sizes.

Container <div>

A <div> needs to be created within the page where the ExpertVoice Recommendation Display should be rendered.

<div id="expertvoice-recommendations"></div>

JavaScript snippet

The JavaScript snippet should be included on the page after the container <div> in Step 1. The snippet creates an ExpertVoice object within the global window context. Configuration options can be set in the EV.recoSettings object and used in the <iframe> construction once the plugin script has been loaded.

Configuration Options:

• API Key: The API Key is provided as part of the final implementation instructions
• Product Code: The unique identifier for the product that aligns with the productCode within the ExpertVoice system (commonly parent or master SKU)
• Target: A selector for the container <div> embedded in the page in Step 1
• Limit (optional): Limits the total number of recommendations shown

<script>

(function(e,x,p) {

e.EV = e.EV || {};
e.EV.recoSettings = {

apiKey: '{apiKey}',

productCode: '{productCode}',
target: '#expertvoice-recommendations'

};


var s = x.createElement('script');

s.src = p;

s.async = true;


var h = x.getElementsByTagName('head')[0];
h.appendChild(s);
})(window, document, '//cdn.expertvoice.com/widget/js/recommendations/v1/plugin.js');

</script>

Example output

Here is an example display that has been successfully implemented on a brand's website. See other examples of the display here.