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

# Personalized routines

> Group recommendations into morning and night routine steps, with reviews and short videos.

Routines group the recommended products into morning and night skincare steps, so shoppers know what to use and when.

![Morning routine with matched products for each step](https://mintcdn.com/getfaceage-com/5bCKG5PyeJC4-Qa3/images/developer-guides/sdk-routine.jpg?fit=max\&auto=format\&n=5bCKG5PyeJC4-Qa3\&q=85\&s=99274d682f7e0ad131620cc5dc9fbaf4)

Manage the routine steps, their descriptions, the routine banner and the discount on the **Routine** page of your business in the [panel](https://panel.getfaceage.com).

![Routine page in the Face Age panel](https://mintcdn.com/getfaceage-com/wLP35CGqBY74yiOL/images/developer-guides/panel-routine.png?fit=max\&auto=format\&n=wLP35CGqBY74yiOL\&q=85\&s=4fccff99f0351097baacdb179d788d51)

## Show routines

```js theme={null}
const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  showRoutine: true,
  routinesSupport: ['cleanser', 'serum', 'moisturizer'],
  showEmptyRoutines: false,
});
```

| Option | Type | Default | Description |
| - | - | - | - |
| `showRoutine` | `Boolean` | `false` | Show the routine. |
| `routinesSupport` | `Array` | `[]` | Limit routines to specific steps. Empty means all steps. |
| `showEmptyRoutines` | `Boolean` | `false` | Show routine steps even when no product matches. |

Get the available routine steps from the SDK:

```js theme={null}
const groups = faceAge.API.getRoutineGroup();
```

## Put products in routine steps

Each product's `routineGroups` decides where it appears, by time of day:

```js theme={null}
{
  id: 1,
  title: 'Vitamin C Serum',
  // ...
  routineGroups: { morning: ['cleanser', 'serum'] },
}
```

See [Product recommendations](https://getfaceage.com/docs/developer-guides/personalization/product-recommendations.md#add-your-products) for the full product shape.

## Reviews in the routine tab

Fill the review carousel with `setComments`:

```js theme={null}
faceAge.API.setComments([
  {
    name: 'Jane Doe',
    comment: 'My skin feels amazing after just two weeks!', // also accepts: text, body
    image: 'https://example.com/avatar.jpg',               // optional; also: avatar, photo
    job_position: 'Verified Buyer',                        // optional; also: jobPosition, position, company
  },
]);
```

Each item needs `name` and one of `comment`, `text` or `body`. Comments longer than 280 characters get a "read more" toggle.

## Short videos in the routine tab

Fill the short video/image carousel with `setShorts`:

```js theme={null}
faceAge.API.setShorts([
  {
    coverImage: 'https://example.com/thumb.jpg', // also: cover_image, cover, image, thumbnail, poster
    videoUrl: 'https://example.com/clip.mp4',    // optional; also: video_url, video, src
    link: 'https://example.com/product',         // optional; also: url, href
    overlayText: 'Morning Routine',              // optional; also: overlay_text, title, text, caption, overlay
  },
]);
```

Each item needs `coverImage` or `videoUrl`. `javascript:`, `data:` and `vbscript:` URLs are rejected.

`onDisplayRoutines` fires when the routine becomes visible. See [Events](https://getfaceage.com/docs/developer-guides/integrations/events.md).

## Next

> [card] [Discount banners](https://getfaceage.com/docs/developer-guides/personalization/discounts.md)
>
> Your discount code, right after the scan.


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