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

# Modal

> A floating button on every page opens the analysis full-screen.

In modal mode, a floating button appears on every page. It opens the analysis as a full-screen overlay, so shoppers never leave what they're browsing. No container element is needed.

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

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

## Add the modal

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

const faceAge = new FaceAge({
  faceageId: '<Your Client ID>',
  displayModel: 'modal',
});

faceAge.render();
```

Load this on every page where the button should appear — for example in your site layout.

## Send shoppers to the cart

Use `onCloseModal` to react when the shopper closes the modal — for example, go to the cart if they added products:

```js theme={null}
faceAge.onCloseModal(() => {
  if (myCart.hasItems()) window.location.href = '/cart';
});
```

See [Events](https://getfaceage.com/docs/developer-guides/integrations/events.md) for every callback.

## When to use it

* You want the scan available everywhere, without changing page layouts.
* Shoppers should be able to scan from a product page and come back to it.


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