AI Search

Prerequisites — before implementing AI Search, complete the Cookie consent and Installation steps on the JS Library page. Kleep must not load until the visitor has consented via your CMP, and the library must be loaded site-wide.

Kleep AI Search integrates a search component into your storefront, powered by Kleep’s AI algorithms. Product Feeds must be created and deployed before you start this integration — please confirm this with your Kleep representative before implementing.

What AI Search delivers

Kleep AI Search welcome page showing most-searched queries and trending searches — A welcome page with first insights on your catalogue — most-searched queries and trends

Kleep AI Search auto-suggestions dropdown appearing as the shopper types — Auto-suggestions appear as the shopper types. The complete list of suggestions is managed in the Kleep Search AI Dashboard — you can add, update, or remove them there.

Kleep AI Search product-list page with add-to-cart and wishlist actions — A product-list page with add-to-cart and wishlist actions

The product-list page supports two shopper actions through callbacks you implement:

Add a size to the cart if it’s in stock. When the shopper taps Add to cart on a size, your addToCart callback runs with the variant reference.

Input — reference of the variant (size) to add to the cart
Action — add the reference to the cart like a regular add-to-cart
Output — true on success, false otherwise

Checking if the variant is in stock is handled by Kleep — you don’t need to verify availability yourself.

// Callback that you'll need to implement
addToCart: ('ref1_sizeS') => {
  const success = addNewRefToCart('ref1_sizeS');
  return success ? true : false;
}

Add / remove a product from the wishlist. When the shopper taps the heart icon, your toggleWishlist callback runs with the product reference.

Input — reference of the product being toggled
Action — if the reference is in the wishlist, remove it; if not, add it
Output — true if the reference is now in the wishlist, false otherwise

// Callback that you'll need to implement
toggleWishlist: async ('ref1') => {
  const check = wishlist.includes('ref1');
  return check ? true : false;
}

Method: `kleep.search`

Step 1: Create the container Add the div where the search component should be attached:

<div id="search-container"></div>

Step 2: Initialize with your credentials Call kleep.search.init with your account credentials:

kleep.search.init({
  anonKey: 'your-anon-key',
  retailerId: 'your-retailer-id',
  shopLocale: 'fr',    // lower case
  countryCode: 'FR'    // upper case
});

anonKey and retailerId are provided by your Kleep representative during onboarding.

Step 3: Render the search box Call kleep.search.renderBox with the container ID and your callback implementations:

kleep.search.renderBox(
  '#search-container',
  {
    toggleWishlist: async (product_ref) => boolean,
    getWishlistItems: async () => string[],
    addToCart: (variant_ref) => boolean,
    onSearchSubmit: (query) => void
  }
);

Parameters & Callbacks

Name	Type	Priority	Description
`addToCart`	Callback	Mandatory	Add a specific variant to the cart. Called when the shopper taps Add to cart on a result.
`toggleWishlist`	Callback	Optional	Add or remove a specific product from the shopper’s wishlist. Called when the shopper taps the heart icon.
`getWishlistItems`	Callback	Optional	Return the list of product references currently in the shopper’s wishlist so the wishlist state stays in sync.
`onSearchSubmit`	Callback	Optional	Called when the shopper submits a search query — use it for logging, analytics, or any other side effect.

Full example with callbacks

kleep.search.renderBox(
  // Make sure to include "#" so Kleep can identify the tag type
  '#search-container',
  {
    // Return the list of product references currently in the shopper's wishlist.
    // See your dedicated "ID Recap Table" for the reference format to use.
    getWishlistItems: async () => ['ref1', 'ref2'],

    // Add or remove a product from the shopper's wishlist.
    // Return true if the product is now in the wishlist, false otherwise.
    toggleWishlist: async (product_ref) => {
      const check = wishlist.includes(product_ref);
      return check ? true : false;
    },

    // Add a specific variant to the cart.
    // Return true if successful, false otherwise.
    addToCart: (variant_ref) => {
      const success = addNewRefToCart(variant_ref);
      return success ? true : false;
    },

    // Optional — invoked whenever the shopper submits a search query.
    // Useful for logging or analytics.
    onSearchSubmit: (query) => {
      analyticsTool.saveQuery(query);
    }
  }
);

Check your dedicated ID Recap Table (provided by your Kleep representative) for the exact reference format to pass to these callbacks.

Additional Prestashop permissions for Search

If you’re using AI Search on a Prestashop store, your Kleep webservice key needs a few extra GET permissions on top of the ones listed in the Prestashop integration guide:

Resource	Permission	Used for
`products`	GET	Pre-tax prices, quantity, ID
`stock_availables`	GET	Stock per combination / size
`taxes`	GET	Actual VAT rates
`tax_rules`	GET	Rules applicable per product
`tax_rule_groups`	GET	Rule groups
`specific_prices`	GET	Discounted / promotional prices

Cookies & data privacy

Kleep is fully gated by visitor consent: the script only loads after consent is collected through your CMP, and you must condition its loading accordingly. For the complete list of trackers, the data processed, the purposes and legal bases, hosting, subprocessors and security, see Cookies, CMP & Data Privacy.

Welcome

CMS

Mobile

Dashboard

Data

Privacy

What AI Search delivers

Method: `kleep.search`

Parameters & Callbacks

Full example with callbacks

Cookies & data privacy

​What AI Search delivers

​Method: kleep.search

​Parameters & Callbacks

​Full example with callbacks

​Cookies & data privacy

What AI Search delivers

Method: `kleep.search`

Parameters & Callbacks

Full example with callbacks

Cookies & data privacy