Skip to main content

Implement search logic in your backend or mobile app

This guide explains an alternative method for querying the Product Recommendation API to display live (instant) and full product search results, without embedding the Kameleoon HTML element. Refer to the visual integration guide for the visual method.

The tutorial uses the search endpoint.

Why use the API?​

caution

API usage is mandatory for mobile applications;

Depending on your needs this approach offers multiple benefits:

  • Full Control: Clients fully customize variation display to match design and UX standards.
  • Better Performance: Optimized API calls reduce page load delays compared to script-based solutions.
  • Easier Debugging: Integration within the client codebase allows logging, monitoring, and debugging using standard tools.
  • No Third-Party Script Dependency: Direct calls avoid external scripts, reducing potential conflicts and aligning with security policies.
  • SPA-Friendly: Ideal for single-page applications where direct API calls avoid timing issues and fit into client-side routing.
  • Ad Blocker Resilience: Absence of third-party scripts or specific HTML markers ensures consistent experiment delivery, as ad blockers are less likely to block this method. For more details on how ad blockers affect Kameleoon, see the FAQ.

Goal​

Retrieve and display product search results based on user input, using either instant (typeahead) or full search modes.

Requirements​

  • A valid Kameleoon account with a Store ID (shop_id)

    • Locate the shop_id in Recommendations > Settings > Store settings in the Kameleoon app. Contact the Customer Success Manager for the key if necessary.

  • A Device ID (did) and Session ID (sid):

    • For Kameleoon Web Experimentation, retrieve these from the following cookies:
      • KameleoonProducts_device_id → Device ID (did)
      • KameleoonProducts_session_code → Session ID (sid)
    • Otherwise, generate these values manually.

Steps​

Configure the feed by following the instructions in the search configuration guide.

2. Retrieve cookies (Kameleoon Web Experimentation only)​

caution

For backend implementations or environments without Kameleoon Web Experimentation, generate these values manually. Refer to the Init endpoint for details.

function getCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}
const did = getCookie('KameleoonProducts_device_id');
const sid = getCookie('KameleoonProducts_session_code');

3. Make a search request​

The API supports two search types:

Use instant search for typeahead and autocomplete results while the user types.

Endpoint:

GET https://api.products.kameleoon.com/search
NameTypeRequiredDescription
didstringTrueDevice ID (from cookie)
sidstringTrueSession ID (from cookie)
shop_idstringTrueYour Kameleoon store ID
typestringTrue"instant_search"
search_querystringTrueUser's search input
locationsListFalseA comma-separated list of location IDs.

Example:

curl -X GET -L 'https://api.products.kameleoon.com/search' \
             -H 'Content-Type: application/json' \
             -d '{
   "did":"abc123",
   "sid":"xyz456",
   "shop_id":"demoShop",
   "type":"instant_search",
   "search_query":"decon",
}'

Use full search to display detailed search results with filters, categories, pagination, and sorting.

Endpoint:

GET https://api.products.kameleoon.com/search
NameTypeRequiredDescription
didstringTrueDevice ID (from cookie)
sidstringTrueSession ID (from cookie)
shop_idstringTrueYour Kameleoon store ID
typestringTrue"full_search"
search_querystringTrueUser's search input
locationsListFalseA comma-separated list of location IDs.
limitIntegerFalseMaximum number of results
offsetIntegerFalseOffset for pagination
extendedInteger/EmptyFalse1 returns full product data
sort_byStringFalseSort criteria: popular, price, and others.
orderStringFalseSort order: asc or desc
brandsListFalseFilter by brand list
categoriesListFalseFilter by category list
filtersStringFalseEscaped JSON string for product parameters
price_minIntegerFalseMinimum price
price_maxIntegerFalseMaximum price
excludeListFalseProduct IDs to exclude
curl -X GET -L 'https://api.products.kameleoon.com/search' \
             -H 'Content-Type: application/json' \
             -d '{
   "did":"abc123",
   "sid":"xyz456",
   "shop_id":"demoShop",
   "type":"full_search",
   "search_query":"decon",
   "limit":"10",
   "extended":"1",
   "sort_by":"price",
   "order":"asc",
}'

Refer to the filtering section for more filtering details.

4. Integrate the response​

A successful request returns an HTML snippet for direct page injection, alongside product and category data for custom rendering.

For mobile applications, use the JSON product and category arrays to design a native interface.

Sample Response​
{
    "search_query": "decon",
    "collections": [],
    "products_total": 1,
    "products": [
        {
            "name": "VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE",
            "url": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon",
            "category_ids": [
                "1",
                "2",
                "295508017316"
            ],
            "barcode": "VN-05-white-4",
            "vendor_code": "VA",
            "brand": "Vans",
            "leftovers": "lot",
            "rating": 5,
            "fashion_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "fashion_feature": "adult",
            "fashion_gender": "m",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                },
                {
                    "id": "2",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Women",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                }
            ],
            "price_formatted": "$ 179",
            "price_full_formatted": "$ 179.95",
            "price": 179,
            "price_full": 179.95,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484"
            },
            "url_handle": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon",
            "currency": "$",
            "_id": "3927252",
            "id": "VN-05-white-4",
            "stock_quantity": 19,
            "fashion_colors": [
                "white"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "4"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "white"
                    ]
                }
            ],
            "group_id": "_3927252_"
        }
    ],
    "categories": [
        {
            "id": "1",
            "name": "Men",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "2",
            "name": "Women",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "295508017316",
            "name": "Men - Sneakers",
            "parent": "1",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        }
    ],
    "clarification": true,
    "requests_count": 1,
    "queries": [],
    "html": "<div class=\"KameleoonProducts-search-wrapper\"> <div class=\"KameleoonProducts-search-container\"> <div class=\"KameleoonProducts-search-group\"> <div class=\"KameleoonProducts-search-group-title\"> Categories <\/div> <div class=\"KameleoonProducts-search-group-description\"> <a class=\"KameleoonProducts-search-row\" data-id=\"1\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Men <\/span><\/a> <a class=\"KameleoonProducts-search-row\" data-id=\"2\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Women <\/span><\/a> <a class=\"KameleoonProducts-search-row\" data-id=\"295508017316\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Men - Sneakers <\/span><\/a> <\/div> <\/div> <\/div> <div class=\"KameleoonProducts-search-container\" id=\"KameleoonProducts_search_products\"> <div class=\"KameleoonProducts-search-group KameleoonProducts-search-products\"> <div class=\"KameleoonProducts-search-group-title\"> Possible item matches <\/div> <div class=\"KameleoonProducts-search-group-description\"> <a class=\"KameleoonProducts-search-product\" href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon\"> <div class=\"KameleoonProducts-search-product__image\" style=\"background-image: url(&#39;https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484&#39;)\"><\/div> <div class=\"KameleoonProducts-search-product__name\"> VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE <\/div> <div class=\"KameleoonProducts-search-product__price\"> $ 179.95 <\/div> <\/a> <\/div> <\/div> <\/div> <div class=\"KameleoonProducts-search-close\"><\/div><\/div>"
}

Integrating a full search also provides an HTML snippet for result display.

In addition to the categories array, the response also includes brands and filters arrays.

note

The filters array contains all available keys and values from the product params fields. Use these to build the filter interface.

Example full search results page:

Applying filters​

The following example shows the full search request with the filters selected in the image above:

{
   "did":"abc123",
   "shop_id":"9fa630bf863db7a87fc6d5fd2a188f",
   "type":"full_search",
   "search_query":"vans",
   "input_query":"vans",
   "categories":"295508017316",
   "filters":{"Color":["white"],"Size":["4"]},
   "brands":"vans"

}
Sample response​
{
    "search_query": "decon",
    "collections": [],
    "products_total": 1,
    "products": [
        {
            "name": "VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE",
            "url": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon",
            "category_ids": [
                "1",
                "2",
                "295508017316"
            ],
            "barcode": "VN-05-white-4",
            "vendor_code": "VA",
            "brand": "Vans",
            "leftovers": "lot",
            "rating": 5,
            "fashion_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "fashion_feature": "adult",
            "fashion_gender": "m",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                },
                {
                    "id": "2",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Women",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                }
            ],
            "price_formatted": "$ 179",
            "price_full_formatted": "$ 179.95",
            "price": 179,
            "price_full": 179.95,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484"
            },
            "url_handle": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon",
            "currency": "$",
            "_id": "3927252",
            "id": "VN-05-white-4",
            "stock_quantity": 19,
            "fashion_colors": [
                "white"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "4"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "white"
                    ]
                }
            ],
            "group_id": "_3927252_"
        }
    ],
    "price_range": {
        "min": 179.95000000000002,
        "max": 179.95000000000002
    },
    "price_ranges": [
        {
            "from": 10,
            "count": 1
        }
    ],
    "price_median": 0,
    "filters": {
        "Color": {
            "count": 1,
            "values": {
                "white": 1
            }
        },
        "Size": {
            "count": 1,
            "values": {
                "4": 1
            },
            "ranges": {
                "min": "4",
                "max": "4"
            }
        }
    },
    "brands": [
        {
            "name": "Vans",
            "count": 1
        }
    ],
    "categories": [
        {
            "id": "1",
            "name": "Men",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "2",
            "name": "Women",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "295508017316",
            "name": "Men - Sneakers",
            "parent": "1",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        }
    ],
    "industrial_filters": {
        "fashion_sizes": [
            {
                "size": 4,
                "count": 1
            },
            {
                "size": 5,
                "count": 1
            },
            {
                "size": 6,
                "count": 1
            },
            {
                "size": 7,
                "count": 1
            },
            {
                "size": 8,
                "count": 1
            },
            {
                "size": 9,
                "count": 1
            },
            {
                "size": 10,
                "count": 1
            }
        ],
        "colors": [
            {
                "color": "white",
                "count": 1
            }
        ]
    },
    "clarification": true,
    "requests_count": 1,
    "html": "<div class=\"KameleoonProducts-search-items\"> <div class=\"KameleoonProducts-search-item\"> <div class=\"KameleoonProducts-search-item-photo\"> <a href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon\"><img class=\"item_img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484\" \/><\/a> <\/div> <div class=\"KameleoonProducts-search-item-title\"> <a href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon\">VANS | SK8-HI DECON (CUTOUT)| ...<\/a> <\/div> <div class=\"KameleoonProducts-search-item-price\"> $ 179.95 <\/div> <\/div> <\/div>"
}

Notes​

  • Ensure cookies are accessible before making the request.
  • Use full search with extended=1 for detailed product listings, such as on product pages.
  • Customize the returned HTML or render a custom UI using the JSON response.