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.
- Include another JS file in the <head/> of your website to load the Klevu Recommendations Library.
- Include an implementation of the additional functionality, eg. add to cart.
- Add some context to each page, so Klevu knows which Product or Category your customer is viewing.
- 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 a <div/>, which is provided during banner creation, wherever you would like the banner to appear in 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
Disabling/Removing a banner
To remove a banner, you have two options:
- Disable it via the Klevu Merchant Centre. Choose this option if you plan to re-activate it again later.
- 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.