TABLE OF CONTENTS

Introduction


The Feefo BigCommerce plugin provides an automated way to send sales data to Feefo and initiate feedback requests without manual data uploads. This article guides you through the installation process for both Blueprint and Stencil themes and explains how to uninstall the plugin if needed.


How to install the Feefo BigCommerce plugin


To install the plugin, three pieces of code need to be added to your BigCommerce site template. First, you need to check that the URL on your Feefo Hub account matches the website you're installing the plugin on. To do this, head to Settings > Brand Profile, and find the 'Website Forwarding URL' then ensure that this is an exact match e.g., there should be no '/' at the end of the URL. If you’re installing the plugin on a URL which isn’t on your contract, please let us know before doing so.


If you’re using the Blueprint theme, you can install the plugin through the BigCommerce app store or through the Feefo Hub. If you’re using a Stencil theme, scroll down for separate instructions.


Installation via the BigCommerce App Store 


Please follow the interactive guide in the BigCommerce app store, as this will walk you through each step. 


Installation via the Feefo Hub


  1. Login to the Feefo Hub 
  2. Go to ‘Marketing > eCommerce Installation Packages’ 
  3. Click the ‘Install package’ button under ‘BigCommerce’ and follow the on-screen prompts 


How to add mobile integration on non-responsive Blueprint themes


If you are using a responsive theme, the integration should already be displaying beautifully on a mobile device, but older BigCommerce themes that are not responsive have separate template files for mobile. 


To install the widget on the mobile template, you’ll need to add the widget integration code to the relevant mobile templates. The following steps explain how to do this, but if you get stuck, ask our Technical Team for help. 


  1. Login to your BigCommerce account and go to ‘Store Setup and Design’ (on some stores, this might be ‘Store Design and Design Options’ 
  2. Select the ‘Mobile’ tab 
  3. Check ‘Enable Mobile Theme’ and then click ‘Download Template files’ 
  4. Extract the downloaded zip file  
  5. In the extracted folder, go into the ‘Panels’ folder and look for ‘HTMLHead.html’ 
  6. Open ‘HTMLHead.html’ with a text editor, such as Sublime Text or Atom, and scroll all the way down to the bottom 
  7. To add the service reviews widget to every page of the site, copy the code below and paste it where it says ‘Paste here’. Be sure to replace ‘merchantidentifier’ with your unique merchant identifier, which can be found within the Feefo Hub. If you need help finding it, read our ‘Finding my Merchant Identifier’ article. 
<script type="text/javascript" id="feefo-plugin-widget-bootstrap" src="//api.feefo.com/api/ecommerce/plugin/widget/merchant/merchantidentifier" async></script>


  1. Save the file and open ‘ProductDetails.html’ in the same folder 
  2. To add the star rating for your products, find %%GLOBAL_ProductName%%. 
  3. Paste the code below where it says‘Paste Here’, just after the </h2> tag 
<div class="feefo-review-badge-wrapper-product"></div>


  1. To add the reviews for your products, in the same file, scroll down to the two closing div tags and add the code below where it says ‘Paste Here’ 
  2. Upload the modified files to your BigCommerce store using WebDAV.
  3. Once you’re connected, open the ‘mobile_template’ folder 
  4. Right click ‘Panels’ and select ‘Upload’ (if there is no ‘Panels’ folder, you will have to create one) 
  5. Select the two files you modified, ‘HTMLHead.html’ and ‘ProductDetails.html’ and click ‘Upload’


The Feefo Widget and the Product Reviews should now show up on a mobile device! 


How to install if you’re using a Stencil theme


If your site is using a Stencil theme, you’ll need to set up a local development environment to install our widget integration code.


Once the environment is set up, all you need to do is copy and paste the below code snippets into the relevant templates. 


To add the service reviews widget to every page of your website, copy the code below and paste it into your header template, just above the tag. 


<script type="text/javascript" id="feefo-plugin-widget-bootstrap" src="//api.feefo.com/api/ecommerce/plugin/widget/merchant/merchantidentifier" async></script>


Be sure to replace ‘merchantidentifier’ with your unique merchant identifier, which can be found within the Feefo Hub. If you need help finding it, read our ‘Finding my Merchant Identifier’ article. 


To add the star rating for your products, copy the code below and paste it in to your product template file, under the product title.  

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

To add the product reviews for your products, copy the final piece of code below and paste it into the same product template file, within the main container, beneath the existing content.  

<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-feefo-product-id={{ product.id }}></div>


How do I check the install was successful?


To check that the plugin installation was successful, within the Feefo Hub first just click on your name in the top right corner and check that your merchant identifier is the same as before to ensure that it was installed on the intended account. Then if you head to Sales > Data Sources, you should see the name of the plugin you just installed listed here. If you have any questions about the installation, you notice your merchant identifier has changed, or you’d like for us to check that the plugin installation was successful, please just get in touch.


How to uninstall the BigCommerce plugin


If you ever want to uninstall the Feefo BigCommerce plugin, you will need to remove three pieces of code from your BigCommerce site template manually. 


If you are using a Blueprint theme, please follow the instructions below. 


Blueprint theme uninstallation instructions:


  1. From your BigCommerce admin panel, click ‘Store Setup and Design’./span> 
  2. Click ‘Edit HTML/CSS’ 
  3. Find the following code snippets in your various templates and remove them, saving each as you go.


The first section of code is typically found under ‘Panels’ in Template > HTMLHead.html: 


<script type="text/javascript" id="feefo-plugin-widget-bootstrap" src="//api.feefo.com/api/ecommerce/plugin/widget/merchant/merchantidentifier" async></script>


The second line of code is typically found under Other Template Files > ProductDetails.html: 


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


The final line of code is typically found under 'Other Template Files' > 'ProductDetails.html': 


<div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-feefo-product-id=”%%GLOBAL_ProductId%%”></div>

To remove mobile integration on non-responsive Blueprint themes, please refer to our installation instructions but instead of adding the three sections of code, remove them. 


For Stencil themes, please refer to our installation instructions but instead of adding the three sections of code, remove them. 


The plugin should now be removed! If you need anymore help, please don’t hesitate to get in touch. 



Conclusion


Installing the Feefo BigCommerce plugin allows you to automate feedback requests and seamlessly collect reviews from your customers. In case you encounter any issues during installation or need assistance, feel free to contact our technical support team. If you decide to uninstall the plugin, follow the provided instructions to remove the code snippets correctly.