Skip to main content

Integration Steps for All Platforms

Updated

Thank you for trying Klevu Recommendations. This guide will take you step by step through the process of adding this great new feature to your website.

Prerequisites

Klevu Recommendations work with any platform. All you need to do is add some JavaScript and HTML placeholders to your page, and we take care of the rest. This involves the following simple steps:

  1. Include a JavaScript file in the <head/> of your website to load the Klevu JavaScript Library.
  2. Include another JS file in the <head/> of your website to load the Klevu Recommendations Library.
  3. Include an implementation of the additional functionality, eg, add to cart.
  4. Add some context to each page, so Klevu knows which Product or Category your customer is viewing.
  5. Include a small HTML snippet wherever you want a banner to appear.

For any integration of Klevu Recommendations, you will follow the above steps; however, there are certain nuances of each platform that need special attention, so we have separated out the instructions below.

If you are at all unsure, please take a look at this video, which shows the end-to-end process.

Adding each banner

Once the above prerequisite work is completed, adding each Klevu Recommendations banner to your website is very simple and is the same for any platform. You only need to add <div/>, which is provided during banner creation, wherever you would like the banner to appear on your website. 

For example:

<div class="klevu-recs" klevu-data-id="ABC-123"></div>

You do not need to repeat the prerequisite steps for every banner you add.

Customising the Look, Feel and Functionality

Klevu Recommendations is powered by the Klevu JavaScript Library, meaning everything can be customised from the HTML and CSS to the API calls being made and the JavaScript functionality. We have provided some examples of how to customise your banner, including adding promotional badges, quick view, and add to cart functionality. Please check out our developer documentation for more information.

Disabling/Removing a banner

To remove a banner, you have two options:

  1. Disable it via the Klevu Merchant Centre. Choose this option if you plan to re-activate it again later.
  2. Remove the <div/> from the page. If you will not use the banner again, choose this option. Furthermore, if you don’t plan to use any Klevu Recommendation banners at all, you should also undo the prerequisite steps.

If you wish to replace a banner with another one you have created, you only need to update the ABC-123 part of the banner, and your new banner will render in exactly the same place.

Overriding API Requests or JavaScript Logic

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 initialisation script klevu.interactive(function().

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

Within each of these hooks, you will find relevant objects and variables that you can use to modify the default behaviour provided by Klevu. For example, if you wish to modify the API query for a particular banner before it is sent, you can add some custom logic into a function called klevu_processRECSRecordQueries. Klevu Recommendations are powered by the Klevu JavaScript Library, so you can also use any events or chains as you would with a standard frontend integration, so there is always a way to add your custom logic. Please follow this link for some copy-and-paste examples of Common Recommendations Customisations. There are so many ways to interact with Klevu in this manner, so if you are unclear or need some guidance, please ask on our Community Forum in the JavaScript Library section.

Related articles

Powered by Zendesk