Open navigation

Integration Steps for Custom Platforms

Please note that whilst the modifications detailed in this guide are quite minor, they do involve modifying the HTML/JavaScript code of your website, so you may prefer to hand this task over to your frontend developer.

This document will guide you through the aspects of integrating Klevu Recommendations with your custom store. Once you are finished with this guide, please refer to the generic instructions for other aspects like creating a banner and adding it to your store, editing a banner, etc.

Integration Steps

Below we have highlighted the generic skeleton which will work on any platform. Please ensure these elements are included within the <head/> of every page of your website where you wish to show Klevu Recommendation banners.

<script type="text/javascript">
// use your own logic to determine the current page type
var page_type = 'REPLACE ME!';

if (page_type == 'category') {
var klevu_page_meta = {
'pageType': "category",

// If your catalogue supports category hierarchy, please provide the full path of category names separated by semi-colon. For example Mens > Shoes > Sneakers would be Mens;Shoes;Sneakers
'categoryName': 'REPLACE ME!',

// The full URL to the category. For example https://your.store.com/mens/shoes/sneakers
'categoryUrl': 'REPLACE ME!'
};
}
if (page_type == 'product') {
var klevu_page_meta = {
"pageType": "pdp",

// The name of the current product
"itemName": "REPLACE ME!",

// The full URL to the product. For example https://your.store.com/mens/shoes/sneakers
"itemUrl": "REPLACE ME!",

// The ID you specify here must match the one provided to Klevu as <id/>
"itemId": "REPLACE ME!",

// The ID you specify here must match the one provided to Klevu as <item_group_id/>
"itemGroupId": "REPLACE ME!",

// The final selling price of the product, eg. 123.45
"itemSalePrice": "REPLACE ME!",

// The currency code of the above price, eg. USD
"itemCurrency": "REPLACE ME!"
};
}
if (page_type == 'cart') {
var cartRecords = [];

// Repeat this block for each item the customer has in their cart
cartRecords.push({'itemId': 'REPLACE ME!' ,'itemGroupId': 'REPLACE ME!'});

var klevu_page_meta = {
'pageType': "cart",
'cartRecords': cartRecords
};
}
</script>
<script src="https://js.klevu.com/core/v2/klevu.js"></script>
<script src="https://js.klevu.com/recs/v2/klevu-recs.js"></script>
<script type="text/javascript">
klevu.interactive(function () {
var options = {
powerUp: {
recsModule: true
},
recs: {
apiKey: 'klevu-12345'
},
analytics: {
apiKey: 'klevu-12345'
}
};
klevu(options);
});
</script>

Please replace klevu-12345 with your own Klevu JS Api Key. Also, for any customers already using Klevu JavaScript Library (aka JSv2) you may already have the klevu.js library included, and a klevu.interactive initialisation. If so, please merge the powerUp and recs nodes into that existing implementation you already have. The minimum version of Klevu JS Library for Klevu Recommendations to work correctly is 2.3.5+.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.