Configurations

2min
If you haven't gone through the prerequisites and the v2 structure, please have a look at Overview﻿  
Merchants can create and manage multiple Klevu Recommendation banners via our KMC (Klevu Merchant Centre). The configuration via KMC includes the page type, the banner type and even the template to render the banner.
Our recommended approach to display these banners created via the KMC is to use our HTML Div Integration approach, which includes handling of API calls and banner rendering out of the box. You can also retrieve the KMC banner configuration via an API call and process it however you like.
This API call uses a simple GET request with no payload, and since it is intended for use on the frontend there is no authentication required
The end-point is used for retrieving the recommendation template configuration set in Klevu dashboard. 
GET
Request
Path Params
BASE_PATH
String
optional
A static base url to retrieve Klevu Recommendation configuration from: https://config-cdn.ksearchnet.com
JS_API_KEY
String
optional
Your public Klevu JS API Key.
RECS_ID
String
optional
The unique ID of your Recommendation banner, which you can find within the KMC.
Query Parameters
pid
String
optional
The unique identifier of the record within Klevu.
gpid
String
optional
The identifier used to group compound products together, eg. the ID of the parent in the case of a configurable product
cp
String
optional
This is the complete hierarchy of the category being visited. For example, Jewellery;Rings;Stackable Rings. Please note the use of a semicolon as the separator between a parent and a child category.
sids
String
optional
The SegmentIDs (segmentInfo.segments) if using recommendation segmentation.
PHP
JS
Java
Node.js
Text
var data = "";

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://config-cdn.ksearchnet.com/recommendations/klevu-158755634955912036/settings/3a5580bf-c5b2-407e-acac-4a58ae730b64");

xhr.send(data);
var data = "";

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://config-cdn.ksearchnet.com/recommendations/klevu-158755634955912036/settings/3a5580bf-c5b2-407e-acac-4a58ae730b64");

xhr.send(data);
Responses
200
{
    "metadata": {
        "title": "Recently Viewed By You",
        "recsKey": "3a5580bf-c5b2-407e-acac-4a58ae730b64",
        "pageType": "HOME",
        "logic": "RECENTLY_VIEWED",
        "maxProducts": 5,
        "productThreshold": 1,
        "enabled": true
    },
    "search": {
        "basePath": "eucs19v2.ksearchnet.com/cs/v2/search",
        "payload": "{\"recordQueries\":[{\"id\":\"klevuRECSItemList\",\"typeOfRequest\":\"SEARCH\",\"settings\":{\"typeOfRecords\":[\"KLEVU_PRODUCT\"],\"limit\":5}}]}"
    },
    "templates": {
        "base": "<% var metadata = data.metadata; var logic = (metadata.logic) ? metadata.logic : \"\"; var pageType = (metadata.pageType) ? metadata.pageType : \"\"; var recsKey = (metadata.recsKey) ? metadata.recsKey : \"\"; var title = (metadata.title) ? metadata.title : \"\"; %>    <div class=\"kuRECSContainer\" data-logic=\"<%= logic %>\" data-recskey=\"<%= recsKey %>\" data-page-type=\"<%= pageType %>\">        <% var recommendationItemList = klevu.getObjectPath(data,\"query.klevuRECSItemList.result\");%>            <% if(recommendationItemList && recommendationItemList.length) { %>                <div class=\"kuRECSHeader\">                    <h3 class=\"kuRECSTitle\" title=\"<%= klevu.dom.helpers.escapeHTML(title) %>\">                        <%= title %>                            </h3>                        </div>                    <div class=\"kuRECSWrap\">                        <div class=\"kuRECSResults\">                            <div class=\"kuRECSResultsInner\">                                <% helper.each(recommendationItemList, function(key, item){ %>                                    <div class=\"kuRECS-itemWrap kuRECSItem\" data-id=\"<%= item.id %>\">                                        <div class=\"kuRECS-item\">                                            <div class=\"kuRECS-itemImg\">                                                <a title=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" href=\"<%= item.url %>\" data-id=\"<%= item.id %>\" class=\"kuRECSItemClick kuRECSImg\">                                                    <img src=\"<%= item.image %>\" origin=\"<%= item.image %>\" alt=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" onerror=\"klevu.dom.helpers.cleanUpProductImage(this)\" class=\"prodImg\" width=\"100%\">                                                </a>                                            </div>                                            <div class=\"kuRECS-itemDesc\">                                                <a title=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" href=\"<%= item.url %>\" data-id=\"<%= item.id %>\" class=\"kuRECSItemClick kuRECSTitle\">                                                    <%= item.name %>    hghfghfghfghgfhfghfg                                                    </a>                                                    <div class=\"kuRECS-itemPrice\">                                                        <% if(item.ondiscount && item.ondiscount == \"true\") { %>                                                            <% if(item.salePrice ) { %>                                                                <div class=\"kuSalePrice kuSpecialPrice\">                                                                    <%=helper.processCurrency(item.currency,parseFloat(item.salePrice) )%>                                                                        </div>                                                                    <% } %>                                                                        <% if(item.price) { %>                                                                            <div class=\"kuOrigPrice\">                                                                                <%=helper.translate(\"Original price %s\",helper.processCurrency(item.currency,parseFloat(item.price)))%>                                                                                    </div>                                                                                <% } %>                                                                                    <% } else { %>                                                                                        <% if(item.salePrice ) { %>                                                                                            <div class=\"kuSalePrice\">                                                                                                <%=helper.processCurrency(item.currency,parseFloat(item.salePrice) )%>                                                                                                    </div>                                                                                                <% } %>                                                                                                    <% } %>                                                                                                        </div>                                                                                                    </div>                                                                                                <div class=\"kuRECSItemBottom\">                                                                                                    <button data-id=\"<%= item.id %>\" data-qty=\"1\" data-url=\"<%= item.url %>\" class=\"kuRECSAddToCartBtn\">Add to Cart                                                                                                    </button>                                                                                                </div>                                                                                            </div>                                                                                            </div>                                                                                        <% }) %>                                                                                            </div>                                                                                        </div>                                                                                    </div>                                                                                <% } %>                                                                                    </div>"
    },
    "styles": {
        "base": ".kuRECSContainer{  position:relative;  margin:15px 0px;}.kuRECSContainer .kuRECSHeader .kuRECSTitle{  display:block;  font-size:18px;  font-weight:bold;  margin:20px 0px;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;}.kuRECSContainer .kuRECSWrap{  max-width:100%;  position:relative;  padding:0px;  box-sizing:border-box;  font-family:inherit;  overflow:hidden;}.kuRECSContainer .kuRECSWrap *{  outline:none;}.kuRECSContainer .kuRECSResults{  width:100%;  max-width:100%;  overflow:auto;}.kuRECSContainer .kuRECSResultsInner{  transition:-ms-transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, transform 0.5s ease 0s;  position:relative;  white-space:nowrap;  transition:all 0.5s ease;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemWrap{  display:inline-block;  margin:12px;  margin-left:0px;  vertical-align:top;  width:180px;  border:1px solid #efefef;  border-radius:2px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-item{  margin:0 auto;  padding:12px;  background:#FFF;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemImg{  display:flex;  justify-content:center;  align-items:center;  flex-direction:column;  width:100%;  height:210px;}.kuRECSContainer .kuRECSResultsInner a.kuRECSImg img{  max-width:100%;  height:auto;  width:auto;  display:inline-block;  margin:0 auto;}.kuRECSContainer .kuRECSResultsInner a.kuRECSTitle{  font-size:16px;  font-weight:bold;  text-decoration:none;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;  display:block;  color:#000;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemDesc{  margin-top:12px;  box-sizing:border-box;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipse;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemTag{  color:rgba(0, 0, 0, 0.5);  line-height:110%;  margin-bottom:5px;  min-height:20px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemSku{  color:rgba(0, 0, 0, 0.5);  font-size:80%;  line-height:110%;  margin-bottom:5px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemPrice{  font-size:12px;  color:#545454;  margin-bottom:4px;  margin-top:4px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemPrice .kuSalePrice{  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;}.kuRECSContainer .kuRECSResultsInner .kuRECSAddToCartBtn{  border:0px;  width:100%;  padding:6px;  cursor:pointer;  margin-top:8px;  background:#ececec;  color:#000;  border-radius:2px;}.kuRECSContainer .kuRECSResultsInner .kuRECSAddToCartBtn:hover{  background:#333333;  color:#ececec;}"
    },
    "scripts": {
        "recsObject": null
    }
}
{
    "metadata": {
        "title": "Recently Viewed By You",
        "recsKey": "3a5580bf-c5b2-407e-acac-4a58ae730b64",
        "pageType": "HOME",
        "logic": "RECENTLY_VIEWED",
        "maxProducts": 5,
        "productThreshold": 1,
        "enabled": true
    },
    "search": {
        "basePath": "eucs19v2.ksearchnet.com/cs/v2/search",
        "payload": "{\"recordQueries\":[{\"id\":\"klevuRECSItemList\",\"typeOfRequest\":\"SEARCH\",\"settings\":{\"typeOfRecords\":[\"KLEVU_PRODUCT\"],\"limit\":5}}]}"
    },
    "templates": {
        "base": "<% var metadata = data.metadata; var logic = (metadata.logic) ? metadata.logic : \"\"; var pageType = (metadata.pageType) ? metadata.pageType : \"\"; var recsKey = (metadata.recsKey) ? metadata.recsKey : \"\"; var title = (metadata.title) ? metadata.title : \"\"; %>    <div class=\"kuRECSContainer\" data-logic=\"<%= logic %>\" data-recskey=\"<%= recsKey %>\" data-page-type=\"<%= pageType %>\">        <% var recommendationItemList = klevu.getObjectPath(data,\"query.klevuRECSItemList.result\");%>            <% if(recommendationItemList && recommendationItemList.length) { %>                <div class=\"kuRECSHeader\">                    <h3 class=\"kuRECSTitle\" title=\"<%= klevu.dom.helpers.escapeHTML(title) %>\">                        <%= title %>                            </h3>                        </div>                    <div class=\"kuRECSWrap\">                        <div class=\"kuRECSResults\">                            <div class=\"kuRECSResultsInner\">                                <% helper.each(recommendationItemList, function(key, item){ %>                                    <div class=\"kuRECS-itemWrap kuRECSItem\" data-id=\"<%= item.id %>\">                                        <div class=\"kuRECS-item\">                                            <div class=\"kuRECS-itemImg\">                                                <a title=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" href=\"<%= item.url %>\" data-id=\"<%= item.id %>\" class=\"kuRECSItemClick kuRECSImg\">                                                    <img src=\"<%= item.image %>\" origin=\"<%= item.image %>\" alt=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" onerror=\"klevu.dom.helpers.cleanUpProductImage(this)\" class=\"prodImg\" width=\"100%\">                                                </a>                                            </div>                                            <div class=\"kuRECS-itemDesc\">                                                <a title=\"<%= klevu.dom.helpers.escapeHTML(item.name) %>\" href=\"<%= item.url %>\" data-id=\"<%= item.id %>\" class=\"kuRECSItemClick kuRECSTitle\">                                                    <%= item.name %>    hghfghfghfghgfhfghfg                                                    </a>                                                    <div class=\"kuRECS-itemPrice\">                                                        <% if(item.ondiscount && item.ondiscount == \"true\") { %>                                                            <% if(item.salePrice ) { %>                                                                <div class=\"kuSalePrice kuSpecialPrice\">                                                                    <%=helper.processCurrency(item.currency,parseFloat(item.salePrice) )%>                                                                        </div>                                                                    <% } %>                                                                        <% if(item.price) { %>                                                                            <div class=\"kuOrigPrice\">                                                                                <%=helper.translate(\"Original price %s\",helper.processCurrency(item.currency,parseFloat(item.price)))%>                                                                                    </div>                                                                                <% } %>                                                                                    <% } else { %>                                                                                        <% if(item.salePrice ) { %>                                                                                            <div class=\"kuSalePrice\">                                                                                                <%=helper.processCurrency(item.currency,parseFloat(item.salePrice) )%>                                                                                                    </div>                                                                                                <% } %>                                                                                                    <% } %>                                                                                                        </div>                                                                                                    </div>                                                                                                <div class=\"kuRECSItemBottom\">                                                                                                    <button data-id=\"<%= item.id %>\" data-qty=\"1\" data-url=\"<%= item.url %>\" class=\"kuRECSAddToCartBtn\">Add to Cart                                                                                                    </button>                                                                                                </div>                                                                                            </div>                                                                                            </div>                                                                                        <% }) %>                                                                                            </div>                                                                                        </div>                                                                                    </div>                                                                                <% } %>                                                                                    </div>"
    },
    "styles": {
        "base": ".kuRECSContainer{  position:relative;  margin:15px 0px;}.kuRECSContainer .kuRECSHeader .kuRECSTitle{  display:block;  font-size:18px;  font-weight:bold;  margin:20px 0px;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;}.kuRECSContainer .kuRECSWrap{  max-width:100%;  position:relative;  padding:0px;  box-sizing:border-box;  font-family:inherit;  overflow:hidden;}.kuRECSContainer .kuRECSWrap *{  outline:none;}.kuRECSContainer .kuRECSResults{  width:100%;  max-width:100%;  overflow:auto;}.kuRECSContainer .kuRECSResultsInner{  transition:-ms-transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, transform 0.5s ease 0s;  position:relative;  white-space:nowrap;  transition:all 0.5s ease;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemWrap{  display:inline-block;  margin:12px;  margin-left:0px;  vertical-align:top;  width:180px;  border:1px solid #efefef;  border-radius:2px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-item{  margin:0 auto;  padding:12px;  background:#FFF;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemImg{  display:flex;  justify-content:center;  align-items:center;  flex-direction:column;  width:100%;  height:210px;}.kuRECSContainer .kuRECSResultsInner a.kuRECSImg img{  max-width:100%;  height:auto;  width:auto;  display:inline-block;  margin:0 auto;}.kuRECSContainer .kuRECSResultsInner a.kuRECSTitle{  font-size:16px;  font-weight:bold;  text-decoration:none;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;  display:block;  color:#000;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemDesc{  margin-top:12px;  box-sizing:border-box;  overflow:hidden;  white-space:nowrap;  text-overflow:ellipse;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemTag{  color:rgba(0, 0, 0, 0.5);  line-height:110%;  margin-bottom:5px;  min-height:20px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemSku{  color:rgba(0, 0, 0, 0.5);  font-size:80%;  line-height:110%;  margin-bottom:5px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemPrice{  font-size:12px;  color:#545454;  margin-bottom:4px;  margin-top:4px;}.kuRECSContainer .kuRECSResultsInner .kuRECS-itemPrice .kuSalePrice{  overflow:hidden;  white-space:nowrap;  text-overflow:ellipsis;}.kuRECSContainer .kuRECSResultsInner .kuRECSAddToCartBtn{  border:0px;  width:100%;  padding:6px;  cursor:pointer;  margin-top:8px;  background:#ececec;  color:#000;  border-radius:2px;}.kuRECSContainer .kuRECSResultsInner .kuRECSAddToCartBtn:hover{  background:#333333;  color:#ececec;}"
    },
    "scripts": {
        "recsObject": null
    }
}
﻿
Understanding the response:  
Parameters
Description
metadata.title
The title of the Recommendation Banner, eg. "Our newest arrivals!".
metadata.recsKey
The unique identifier of the banner. This will match the value of RECS_ID in the request, eg. 3a5580bf-c5b2-407e-acac-4a58ae730b64.
metadata.pageType
The page type this banner should be displayed on. This will be one of:
HOME: Homepage.
CATEGORY: Collection or Category Listing Page.
PRODUCT: Product Detail Page.
CHECKOUT: The Cart or Checkout.
metadata.logic
The type of recommendation banner which was configured in the KMC. This will be one of:
TRENDING
TRENDING_PERSONALIZED
NEWEST_ARRIVALS
RECENTLY_VIEWED
HAND_PICKED
OTHER_ALSO_VIEWED
SIMILAR
BOUGHT_TOGETHER
metadata.maxProducts 
The maximum number of products to show within this banner.
metadata.productThreshold
The minimum number of results before this banner will be displayed.
metadata.enabled
Whether or not this particular banner is enabled.
search.basePath
The search URL to be used to send the Recommendation request to, eg. eucs19v2.ksearchnet.com/cs/v2/search.
search.payload
This correlates to the recordQueries section of the API call to be fired for this Recommendation.
templates.base
The HTML to be used for rendering the Recommendation banner, in Klevu JavaScript Library markup.
styles.base
The CSS that is used for rendering the Recommendation banner, in Klevu's Template JS Library markup.
scripts.recsObject
The Javascript that is executed after the rendering of the HTML Recommendation banner, in Klevu's Template JS Library markup.
Note regarding the response:
templates.base, styles.base, and scripts.recsObject returned in the configuration API response should not be used when using the API directly since they require the Klevu's Template JS Library.
Parameters	Description
metadata.title	The title of the Recommendation Banner, eg. "Our newest arrivals!".
metadata.recsKey	The unique identifier of the banner. This will match the value of RECS_ID in the request, eg. 3a5580bf-c5b2-407e-acac-4a58ae730b64.
metadata.pageType	The page type this banner should be displayed on. This will be one of: HOME: Homepage. CATEGORY: Collection or Category Listing Page. PRODUCT: Product Detail Page. CHECKOUT: The Cart or Checkout.
metadata.logic	The type of recommendation banner which was configured in the KMC. This will be one of: TRENDING TRENDING_PERSONALIZED NEWEST_ARRIVALS RECENTLY_VIEWED HAND_PICKED OTHER_ALSO_VIEWED SIMILAR BOUGHT_TOGETHER
metadata.maxProducts	The maximum number of products to show within this banner.
metadata.productThreshold	The minimum number of results before this banner will be displayed.
metadata.enabled	Whether or not this particular banner is enabled.
search.basePath	The search URL to be used to send the Recommendation request to, eg. eucs19v2.ksearchnet.com/cs/v2/search.
search.payload	This correlates to the recordQueries section of the API call to be fired for this Recommendation.
templates.base	The HTML to be used for rendering the Recommendation banner, in Klevu JavaScript Library markup.
styles.base	The CSS that is used for rendering the Recommendation banner, in Klevu's Template JS Library markup.
scripts.recsObject	The Javascript that is executed after the rendering of the HTML Recommendation banner, in Klevu's Template JS Library markup.
Overview