Depict AI Documentation

Home

Guide: Data ingestion

Guide: Depict UI integration (React)

Guide: Depict UI integration (JavaScript)

Guide: API integration

Other guides

Reference

Contact us

Installation

Depict AI

Welcome to the Depict documentation!

Depict UI

A guide for integrating with the plain JavaScript flavour of the Depict UI

Introduction

Data Ingestion

Compatibility and Browser Support for Depict Packages

How to import the SDK styling into your project

Import styling

How to set up JSX in your build environment to create HTMLElements

Setting up JSX

Your product card components needs to meet some specific requirements

Setting up your product card

An overview of the search components and flow

Overview

Creating a search page

Configuring the search provider

Transforming and enriching display data

Adding a way to open the SearchModal

Adding the SearchPage to your site

Complete - search functionality added

Configuring the category provider

Adding the CategoryPage to your site

Complete - categories & collections added

Rendering recommendations in a slider

Rendering recommendations in a grid

A guide to setting up tracking for Depict UI (JavaScript) integrations

Import DPC so that your code has access to it.

Importing DPC

Here we'll finally execute the imported code.

Initialising DPC

How to make sure DPC tracks your product cards correctly

Product Card Tracking

How to make sure DPC tracks your Product Details Page (PDP) views correctly.

Product Page Tracking

You need to track both the add-to-cart button on your product page and, if applicable, on your product cards

Add to cart tracking

To calculate revenue figures, you need to track purchases. This is done with the `purchase` event.

Purchase tracking

Tracking - Completed

A guide for React/Next.js/Gatsby users to integrate with the Depict UI

Configuring `DepictProvider`

Setting up routing

Configuring the DepictProvider for your search page

A guide to setting up tracking for Depict UI (React) integrations

For product cards that are NOT rendered *through* the Depict UI (SDK)

Product Card Tracking for Recommendations

Integrating with the Depict API

Import

Fetching recommendations

API Client - Completed

Interfacing directly with the API

A guide to setting up tracking for your Depict API integration

We need to make sure you have DPC installed before we can use it.

Installing DPC

A collection of guides to provide examples of more framework specific integrations with Depict.ai

Storyblok + NextJS

A guide to setting up content blocks (React UI)

A guide to setting up content blocks (JS UI)

Product Feed Specification

Category Feed Specification

Discover different ways to send your data to Depict.

Overview of Data Ingestion

Learn how to import your product data from Centra.

Centra

Learn how to import your product data from Shopify.

Shopify

Learn how to import your product data through a feed export.

Feed export

Google Analytics

JavaScript UI Reference

Learn more about the Depict Search UI React SDK, its components and configuration.

React UI Reference

Learn more about our React SDK, its components and configuration.

Specifying Listing Type in the Category Page Sdk

Placeholder components

Customize PLP Styling with SCSS

Debugging and Error reporting

Browser compatibility

Customising price formatting

This page details how to get started with Depict recommendations using our API

Native

Example Code for Recommendations

Fetching recommendations with our API wrapper

API client

Reference of the depict Recommendations vanilla JS SDK.

Javascript UI Reference

Reference of the depict Recommendations React components

Use our Depict Performance Client SDKs to track and monitor user behavior on your store.

Introduction to Depict Performance Client

DPC handles performance tracking to enable the Depict AI to optimize recommendations and product listings.