Widget - Face Age

The widget shows only the analysis panel, at a fixed size. Use it when your own page should react to the result — for example, re-ranking the products in a collection by the shopper’s skin concerns.

<!-- where the widget appears -->
<div id="face-age"></div>

import FaceAge from 'face-age';

const faceAge = new FaceAge({
  elementId: 'face-age',
  faceageId: '<Your Client ID>',
  displayModel: 'widget',
  width: '360px',  // optional
  height: '580px', // optional
});

faceAge.render();

Options

Option	Default	Description
`elementId`	—	Required. ID of the container element.
`width`	`'360px'`	Width of the widget.
`height`	`'580px'`	Height of the widget.

React to the result

Read the detected concerns with getAdvisorData and update your page:

faceAge.API.getAdvisorData((data) => {
  // data.analysis holds skin age, damage % and detected problems
  rerankProducts(data.analysis);
});

See Skin analysis for what the result contains.