> ## 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.

# Quickstart

> Install the face-age SDK and run your first skin analysis in a few lines.

The [`face-age`](https://www.npmjs.com/package/face-age) SDK detects skin age, wrinkles, acne, dark circles, pores, pigmentation, oiliness and more — then shows personalized product recommendations and routines, embedded directly in your website or app.

![Face Age SDK: skin analysis with 13 concerns, skin age and health, quiz, routines, PDF report, history and compare, products, 40 languages and analytics events](https://mintcdn.com/getfaceage-com/Gew1M3fMwJ_-pILr/images/developer-guides/quickstart-hero.jpg?fit=max\&auto=format\&n=Gew1M3fMwJ_-pILr\&q=85\&s=47d51fb5dba13ee04994b3b6f19c6869)

## How it works

**1. Embed**

Add a `<div>` to your page and initialize `FaceAge` with your Client ID.

**2. User scans**

The user takes a photo or uploads one, and the SDK runs the AI analysis.

**3. Results display**

Skin age, damage score and detected problems are shown.

**4. Recommendations**

Matched products and routines from your catalog appear automatically.

**5. Your code reacts**

Use the [SDK API](https://getfaceage.com/docs/developer-guides/reference/sdk-api.md) and [events](https://getfaceage.com/docs/developer-guides/integrations/events.md) to connect to your cart, CRM or analytics.

## 1. Get your Client ID

You need a Face Age Client ID — the Face Age ID in the **API keys** page of your business in the [panel](https://panel.getfaceage.com). See [Getting set up](https://getfaceage.com/docs/developer-guides/introduction.md).

## 2. Install

```bash npm theme={null}
npm install face-age --save
```

```bash yarn theme={null}
yarn add face-age
```

```html CDN theme={null}
<script src="https://cdn.jsdelivr.net/npm/face-age"></script>
```

## 3. Render

Add a container element to your HTML:

```html theme={null}
<div id="FaceAge-module"></div>
```

Then initialize and render:

```js theme={null}
import FaceAge from 'face-age';

const faceAge = new FaceAge({
  elementId: 'FaceAge-module',   // your container element ID
  faceageId: '<Your Client ID>', // get yours at panel.getfaceage.com
  showProducts: true,
  showRoutine: true,
});

faceAge.render();
```

That's it — the skin analysis now runs on your page as a [section](https://getfaceage.com/docs/developer-guides/display-modes/section.md).

## What's next

Work through the guide in order, or jump to what you need:

> [card] [Display modes](https://getfaceage.com/docs/developer-guides/display-modes/overview.md)
>
> Section, modal or widget — with a live demo of each.

> [card] [Analysis](https://getfaceage.com/docs/developer-guides/analysis/skin-analysis.md)
>
> Skin concerns, the report, history and compare.

> [card] [Personalization](https://getfaceage.com/docs/developer-guides/personalization/quiz.md)
>
> Quiz, product recommendations, routines and discounts.

> [card] [Integrations](https://getfaceage.com/docs/developer-guides/integrations/events.md)
>
> Events, analytics and CRM.


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