face-age 2.4.17 → 2.5.1

package/README.md

@@ -44,7 +44,7 @@ Detect skin age, wrinkles, acne, dark circles, pores, pigmentation, oiliness, an
 
 - **AI Skin Analysis** — camera capture or image upload with real-time face detection
 - **13 Skin Metrics** — wrinkles, acne, dark circles, pores, pigment, redness, oiliness, dryness, and more
-- **3 Display Modes** — embed as a widget, inline section, or full-screen modal
+- **4 Display Modes** — embed as a widget or inline section, open as a modal, or run as a fullscreen app
 - **Product Recommendations** — show matched products with add-to-cart and checkout callbacks
 - **Skincare Routines** — group recommendations by morning/evening routine steps
 - **Quiz Flow** — collect user preferences with pre-fillable form fields
@@ -131,7 +131,7 @@ import FaceAge from 'face-age';
 const faceAge = new FaceAge({
   elementId: 'FaceAge-module',
   faceageId: '<Your Client ID>',
-  displayModel: 'section',         // 'widget' | 'section' | 'modal'
+  displayModel: 'section',         // 'widget' | 'section' | 'modal' | 'fullscreen'
   language: 'en',
   height: '550px',
   currency: '$',
@@ -183,7 +183,7 @@ All options are passed to `new FaceAge(options)`.
 |--------|------|---------|-------------|
 | `elementId` | `String` | — | **Required** for `widget` and `section` display modes. ID of the container element. |
 | `faceageId` | `String` | — | **Required.** Your Face Age license ID from the [panel](https://panel.getfaceage.com). |
-| `displayModel` | `String` | `'section'` | Display mode: `'widget'`, `'section'`, or `'modal'`. |
+| `displayModel` | `String` | `'section'` | Display mode: `'widget'`, `'section'`, `'modal'`, or `'fullscreen'`. |
 | `language` | `String` | `'en'` | UI language code. See [supported languages](#supported-languages) below. |
 | `width` | `String` | `'360px'` | Width of the widget — only applies when `displayModel` is `'widget'`. |
 | `height` | `String` | `'800px'` / `'580px'` | Height of the widget — defaults differ for `section` vs `widget`. |
@@ -195,7 +195,38 @@ All options are passed to `new FaceAge(options)`.
 |------|----------|
 | `'section'` | Renders inline, expanding to fill one content row on the page |
 | `'widget'` | Renders as a fixed-size standalone panel (respects `width` and `height`) |
-| `'modal'` | Opens as a full-screen overlay; no `elementId` required |
+| `'modal'` | A floating button opens the analysis over the page: full screen on phones, a centered window (90% of the screen, up to 1140 × 800 px) on tablets and desktops. No `elementId` required. |
+| `'fullscreen'` | The app itself: opens right away over the whole screen, edge to edge, on every device. No floating button and no close button. No `elementId` required. |
+
+#### Fullscreen mode
+
+`'fullscreen'` turns the page into the app: the analysis opens as soon as `render()` runs and covers the whole screen. There is no floating button to open it and no way to close it — use it on a page that exists only for the scan.
+
+```js
+const faceAge = new FaceAge({
+  faceageId: '<Your Client ID>',
+  displayModel: 'fullscreen',
+});
+
+faceAge.render();
+```
+
+| | `'modal'` | `'fullscreen'` |
+|---|---|---|
+| Opens | When the shopper clicks the floating button | Right away, on `render()` |
+| Floating button | Yes | No |
+| Close button | Yes, in the top bar | No — it can't be closed |
+| Phones | Covers the whole screen | Covers the whole screen |
+| Tablets & desktops | Centered window with rounded corners over a dimmed page | Covers the whole screen, edge to edge, no frame |
+| Page behind it | Visible around the window, scrolling locked | Hidden, scrolling locked |
+| `onCloseModal` | Fires on close | Never fires |
+| `elementId`, `width`, `height` | Not used | Not used |
+
+- Fills the full width and height of the browser window and follows resizing and rotation.
+- On phones it uses the visible screen height, so the browser's address bar and toolbar never cut off the bottom.
+- On phones with a notch or rounded corners, the content stays inside the safe area.
+
+Use it for a dedicated scan page, a web app or a home-screen shortcut, or a large screen such as an in-store tablet or kiosk. Use `'modal'` when shoppers should open the scan from your normal pages and go back to them.
 
 ### Quiz
 
@@ -294,7 +325,7 @@ The following interactions are tracked automatically in both GA and Pixel:
 | Product view / interaction | Product card viewed or clicked |
 | Add to cart | Add-to-cart button clicked |
 | Checkout | Checkout button clicked |
-| Modal open / close | Modal opened or dismissed |
+| Modal open / close | Modal opened or dismissed (`modal` mode) |
 | Download report | PDF report download initiated |
 
 ---
@@ -507,7 +538,7 @@ Register callbacks to react to user interactions in real time.
 | `onAddToCart` | `(data)` | User clicks add to cart |
 | `onClickProduct` | `(product)` | User clicks a product card |
 | `onResetData` | `()` | User clicks reset / start over |
-| `onCloseModal` | `()` | User closes the modal |
+| `onCloseModal` | `()` | User closes the modal (`modal` mode only — `fullscreen` can't be closed) |
 | `onCheckout` | `(data)` | User clicks the checkout button |
 
 **Example:**