​
How getting recommendations from Depict works

You ask Depict for recommendations for a specific page or “surface” on that page, and, if applicable for that page, provide an id of the product or products that should be taken into account when generating the recommendations. For example, if you are on a product detail page, you would ask Depict for recommendations for that product page, and provide the id of the product that is currently being viewed. Then Depict can provide recommendations relevant to that product.

​
Getting started

Start by installing a Depict UI package: 
npm i @depict-ai/react-ui
You can then import the fetchDepictRecommendations function: 
import { fetchDepictRecommendations } from "@depict-ai/js-ui";
The fetchDepictRecommendations function takes an object of options as its argument, and returns a promise of an array. Below, you can see the different possible parameters of the options argument.
​
merchant
The name of the merchant (e.g. “acme”)
​
market
The market to fetch recs for. Depict will provide this to you. (Example: “sv” or “sv-se”.)
​
type
The type of the recommendations, e.g. front_page, after_basket, related, etc. Ask Depict for this.
​
productId
When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as productId
​
productIds
When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as productIds
​
sessionId
string?
Optionally you can override the default session id used for personalization here. This is the ID that will be used to tie together the different tracking events for a user.
​
headers
Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.
​
metadata
Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
🚧 It is important that you make the correct choice out of: no id, productId and productIds (choose ONE) so read the documentation carefully.
📘 This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
When no id is provided (none out of productId and productIds) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned. If you only get recommendations when specifying the wrong id type (i.e. you only get basket recommendations if you provide a single product id while the recommendations should be based on everything in the basket) please ask Depict to re-configure the endpoint for you.

​
Example: Fetching frontpage recommendations

TypeScript
const frontPageRecs = await fetchDepictRecommendations({
    merchant: "oscarjacobson",
    market: "sv-se",
    type: "front_page",
});

​
Example: Fetching recommendations for a product page

TypeScript
const productPageRecs = await fetchDepictRecommendations({
    merchant: "stronger",
    market: "se",
    type: "product_normal",
    productId: "hero-sports-bra-luna",
});