---
title: Quickstart : Smart Recommendations
slug: template-js/quick-start-smart-recommendations
docTags: 
createdAt: 2022-06-10T16:20:55.000Z
---

## App/Plugin Integration

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

- Shopify - [Integration Guide](https://help.klevu.com/support/solutions/articles/5000871327-integration-steps-for-shopify)
- Magento - [Integration Guide](https://help.klevu.com/support/solutions/articles/5000871321-integration-steps-for-magento2)
- BigCommerce - [Integration Guide](https://help.klevu.com/support/solutions/articles/5000871324-integration-steps-for-bigcommerce)



## 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](https://help.klevu.com/support/solutions/articles/5000871315-getting-started) for other aspects like creating a banner and adding it to your store, editing a banner, etc. 

:::hint{type="info"}
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](https://help.klevu.com/support/solutions/articles/5000871315-getting-started) for aspects like creating a banner and adding it to your store, editing a banner, etc. 
