> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget

> A compact analysis panel your own page can react to.

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.

[Face Age widget demo](https://getfaceage.com/embed/demo/widget)

Live demo — the real SDK in widget mode on the Lumière sample store

## Add a widget

```html theme={null}
<!-- where the widget appears -->
<div id="face-age"></div>
```

```js theme={null}
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:

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

See [Skin analysis](https://getfaceage.com/docs/developer-guides/analysis/skin-analysis.md) for what the result contains.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.