Modal - Face Age

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.

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:

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

See Events 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.