Documentation

Loading the components

Integrate our JavaScript file into your page.

<script src="https://cdn.askstella.ai/scripts/shop-components-latest.js" />

You can now use our web-components on the page. Details about the available components are listed below. The events that will be dispatched by the components are listed next to the related component. All events are dispatched on the DOM's document object.

Embedding the analysis funnel

You can integrate our analysis funnel at any place by adding an html element with the tag stella-analysis. This will embed the analysis funnel as an iframe at the selected place.

<stella-analysis />

Properties

Events

Type Definitions

type AnalysisEventType = {
  analysis_url: string, // URL of the analysis result: e.g. 'https://your-shop.askstella.ai/analysis/1234567890'
  analysis_id: string, // ID of the analysis: e.g. '1234567890'
  funnel: string, // Subdomain of the analysis funnel: e.g. 'your-shop'
  first_name: string, // First name of the user (if available)
  last_name: string, // Last name of the user (if available)
  email: string, // Email of the user (if available)
  color_type: string, // The result of the color type analysis of the user
  source: string, // Only for result_page_opened: The source where the user came from to be passed as `source` query parameter to the result page URL
  products: { variant_id: string, link: string }[], // List of products that were recommended
};

type AddToCartEventType = {
  type: "add_to_cart",
  items: { id: string, quantity: number }[], // List of products that should be added to the cart
  set_id: string, // If this is a set, the ID of the set that was added to the cart (see items for which items are in the set)
  source: string, // For advanced use cases, to identify the source of the event
};

Example events

Sinlge variation add to cart event

{
  "type":"add_to_cart",
  "items":[
    {"id":"44452126425353","quantity":1}
  ],
  "source":"add_to_cart"
};

Add to cart event for a set

{
  "type":"add_to_cart",
  "items":[
    {"id":"44452126425353","quantity":1},
    {"id":"44452126425354","quantity":2}
  ],
  "set_id":"44452126425353",
  "source":"add_to_cart"
};

Local Storage

The analysis data is also added to the local storage of the user's browser. This can be used for revenue tracking or to show the recommended products on a collection page, etc. One value is about each analysis (shops can have multiple different analyses).

If you change any of this data on your own (e.g. because you are loading the data from the personal account of the current user), then you should throw the event stella-data-updated on the window object to inform any component on the current page (this is of course only needed if the data is updated after the page has loaded).

The recommended products are stored in the stellaRecommendedProductVariants key as an array of items. This data can be used to highlight the recommended products in your shop and to track the purchases of the recommended products (see tracking for more information).

stellaRecommendedProductVariants = [
  {
    timestamp: Date.now(),
    variant_id: string,
    source: string,
    analysis_id: string,
    funnel: string,
  },
];

Additional information about the analyses will be stored in the stellaAnalysesData key as an array of analyses. It is an array, because one shop can have multiple different types (i.e. funnels) of analyses spread across the shop, e.g. one that focuses on make-up recommendation and one for skin-care. These funnels will have a different subdomain and therefore differ in the funnel value. If an analysis is done again in the same analysis funnel, the corresponding value will be overwritten in the array.

stellaAnalysesData = [
  {
    timestamp: Date,
    funnel: string,
    analysis_id: string,
    analysis_url: string,
    first_name: string,
    last_name: string,
    email: string,
    color_type: string,
  },
];

Showing the analysis funnel in a popup

An alternative is to make our analysis funnel open in a popup on the current page and open it when e.g. the user clicks on a button or link. When loading the javascript file, an "empty" popup component will be created automatically and exposed with the variable window.stellaAnalysisPopup, you can open it by calling the window.stellaAnalysisPopup.open("my-funnel") function with the sub-domain of your analysis funnel or leave the parameter empty to open the default funnel. The default funnel is set in our platform, but alternatively you can also set the funnel property of the component or create a new component with a specific funnel, if you then open it by calling the open() function without parameters, that funnel and not our default funnel will be opened.

<stella-analysis-popup funnel=&quot;my-funnel&quot; id=&quot;stella-analysis-popup&quot; />
<button onclick=&quot;() => document.querySelector('stella-analysis-popup').open()&quot;>Find your colour</button>

<!-- or just use our global popup variable: -->
<button onclick=&quot;() => window.stellaAnalysisPopup.open('my-funnel')&quot;>Find your colour</button>

Properties

Functions

Events

Since this component is a wrapper around the analysis iframe, the events of the stella-analysis component (see above) are also dispatched by this component.

Displaying the Stella widget

Add this component to all pages of the shop. On product pages (PDP) it will display the analysis results as a widget or inform the user about the possiblity to do an analysis. On non-PDP pages it will offer general assistance to the user (if the StellaAssist chat is enabled in the shop - otherwise the widget will automatically be hidden).

<stella-widget />

Properties

Functions

Events

Type Definitions

type Variant = {
  id: string,
  name: string,
  link: string,
};

Since this component can open the analysis in a popup, the events of the stella-analysis-popup component (see above) are also dispatched by this component.

Embed the chat of StellaAssist

Add an html element where the chat should be shown.

<stella-chat />

Properties

Functions

Events

Since this component can open the analysis in a popup, the events of the stella-analysis-popup component (see above) are also dispatched by this component.