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 
3min

Recommendations Webhooks



It is possible to add some JavaScript within your own website to modify the search query being fired for any or all of your Recommendation banners. You can do this by adding one or more of the following hooks within your website, just after the Klevu initialization script klevu.interactive

Within each of these hooks, you will find relevant objects and variables that you can use to modify the default behavior provided by Klevu. 

JS
|
<script type = "text/javascript" >
/* Observer for record queries */
function klevu_processRECSRecordQueries(recordQueries, recsKey) {
  console.log(recordQueries, recsKey);
}

/* Observer for query results */
function klevu_processRECSQueryResults(queryResults, recsKey) {
  console.log(queryResults, recsKey);
}

/* Observer to process template data */
function klevu_processRECSTemplateData(templateData, recsKey) {
  console.log(templateData, recsKey);
}

/* Observer to bind template events */
function klevu_bindRECSTemplateElementEvents(templateData, recsKey) {
  console.log(templateData, recsKey);
}

/* Observer for RECS item click */
function klevu_RECSItemClick(templateData, itemId, recsKey) {
  console.log(templateData, itemId, recsKey);
}

/* Observer for add to cart action */
function klevu_addtocart(variantId, productURL, quantity, recsKey) {
  console.log(variantId, productURL, quantity, recsKey);
}
</script>




Example

API query modifications via Recommendations webhook

JS
|
<script type = "text/javascript" >
function klevu_processRECSRecordQueries(recordQueries, recsKey)
{
    var recsQuery = recordQueries[0];

    // eg. change the result limit to 10
    klevu.setObjectPath(recsQuery, "settings.limit", 10);

    // eg. add a category context of "Clothing"
    klevu.setObjectPath(recsQuery, "settings.query.categoryPath", "Your Category");

    // eg. exclude some results for a specific banner only
    if (recsKey == 'abc-123-xyz-321') {
        var excludeIds = [
            {
              key: "id", // or itemGroupId
              value: "the-id-to-exclude"
            }
        ];
        klevu.setObjectPath(recsQuery, "settings.excludeIds", excludeIds);
    }

    // Klevu Recommendations utilise Klevu API,
    // you can therefore modify any of the params in our Docs.
    // See https://developers.klevu.com/api for all available parameters!
}
</script>




Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Styling CSS
Docs powered by archbee 
TABLE OF CONTENTS
Example