website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
4min

Quickstart : Smart Recommendations

App/Plugin Integration

If you are integrating Smart Recommendations on a platform using one of the supported apps or extentions, please consult the applicable Knowledgebase article for specific instructions on implmentation.

  • Shopify - Integration Guide
  • Magento - Integration Guide
  • BigCommerce - Integration Guide



Basic Integration

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.

Please refer to the Recommendations Getting Started guide for other aspects like creating a banner and adding it to your store, editing a banner, etc. 

Any customers already using Klevu JavaScript Library (aka JSv2) may already have the klevu.js library included

HTML
|
<html>
<head>
        <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'
                }
            };
            klevu(options);
        });

    </script>
</head>
<body>
    <div class="klevu-recs" id="ABC-123"></div>
</body>
</html>




Recommendation Templates

Recommendations templates are managed within the store Klevu Merchant Center

Please refer to the Recommendations Getting Started guide for aspects like creating a banner and adding it to your store, editing a banner, etc. 

Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Shopify
Docs powered by archbee 
TABLE OF CONTENTS
App/Plugin Integration
Basic Integration
Recommendation Templates