Docs

Unbxd Recommendation - Store Template Editor

You can integrate the recommendations widgets in your eCommerce store directly from the console using the Store Template Editor. The following sections will show you how to integrate each widget:

Prerequisites

Before you start installing the widgets, make sure that you have completed the following steps:
  1. Product Feed upload.

  2. Unbxd Analytics integration.

Integration

After you have successfully uploaded your Product Feed and integrated Unbxd Analytics in your store, you can start integrating the recommendation widgets in your store. Integrating the recommendation widgets from the console is a two-step process which involves:

  1. Inserting the JavaScript code

  2. Inserting the HTML Tags

1. Inserting the JavaScript code

Your first step is to insert a JavaScript code snippet in the header section of all pages of your online store. This code communicates with Unbxd recommendation platform and fetches correct recommendations for each widget.

JavaScript code

The below JavaScript code must to be inserted only once on a page, even when there are more than one widgets integrated on the page.

<script type="text/javascript">  
 /* * * CONFIGURATION * * */
 var UnbxdSiteName = "<SITE_KEY>";
 var UnbxdApiKey = "<API_KEY>";


/* * * DO NOT EDIT BELOW THIS LINE * * */
 (function() {
  var ubx = document.createElement("script"); 
  ubx.type = "text/javascript"; 
  ubx.async = true;
  ubx.src = "//d21gpk1vhmjuf5.cloudfront.net/embed.js";
  (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(ubx);
 })();
</script>
  • var UnbxdSiteName: specifies your Site Key.
  • var UnbxdApiKey: specifies your API Key

Note:

The inserted JavaScript code is loaded asynchronously on every page and will not affect the load time of your webpages.

1. Inserting the Tags

After you have correctly inserted the JavaScript code snippet, your next step is to insert individual HTML tags for every recommendation widget on the desired pages of your store.

The following table shows the different recommendation widgets, their corresponding tags, and pages they belong to.

It is highly recommended to not integrate the Viewed also Viewed and Bought also Bought widget together on the same PDP (Product Detail Page) as it would prevent the widgets from showing duplicate products. This scenario may arise right after integrating the widgets due to the lack of site data.

Recommendation WidgetsHTML TagsPage it belongs
Recently Viewed
<div id="unbxd_recently_viewed"></div>  
Homepage, Product page
Recommended for You
<div id="unbxd_recommended_for_you"></div>  
Homepage, Product page
More Like These
<div id="unbxd_more_like_these"></div>  
Product page
Viewed also Viewed
<div id="unbxd_also_viewed"></div>  
Product page
Bought also Bought
<div id="unbxd_also_bought"></div>  
Product page
Cart Recommendation
<div id="unbxd_cart_recommendations"></div>  
Cart page
Homepage Top seller
<div id="unbxd_top_sellers"></div>  
Homepage
Category Top seller
<div id="unbxd_category_top_sellers"></div>  
Category/Sub-category page
Brand Top seller
<div id="unbxd_brand_top_sellers"></div>  
Brand page
PDP Top seller
<div id="unbxd_pdp_top_sellers"></div>  
Product page
Complete the Look
<div id="unbxd_complete_the_look"></div>  
Product page

After you have correctly inserted the tags in their respective pages, the widgets will start showing recommendations as soon as they gather required site data with the help of Unbxd Analytics.

Some recommendations are generated based on batch jobs that are run daily to gather required information from your store.