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

# Display modes overview

> Three ways to put the scan on your site: a section, a full-screen modal or a compact widget.

The SDK renders in one of three display models. Pick one with the `displayModel` option — you can change it at any time.

> [card] [Section](https://getfaceage.com/docs/developer-guides/display-modes/section.md)
>
> Occupies a full row on any page — home, a landing page or a quiz page of its own.

> [card] [Modal](https://getfaceage.com/docs/developer-guides/display-modes/modal.md)
>
> A floating button on every page opens the analysis full-screen — shoppers never leave what they're browsing.

> [card] [Widget](https://getfaceage.com/docs/developer-guides/display-modes/widget.md)
>
> Shows only the analysis panel, so your own page can react to the result.

| Mode | `displayModel` | Container | Size |
| - | - | - | - |
| **Section** | `'section'` (default) | `elementId` required | Fills one content row; `height` defaults to `800px` |
| **Modal** | `'modal'` | Not needed | Full-screen overlay |
| **Widget** | `'widget'` | `elementId` required | Fixed-size panel; `width` defaults to `360px`, `height` to `580px` |

Every mode runs the same analysis and supports the same options, API and events. Only where and how it appears changes.

> [!TIP]
>
> Try all three on the [live demo](https://getfaceage.com/demo) — it's the real SDK running on a sample store.


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