Unbxd Recommendations SDK helps you integrate the Unbxd Recommendations and its functionalities. With SDK documentation, you can optimize your layout of the recommendations widget. You can duplicate an Unbxd recommendation template and make changes to the JS-SDK configuration to render the appropriate HTML responses.

Version

The Recommendations SDK Version 3.1.0 can be found here for different regions:

Regions	SDK version
For the US customers	`https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk.js`
For the UK customers	https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk_uk.js
For the APAC customers	https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk_apac.js
For the ANZ customers	https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk_anz.js
For the GCP Customers	`https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk_gcp.js`

NOTE: Integration done through Recs SDK is only for AJAX customers.

Update: While v2.0 support for single desktop and mobile templates, with v3.0 enables you with the ability to have multiple templates - desktop as well as mobile - which can be active and be used simultaneously across pages .

Quick Integration

To integrate Recommendations SDK onto your site quickly, follow these steps:

To enable Unbxd powered recommendation widgets, you need to include Unbxd recommendations SDK. This can be achieved by adding the JS CDN link in your index HTML page
```
 <script src="https://libraries.unbxdapi.com/recs-sdk/v3.1.0/unbxd_recs_template_sdk.js" async>
</script>
```

Create locator HTML div nodes on your page.

<div class="horizontal-section">
<div id="recommendations1"> </div>
</div>
<div class="horizontal-section"><-- First Horizontal template to be rendered here with unique id for the widget -->

<div class="vertical-section" style="width:200px;">
<div id="widget-selector-id"> </div></div> //pass this selector id inside SDK widget config to whichever widget vertical template is linked to on console

Invoke getUnbxdRecommendations to fetch recommendations. This is the sample function for Home Page recommendations widget

window.getUnbxdRecommendations({
           widgets: [
        {
            name :  "widget1",
            selector: "home_recommendations1"
        },
        {
            name :  "widget2",
            selector: "home_recommendations2"
        },
        {
            name :  "widget3",
            selector: 'home_recommendations1'
        },
       
    ],
           },
           userInfo: {
               userId: 'uidValue',
               siteKey: 'siteKeyValue',
               apiKey: 'apiKeyValue'
           },
           pageInfo: {
               pageType: 'HOME',
               boutiqueButton: true
           },
           itemClickHandler: function (product) {
               //do what you want to do with product that has been clicked here
               alert(JSON.stringify(product));
           },
           dataParser: function (templateData) {
               // modify the data received from recommendation API
               // in case required       
               return templateData;
           }
       });

NOTE: You can know more about the details of keys by referring to our Search Documentation here.

Installation

We will learn how to integrate the Unbxd Recommendations SDK to optimize and power the recommendations results in the display page on your site.

Include Recommendation SDK in your application

To enable Unbxd powered recommendation widgets, you need to include Unbxd recommendations SDK. CDN link in thetag of the HTML code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Include these scripts -->
    <!-- template sdk first, followed by template widget initialization -->
    <script src=“<unbxd template sdk url>”></script>
  </body>
</html>

Create locator HTML div nodes

The web application on which the recommendation template will be displayed must contain HTML DIV nodes with well defined and unique IDs for the widget so that the SDK can fetch recommendations and display them at those positions

Adding Recommendations on Boutique Page

A boutique page solely consists of a curation of 50 Recommended products personalised to the visitor of the page.

To configure the page, an empty page with a url desired, for example "https://recs-demo.unbxd.com/pages/personal-boutique" needs to be setup.

Similar to any other page then Unbxd SDK has to be called here with the context object and page type set to "BOUTIQUE" and for the button to be called

' boutiqueButton: true ' has to be passed on all pages

Fetch Recommendations Results

The SDK has exposed a method (window.getUnbxdRecommendations) to fetch the recommendations and display them. The method can be called from your website to fetch recommendation content and get it rendered on their page.

Function Details

Function Name:window.getUnbxdRecommendations

Function Argument: Context Object – Everything that the recommendation API needs from the merchandiser application to serve the relevant recommendation.

NOTE: If you are integrating this in the react single page application then, Invoke the recommendation parameter by placing the script in the index.html file and invoking window.getUnbxdRecommendations in the mounting/updating phase of your components.

E.g In case of a react application the SDK can be implemented by invoking this method in the ‘componentDidMount’ method like this (in case of initial load):

componentDidMount(){
    new window.getUnbxdRecommendations({
	// context configuration here
     })
}

If you wish to show call the SDK when any update happens across the component the same call can be placed in ‘componentDidUpdate’ method:

componentDidUpdate(){
    new window.getUnbxdRecommendations({
	// context configuration here
     })
}

NOTE: window object needs to be used, otherwise the specific component won’t be able to access the recommendations call.

Invoke function to register hooks on before and after template rendered

Function Name:

_unbxd_RegisterHook(“beforeTemplateRender”, beforeTemplateRenderer);

_unbxd_RegisterHook(“afterTemplateRender”, afterTemplateRenderer);

Function Argument: Event name (beforeTemplateRender/ afterTemplateRender) & callback function which gets called when the event triggers in SDK. Prior to this, templateRenderer callback can be used to modify the recommendation items received from the Recommendation API. afterTemplateRendered gets called after every time the widget/template gets rendered. afterTemplateRendered callback is called with a parameter “isVertical” which can be used to distinguish between horizontal and vertical rendered templates.

 beforeTemplateRenderer = function(templateData){
           // modify the data received from recommendation API in case required.
          console.log("template data");
          return templateData;
       }
 
            //Perform activity after template render
       afterTemplateRenderer = function(isVertical){
         if(!isVertical){
               console.log("Horizontal Template Rendered");
         } else {
               console.log("Vertical Template Rendered");
         }
      }
 
      window._unbxd_registerHook("beforeTemplateRender", beforeTemplateRenderer);
      window._unbxd_registerHook("afterTemplateRender", afterTemplateRenderer);

Context Object Details

It is a Javascript object which would have following keys:

widgets

*REQUIRED

The recommendation widgets are called via an Array of objects of which there can be a max of 3 at the moment.

Each object is a combination of:

“Name” which indicates Widget name/number And
“Selector” which indicates Unique Target DOM element id where widget will be displayed

At least one key has to be provided along with its configuration. The description of these keys can be found below

Key	Type	Description
Name	String	Configuration/Name for widget
Selector	String	Unique Target DOM element id where widget1 will be displayed

Sample Value:

widgets: [
{
name : "widget1",
selector: "home_recommendations1"
},
{
name : "widget2",
selector: "home_recommendations2"
},
{
name : "widget3",
selector: 'home_recommendations1,
},
],

userInfo

*REQUIRED

userInfo must contain following key value pairs:

Key	Type	Description
userId	String	User tracking ID to be used for personalized recommendations
siteKey	String	Site key shared by UNBXD
apiKey	String	API key shared by UNBXD

NOTE: You can fetch the key details from the Search documentation.

Sample Value:

userInfo: {
                userId: 'uid',
                siteKey: 'site-key',
                apiKey: 'apiKey''
},

pageInfo

*REQUIRED

pageInfo must contain values for the following keys:

Key	Type	Description
pageType	String	Must be one of ‘HOME’, ‘PRODUCT’, ‘CART’, ‘CATEGORY’, ‘BOUTIQUE’
productIds	Array	An array of list of product ids of String type. This field is required only when the pageType is ‘PRODUCT’ or ‘CART’
catlevel1Name	String	Defines the first level of category filter. This field is required only when the pageType is ‘CATEGORY’
catlevel2Name	String	Defines the second level of category filter. This is an optional field which needs to be mentioned only when the pageType is ‘CATEGORY’
catlevel3Name	String	Defines the third level of category filter. This is an optional field which needs to be mentioned only when the pageType is ‘CATEGORY’
catlevel4Name	String	Defines the fourth level of category filter. This is an optional field which needs to be mentioned only when the pageType is ‘CATEGORY’

Category Level values must be in continuous order starting with catlevel1Name.

For instance:

‘catlevel1Name’: ‘Women’,

‘catlevel2Name’: ‘Clothes’,

‘catlevel3Name’: ‘Top’,

‘catlevel4Name’: ‘Denim’

catlevel1Name is REQUIRED for the Category page.

NOTE: If a category level value is skipped, the next level values will be ignored i.e. if ‘‘catlevel2Name’ value is not set, then ‘‘catlevel3Name’ and ‘‘catlevel4Name’ will be ignored by SDK. They will not be used to fetch recommendations.

itemClickHandler

OPTIONAL

Description for this handler can be found below:

Key	Type	Description
itemClickHandler	Function	Callback method that will be called when the recommendation item is clicked in the widget. Callback is called with one argument which contains all the product attributes sent by the recommendation platform

dataParser

OPTIONAL

Key	Type	Description
dataParser	Function	Callback method that will be called just before feeding the data to dot template with original recommendations data. You can modify the original data based on your requirement and return the modified data to be passed to template. This is sometimes useful when you are using your custom template and you don’t want to write parsing logic in a template file.

Sample function calls for each Page Type

Sample function calls for each page type

HOMEPAGE

getUnbxdRecommendations({
            widgets: [
           {
		name : "widget1",
		selector: "home_recommendations1"
},
{
            name : "widget2",
		selector: "home_recommendations2"
},
{           
		name : "widget3",
		selector: "home_recommendations3"
},
	    ],
                  
            userInfo: {
                userId: 'uidValue'',
                siteKey: 'siteKeyValue',
                apiKey: 'apiKeyValue''
            },
            pageInfo: {
                pageType: 'HOME'
               boutiqueButton: true
            },
            itemClickHandler: function (product) {
                //do what you want to do with product that has been clicked here
                alert(JSON.stringify(product));
            },
             dataParser: function (templateData) {
              // modify the data received from recommendation API 
              // in case required        
            return templateData;
            }
    });

PRODUCT PAGE

getUnbxdRecommendations(
{ 
widgets: 
{ 
name : "widget1",
selector: "product_recommendations1"
},
{
name : "widget2",
selector: "product_recommendations2",
{
name : "widget3",
selector: "product_recommendations3"
},
], 
           userInfo: {
                userId: 'uidValue'',
                siteKey: 'siteKeyValue',
                apiKey: 'apiKeyValue''
            },
            pageInfo: {
                pageType: 'PRODUCT',
                productIds: ['uniqueId1', 'uniqueId2'],
               boutiqueButton: true
            },
            itemClickHandler: function (product) {
                // product information will be provided here
                alert(JSON.stringify(product));
            },
            dataParser: function (templateData) {
             // modify the data received from recommendation API 
             // in case required        
            return templateData;
            }
    });

CART PAGE

getUnbxdRecommendations(
{ 
widgets: 
[
{ 
name : "widget1",
selector: "cart_recommendations1"
},
{
name : "widget2",
selector: "cart_recommendations2"
},
{
name : "widget3",
selector: "cart_recommendations3"
},
], 
            userInfo: {
                userId: 'uidValue'',
                siteKey: 'siteKeyValue',
                apiKey: 'apiKeyValue''
            },
            pageInfo: {
                pageType: 'CART',
                productIds: ['uniqueId1', 'uniqueId2'],
                boutiqueButton: true
            },
            itemClickHandler: function (product) {
                // product information will be provided here
                alert(JSON.stringify(product));
            },
            dataParser: function (templateData) {
              //modify the data received from recommendation API
              //in case required        
            return templateData;
            },
    });

Boutique

getUnbxdRecommendations({
            widgets: [
          {
		name : "widget1",
	      selector: "Boutique_recommendations1"
},
],
                  
            userInfo: {
                userId: 'uidValue'',
                siteKey: 'siteKeyValue',
                apiKey: 'apiKeyValue''
            },
            pageInfo: {
                pageType: 'BOUTIQUE'
            },
            itemClickHandler: function (product) {
                //do what you want to do with product that has been clicked here
                alert(JSON.stringify(product));
            },
             dataParser: function (templateData) {
              // modify the data received from recommendation API 
              // in case required        
            return templateData;
            }
    });

Did this answer your question?
Yes!
Nice work, I love it.

No…
I have some feedback

On this Section

To create a Query Rule
To Edit a Query Rule
Delete a Query Rule
Campaign States
Create Campaigns
Edit Campaigns
Preview Campaigns
Duplicate Campaigns
Delete Campaigns

Recommendations SDK v3

Version

Quick Integration

Installation

Include Recommendation SDK in your application

Create locator HTML div nodes

Adding Recommendations on Boutique Page

Fetch Recommendations Results

Function Details

Invoke function to register hooks on before and after template rendered

Context Object Details

widgets

userInfo

pageInfo

itemClickHandler

dataParser

Sample function calls for each Page Type

Sample function calls for each page type

Yes!

No…

On this Section