> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom

> Integrate Kleep on a bespoke, headless, or otherwise custom-built storefront.

<Note>
  This guide is for storefronts we don't cover with a dedicated CMS integration page - bespoke or in-house platforms, headless storefronts, or CMSs not listed under **CMS** in the sidebar. If you're on Shopify, Prestashop, Magento, WooCommerce, WShop or SFCC, follow the platform-specific guide instead.
</Note>

The integration always has two parts: a **front-end widget** that runs on your product pages, and a **back-end data flow** so Kleep can build recommendations from your product catalog, orders, and returns.

## **Phase 1: Backend Configuration (data access)**

*This step allows Kleep to retrieve your product catalog, order history, and returns data to calibrate the algorithm.*

Two paths are available depending on what your platform exposes. Your Kleep representative will confirm which one applies during kickoff.

### **Option A - Your API**

If your platform exposes REST or GraphQL endpoints for products, orders and returns, Kleep can integrate directly.

**1. Provide API access**

Please share the following with your Kleep contact:

* **API base URL(s)** - one per environment (production, staging)
* **Authentication credentials** - API key, OAuth tokens, or whatever mechanism your API uses
* **API documentation** - reference docs so our team can map your fields to Kleep's schema

**2. Data required**

Kleep needs access to the following resources - please confirm your API exposes each one:

* **Products** - full catalog, including variants (colors, sizes) and stock levels
* **Orders** - historical order data to calibrate size recommendations
* **Returns** - return reasons and return line items (used to refine sizing accuracy)

**3. Field mapping alignment**

Once we have access, our team reviews your API and confirms:

* Which endpoints we'll call for each resource
* How your fields translate to Kleep's expected format
* Whether any data is missing (in which case Phase 3 kicks in)

**4. Firewall configuration**

If your store is behind a firewall or uses IP-based access restrictions, please whitelist the following Kleep IP addresses to ensure uninterrupted API access:

* `34.1.4.3`
* `82.66.252.201`
* `176.148.67.162`

### **Option B - SFTP flat files**

If you don't have an API, or your API doesn't expose everything Kleep needs, we exchange data via SFTP: Kleep provides secure credentials and you push CSV files on a defined cadence.

* [SFTP Access Documentation](/data/sftp-access) - setup guide for connecting to our SFTP
* [SFTP Data Structure Documentation](/data/sftp-structure) - required file structure and format specifications

Also see [Data Integration Requirements](/data/data-integration) for the full picture of data-transfer methods.

***

## **Phase 2: Frontend Integration (Widget)**

*This step involves adding the Kleep script to your product pages (PDP). Compatible with any storefront - bespoke, headless, or otherwise.*

Follow our [**JS Library Widget guide**](/cms/js-library) to install and configure the front-end CTA on your product pages. The same library also powers Similar Products and AI Search if those features are enabled for your account.

***

## **Phase 3: Handling Missing Data (SFTP)**

*If your API doesn't allow retrieving Returns or certain specific data, we complete the picture via CSV file exchange.*

This applies to **Option A** users whose API is incomplete - you keep sending real-time data via API, but push the missing data (typically returns) to our SFTP on a defined cadence. See the SFTP documentation linked in Phase 1 for the setup.

***

## **Phase 4: Validation & Go-Live**

1. **Test Environment:**
   * First deploy on your **Preprod/Staging** environment.
2. **Visual Validation:**
   * Does the button appear correctly?
   * Does clicking open the pop-up (Drawer)?
   * No "CORS" errors in the browser console?
3. **Go-Live:**
   * Once validated by you and the Kleep team, deploy the changes to your **Production** environment.

***

## **Additional Information**

### Product Configuration

Before integration, please provide the following information:

* **Internal Product Reference:**
  * Do you have a brand-specific reference code for each product, different from the default product ID used by your platform?
* **Grouping Products by Color Variants:**
  * Do you have products that share the same sizing but are spread across multiple product pages (e.g., different colors)? If yes, how can we identify a parent reference common to all color variants?
* **Product Dimensions:**
  * Are product dimensions available in your catalog? If yes, we can provide you with a template to complete for more accurate recommendations.

### Languages Supported

Kleep supports the following languages: fr, en, de, it, ja, ko, pt, br, es, pl, sv, da, nl, fi.

Please confirm which languages you need for your store.

***

## 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](/cookie-consent).