JavaScript API client - Depict Documentation

The JavaScript API client wraps POST /v3/recommend/products so you don’t build the request yourself. It ships inside the Depict UI packages.

Install

npm i @depict-ai/react-ui

yarn add @depict-ai/react-ui

npm i @depict-ai/js-ui

yarn add @depict-ai/js-ui

Import

Add the import at the top of the file where you fetch recommendations:

import { fetchDepictRecommendations } from "@depict-ai/js-ui";

import { useFetchRecommendations } from "@depict-ai/react-ui";

// In the component that needs recommendations:
const { fetchRecommendations } = useFetchRecommendations();
// `merchant` and `market` are taken from the DepictProvider, so you don't
// pass them to this `fetchRecommendations`.

Fetch recommendations

fetchDepictRecommendations takes an options object and returns a promise of an array of displays (product data). Every option is listed in the reference.

Where to find your merchant and market ids: see Set up DPC.

For a list of possible types, try checking the preview browser or ask your Depict contact. Usually the available types are also detailed in the kickoff slides. If you get a response whose error says the (tenant, market, type) combination is not yet configured, that means a type isn’t available for you - let us know if you want it. (The exact message text uses the v2 vocabulary tenant and may change.)

Use case	Extra option	Example
General recommendations for a page type, most often the front page	none	`type: "front_page"`
Recommendations for one product, for example below the description on a product page	`productId`	`productId: "this-is-an-amazing-product"`
Recommendations for several products, for example everything in the cart	`productIds`	`productIds: ["product-1", "product-2"]`

TypeScript

import { fetchDepictRecommendations } from "@depict-ai/js-ui";

const frontPageRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB", // See demo.depict.ai for available locales
    type: "TYPE",
});

const productPageRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB",
    type: "TYPE",
    productId: "this-is-an-amazing-product",
});

const cartRecs = await fetchDepictRecommendations({
    merchant: "MERCHANT_ID",
    market: "MARKET",
    locale: "en_GB",
    type: "TYPE",
    productIds: ["product-1", "product-2", "product-3"],
});

That’s it for fetching. Render the displays with your own product card, then follow the tracking guide so clicks and purchases are attributed to the recommendations.

​Install

​Import

​Fetch recommendations

Install

Import

Fetch recommendations