npm.io
2.4.6 • Published 4d ago

face-age

Licence
MIT
Version
2.4.6
Deps
0
Size
2.3 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

Face Age — AI Skin Analysis SDK

AI-powered JavaScript SDK for skin analysis, face scanning, and beauty tech applications.

Detect skin age, wrinkles, acne, dark circles, pores, pigmentation, oiliness, and more — then deliver personalized skincare product recommendations and routines, all embedded directly in your website or app.

npm version npm downloads MIT license

Live Demo · Get Your API Key · Website

Table of Contents

Features

  • 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
  • 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
  • Analysis History — persist previous scans via browser storage or your own backend
  • Discount Banners — display copyable promo codes in the recommendation flow
  • PDF Reports — generate downloadable skin analysis reports (plan-dependent)
  • Analytics — built-in Google Analytics (GTM) and Facebook Pixel event tracking
  • 40 Languages — full RTL support for Arabic, Persian, and Urdu

How It Works

  1. Embed a <div> on your page and initialize FaceAge with your license ID
  2. User scans — via camera or image upload; the SDK runs AI analysis in the browser
  3. Results display — skin age, damage score, and detected problems are shown
  4. Recommendations — matched products and routines from your catalog appear automatically
  5. Your code reacts — use the API and event callbacks to connect to your cart, CRM, or analytics

You only need a Face Age Client ID to get started.

Installation

npm / yarn
npm install face-age --save
yarn add face-age --save
CDN (script tag)
<script src="https://cdn.jsdelivr.net/npm/face-age"></script>
Framework Wrappers

Pre-built wrappers are available for component-based frameworks:

Framework Package
React react-face-age
Vue 2 vue-face-age
Vue 3 vue3-face-age

Quick Start

Add a container element to your HTML:

<div id="FaceAge-module"></div>

Then initialize and render:

import FaceAge from 'face-age';

const faceAge = new FaceAge({
  elementId: 'FaceAge-module',   // your container element ID
  faceageId: '<Your Client ID>', // get yours at panel.getfaceage.com
  showProducts: true,
  showRoutine: true,
});

faceAge.render();

Get your Client ID at panel.getfaceage.com — free account required.

Full Configuration Example
import FaceAge from 'face-age';

const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  displayModel: 'section',         // 'widget' | 'section' | 'modal'
  language: 'en',
  height: '550px',
  currency: '



Configuration Options


All options are passed to new FaceAge(options).


Core






Option
Type
Default
Description





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.




displayModel
String
'section'
Display mode: 'widget', 'section', or 'modal'.




language
String
'en'
UI language code. See 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.




currency
String
'
Currency symbol shown next to product prices.





Display Modes






Mode
Behavior





'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





Quiz






Option
Type
Default
Description





quiz
Boolean
true
Show the pre-analysis quiz form.




defaultQuiz
Object
—
Pre-fill quiz fields. Example: { email: 'user@example.com' }.





Products & Routines






Option
Type
Default
Description





showProducts
Boolean
false
Show product recommendations after analysis.




showRoutine
Boolean
false
Show skincare routine groupings.




showAddToCard
Boolean
true
Show add-to-cart buttons on products.




showAddToCardAll
Boolean
false
Show a single "add all to cart" button when template supports it.




routinesSupport
Array
[]
Limit routines to specific groups, e.g. ['cleanser', 'serum', 'moisturizer']. Empty = all groups.




showEmptyRoutines
Boolean
false
Show routine sections even when no product is matched.





Skin Analysis






Option
Type
Default
Description





problems
Array
all 13
Skin issues to detect and display. See full list below.




showCamera
Boolean
true
Allow users to capture a photo with their camera.




showUpload
Boolean
true
Allow users to upload an image from their device.




disableSkinHealth
Boolean
false
Hide the skin health/damage summary. Alias: disable_skin_health.




disableSkinAge
Boolean
false
Hide the skin age result. Alias: disable_skin_age.




disableImageAlert
Boolean
false
Disable the image quality warning. Alias: disable_image_alert.





Available problems values:


fineWrinkles · eyeWrinkles · deepWrinkles · darkCircle · eyeBag · pores · pigment · redness · oiliness · dryness · sagginess · dullness · acne


History






Option
Type
Default
Description





history
Boolean
false
Enable previous-analysis history. Stored in localStorage/cookies by default, or inject via faceAge.API.setHistoryData().





Promotions & Legal






Option
Type
Default
Description





privacyUrl
String
null
URL to your privacy policy. Invalid URLs are silently ignored.




discount
Object
null
Show a copyable promo code. Example: { title: 'Code at checkout', code: 'SAVE20' }.





Supported Languages


40 language codes are supported:


ar · bg · bn · cs · da · de · el · en · es · et · fa · fi · fr · he · hi · hr · hu · id · it · ja · ko · lt · lv · ms · nl · no · pl · pt · ro · ru · sk · sr · sv · th · tl · tr · uk · ur · vi · zh


Arabic (ar), Persian (fa), and Urdu (ur) automatically switch the UI to RTL layout.




Analytics Integration


Face Age fires events automatically. Connect Google Analytics or Facebook Pixel by passing your IDs as options.


Google Analytics / GTM


const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  gtag: 'G-XXXXXXXXXX',        // G-..., GT-..., or GTM-... format
  gtagInsert: true,             // auto-inject GTM script (default: true)
  gtagDataLayer: window.dataLayer, // optional: use a custom dataLayer
});


Facebook Pixel


const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  fbPixel: '123456789012345',  // your numeric Pixel ID
  fbPixelInsert: true,          // auto-inject Pixel script (default: true)
});


Tracked Events


The following interactions are tracked automatically in both GA and Pixel:






Event
Description





Quiz start / completion
User begins or finishes the quiz




Quiz question views & choices
Each question view and answer selection




Skin analysis start
Analysis begins




Photo selection / capture
Image uploaded or camera used




Results view
Analysis results displayed




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




Download report
PDF report download initiated







API Reference


After calling faceAge.render(), use faceAge.API to read results and interact with the SDK programmatically.


Read Analysis Results


faceAge.API.getAdvisorData((data) => {
  console.log(data.analysis);        // skin age, damage %, detected problems
  console.log(data.activeSelections); // quiz answers
});


Read Quiz Answers


faceAge.API.getActiveSelections((data) => {
  console.log(data); // { email, skinType, ... }
});


Read the Submitted Image


const image = faceAge.API.getImage();


Read Available Routine Groups


const groups = faceAge.API.getRoutineGroup();


Set Custom Products


Push your own product catalog into the SDK — it will match products to detected skin problems automatically.


faceAge.API.setCustomProducts([
  {
    id: 1,
    url: 'https://yourstore.com/product',
    image: 'https://yourstore.com/product.png',
    title: 'Skin Moisturizer',
    description: 'Vitamin C · 30ml',          // optional
    price: 40,
    offerPrice: 18.99,                         // optional sale price
    problems: ['acne', 'wrinkles'],            // optional: target problems
    routineGroups: { morning: ['cleanser', 'serum'] }, // optional
    variables: {                               // optional: size/variant picker
      size: {
        title: 'Size',
        option: [
          { label: '10 cc', value: '10', price: 40, offerPrice: 18.99 },
          { label: '25 cc', value: '25', price: 52 },
          { label: '35 cc', value: '35' },
        ],
      },
    },
  },
]);


History Management


Restore history from your backend (requires history: true):


faceAge.API.setHistoryData({
  analysis: {
    analyze_ref_token: 'analyze_ref_abc123',
    skinAge: 28,
    damagePercentage: 12.4,
    problems: [],
  },
  activeSelections: {
    email: 'user@example.com',
    skinType: 'combination',
  },
  meta: {
    ts: Date.now(),
    image: 'https://example.com/scan.jpg',
  },
});


Remove a history entry by reference token. Pass null to clear all local history:


faceAge.API.removeHistoryItem('analyze_ref_abc123').then((removed) => {
  console.log('Removed:', removed);
});


Generate PDF Report


Requires PDF access on your Face Age plan.


faceAge.API.getReportPdf()
  .then((report) => console.log('Report:', report))
  .catch((err) => console.error('Failed:', err));


Submit SDK Integration


Send the full analysis payload (skin results, products, quiz data, brand metadata) to the SDK-call integration endpoint. If no email is provided, Face Age falls back to email or clientEmail from quiz answers.


// Basic
faceAge.API.submitSdkIntegration('user@example.com').then((res) => {
  console.log('Submitted:', res);
});

// With extra metadata
faceAge.API.submitSdkIntegration('user@example.com', {
  name: 'Jane Doe',
  skinType: 'dry',
  skinConcern: ['fineWrinkles', 'dryness'],
});


Quiz data is automatically normalized to [{ question, answer }] before submission.




Events


Register callbacks to react to user interactions in real time.






Event
Callback signature
Fires when





onClickProblem
(key: string)
User taps a skin problem in the results




onDisplayProducts
(data)
Product list becomes visible




onDisplayRoutines
(data)
Routine list becomes visible




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




onCheckout
(data)
User clicks the checkout button





Example:


faceAge.onAddToCart((data) => {
  // data contains product details
  myCart.add(data);
});

faceAge.onCloseModal(() => {
  // redirect to cart if items were added
  if (myCart.hasItems()) window.location.href = '/cart';
});

faceAge.onClickProblem((key) => {
  console.log('Problem selected:', key); // e.g. 'acne'
});




Contact













Website
getfaceage.com




Dashboard
panel.getfaceage.com




Email
dev@getfaceage.com




,

  // Quiz
  quiz: true,
  defaultQuiz: { email: 'user@example.com' },

  // History
  history: true,

  // Products & routines
  showProducts: true,
  showRoutine: true,
  showAddToCard: true,
  showAddToCardAll: false,
  routinesSupport: ['cleanser', 'serum', 'moisturizer'],
  showEmptyRoutines: false,

  // Skin problems to analyze
  problems: ['fineWrinkles', 'eyeWrinkles', 'acne', 'pores'],

  // Capture
  showCamera: true,
  showUpload: true,

  // Legal & promotions
  privacyUrl: 'https://example.com/privacy',
  discount: { title: 'Use this code at checkout', code: 'FACEAGE20' },

  // Display toggles
  disableSkinHealth: false,
  disableSkinAge: false,
  disableImageAlert: false,
});

faceAge.render();

Configuration Options

All options are passed to __INLINE_CODE_2__.

Core
Option Type Default Description
__INLINE_CODE_3__ __INLINE_CODE_4__ — Required for __INLINE_CODE_5__ and __INLINE_CODE_6__ display modes. ID of the container element.
__INLINE_CODE_7__ __INLINE_CODE_8__ — Required. Your Face Age license ID from the panel.
__INLINE_CODE_9__ __INLINE_CODE_10__ __INLINE_CODE_11__ Display mode: __INLINE_CODE_12__, __INLINE_CODE_13__, or __INLINE_CODE_14__.
__INLINE_CODE_15__ __INLINE_CODE_16__ __INLINE_CODE_17__ UI language code. See supported languages below.
__INLINE_CODE_18__ __INLINE_CODE_19__ __INLINE_CODE_20__ Width of the widget — only applies when __INLINE_CODE_21__ is __INLINE_CODE_22__.
__INLINE_CODE_23__ __INLINE_CODE_24__ __INLINE_CODE_25__ / __INLINE_CODE_26__ Height of the widget — defaults differ for __INLINE_CODE_27__ vs __INLINE_CODE_28__.
__INLINE_CODE_29__ __INLINE_CODE_30__ __INLINE_CODE_31__ Currency symbol shown next to product prices.
Display Modes
Mode Behavior
__INLINE_CODE_32__ Renders inline, expanding to fill one content row on the page
__INLINE_CODE_33__ Renders as a fixed-size standalone panel (respects __INLINE_CODE_34__ and __INLINE_CODE_35__)
__INLINE_CODE_36__ Opens as a full-screen overlay; no __INLINE_CODE_37__ required
Quiz
Option Type Default Description
__INLINE_CODE_38__ __INLINE_CODE_39__ __INLINE_CODE_40__ Show the pre-analysis quiz form.
__INLINE_CODE_41__ __INLINE_CODE_42__ — Pre-fill quiz fields. Example: __INLINE_CODE_43__.
Products & Routines
Option Type Default Description
__INLINE_CODE_44__ __INLINE_CODE_45__ __INLINE_CODE_46__ Show product recommendations after analysis.
__INLINE_CODE_47__ __INLINE_CODE_48__ __INLINE_CODE_49__ Show skincare routine groupings.
__INLINE_CODE_50__ __INLINE_CODE_51__ __INLINE_CODE_52__ Show add-to-cart buttons on products.
__INLINE_CODE_53__ __INLINE_CODE_54__ __INLINE_CODE_55__ Show a single "add all to cart" button when template supports it.
__INLINE_CODE_56__ __INLINE_CODE_57__ __INLINE_CODE_58__ Limit routines to specific groups, e.g. __INLINE_CODE_59__. Empty = all groups.
__INLINE_CODE_60__ __INLINE_CODE_61__ __INLINE_CODE_62__ Show routine sections even when no product is matched.
Skin Analysis
Option Type Default Description
__INLINE_CODE_63__ __INLINE_CODE_64__ all 13 Skin issues to detect and display. See full list below.
__INLINE_CODE_65__ __INLINE_CODE_66__ __INLINE_CODE_67__ Allow users to capture a photo with their camera.
__INLINE_CODE_68__ __INLINE_CODE_69__ __INLINE_CODE_70__ Allow users to upload an image from their device.
__INLINE_CODE_71__ __INLINE_CODE_72__ __INLINE_CODE_73__ Hide the skin health/damage summary. Alias: __INLINE_CODE_74__.
__INLINE_CODE_75__ __INLINE_CODE_76__ __INLINE_CODE_77__ Hide the skin age result. Alias: __INLINE_CODE_78__.
__INLINE_CODE_79__ __INLINE_CODE_80__ __INLINE_CODE_81__ Disable the image quality warning. Alias: __INLINE_CODE_82__.

Available __INLINE_CODE_83__ values:

__INLINE_CODE_84__ · __INLINE_CODE_85__ · __INLINE_CODE_86__ · __INLINE_CODE_87__ · __INLINE_CODE_88__ · __INLINE_CODE_89__ · __INLINE_CODE_90__ · __INLINE_CODE_91__ · __INLINE_CODE_92__ · __INLINE_CODE_93__ · __INLINE_CODE_94__ · __INLINE_CODE_95__ · __INLINE_CODE_96__

History
Option Type Default Description
__INLINE_CODE_97__ __INLINE_CODE_98__ __INLINE_CODE_99__ Enable previous-analysis history. Stored in __INLINE_CODE_100__/cookies by default, or inject via __INLINE_CODE_101__.
Promotions & Legal
Option Type Default Description
__INLINE_CODE_102__ __INLINE_CODE_103__ __INLINE_CODE_104__ URL to your privacy policy. Invalid URLs are silently ignored.
__INLINE_CODE_105__ __INLINE_CODE_106__ __INLINE_CODE_107__ Show a copyable promo code. Example: __INLINE_CODE_108__.
Supported Languages

40 language codes are supported:

__INLINE_CODE_109__ · __INLINE_CODE_110__ · __INLINE_CODE_111__ · __INLINE_CODE_112__ · __INLINE_CODE_113__ · __INLINE_CODE_114__ · __INLINE_CODE_115__ · __INLINE_CODE_116__ · __INLINE_CODE_117__ · __INLINE_CODE_118__ · __INLINE_CODE_119__ · __INLINE_CODE_120__ · __INLINE_CODE_121__ · __INLINE_CODE_122__ · __INLINE_CODE_123__ · __INLINE_CODE_124__ · __INLINE_CODE_125__ · __INLINE_CODE_126__ · __INLINE_CODE_127__ · __INLINE_CODE_128__ · __INLINE_CODE_129__ · __INLINE_CODE_130__ · __INLINE_CODE_131__ · __INLINE_CODE_132__ · __INLINE_CODE_133__ · __INLINE_CODE_134__ · __INLINE_CODE_135__ · __INLINE_CODE_136__ · __INLINE_CODE_137__ · __INLINE_CODE_138__ · __INLINE_CODE_139__ · __INLINE_CODE_140__ · __INLINE_CODE_141__ · __INLINE_CODE_142__ · __INLINE_CODE_143__ · __INLINE_CODE_144__ · __INLINE_CODE_145__ · __INLINE_CODE_146__ · __INLINE_CODE_147__ · __INLINE_CODE_148__

Arabic (__INLINE_CODE_149__), Persian (__INLINE_CODE_150__), and Urdu (__INLINE_CODE_151__) automatically switch the UI to RTL layout.

Analytics Integration

Face Age fires events automatically. Connect Google Analytics or Facebook Pixel by passing your IDs as options.

Google Analytics / GTM
__CODE_BLOCK_6__
Facebook Pixel
__CODE_BLOCK_7__
Tracked Events

The following interactions are tracked automatically in both GA and Pixel:

Event Description
Quiz start / completion User begins or finishes the quiz
Quiz question views & choices Each question view and answer selection
Skin analysis start Analysis begins
Photo selection / capture Image uploaded or camera used
Results view Analysis results displayed
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
Download report PDF report download initiated

API Reference

After calling __INLINE_CODE_152__, use __INLINE_CODE_153__ to read results and interact with the SDK programmatically.

Read Analysis Results
__CODE_BLOCK_8__
Read Quiz Answers
__CODE_BLOCK_9__
Read the Submitted Image
__CODE_BLOCK_10__
Read Available Routine Groups
__CODE_BLOCK_11__
Set Custom Products

Push your own product catalog into the SDK — it will match products to detected skin problems automatically.

__CODE_BLOCK_12__
History Management

Restore history from your backend (requires __INLINE_CODE_154__):

__CODE_BLOCK_13__

Remove a history entry by reference token. Pass __INLINE_CODE_155__ to clear all local history:

__CODE_BLOCK_14__
Generate PDF Report

Requires PDF access on your Face Age plan.

__CODE_BLOCK_15__
Submit SDK Integration

Send the full analysis payload (skin results, products, quiz data, brand metadata) to the SDK-call integration endpoint. If no email is provided, Face Age falls back to __INLINE_CODE_156__ or __INLINE_CODE_157__ from quiz answers.

__CODE_BLOCK_16__

Quiz data is automatically normalized to __INLINE_CODE_158__ before submission.

Events

Register callbacks to react to user interactions in real time.

Event Callback signature Fires when
__INLINE_CODE_159__ __INLINE_CODE_160__ User taps a skin problem in the results
__INLINE_CODE_161__ __INLINE_CODE_162__ Product list becomes visible
__INLINE_CODE_163__ __INLINE_CODE_164__ Routine list becomes visible
__INLINE_CODE_165__ __INLINE_CODE_166__ User clicks add to cart
__INLINE_CODE_167__ __INLINE_CODE_168__ User clicks a product card
__INLINE_CODE_169__ __INLINE_CODE_170__ User clicks reset / start over
__INLINE_CODE_171__ __INLINE_CODE_172__ User closes the modal
__INLINE_CODE_173__ __INLINE_CODE_174__ User clicks the checkout button

Example:

__CODE_BLOCK_17__

Contact
Website getfaceage.com
Dashboard panel.getfaceage.com
Email dev@getfaceage.com
Currency symbol shown next to product prices.
Display Modes
Mode Behavior
__INLINE_CODE_32__ Renders inline, expanding to fill one content row on the page
__INLINE_CODE_33__ Renders as a fixed-size standalone panel (respects __INLINE_CODE_34__ and __INLINE_CODE_35__)
__INLINE_CODE_36__ Opens as a full-screen overlay; no __INLINE_CODE_37__ required
Quiz
Option Type Default Description
__INLINE_CODE_38__ __INLINE_CODE_39__ __INLINE_CODE_40__ Show the pre-analysis quiz form.
__INLINE_CODE_41__ __INLINE_CODE_42__ — Pre-fill quiz fields. Example: __INLINE_CODE_43__.
Products & Routines
Option Type Default Description
__INLINE_CODE_44__ __INLINE_CODE_45__ __INLINE_CODE_46__ Show product recommendations after analysis.
__INLINE_CODE_47__ __INLINE_CODE_48__ __INLINE_CODE_49__ Show skincare routine groupings.
__INLINE_CODE_50__ __INLINE_CODE_51__ __INLINE_CODE_52__ Show add-to-cart buttons on products.
__INLINE_CODE_53__ __INLINE_CODE_54__ __INLINE_CODE_55__ Show a single "add all to cart" button when template supports it.
__INLINE_CODE_56__ __INLINE_CODE_57__ __INLINE_CODE_58__ Limit routines to specific groups, e.g. __INLINE_CODE_59__. Empty = all groups.
__INLINE_CODE_60__ __INLINE_CODE_61__ __INLINE_CODE_62__ Show routine sections even when no product is matched.
Skin Analysis
Option Type Default Description
__INLINE_CODE_63__ __INLINE_CODE_64__ all 13 Skin issues to detect and display. See full list below.
__INLINE_CODE_65__ __INLINE_CODE_66__ __INLINE_CODE_67__ Allow users to capture a photo with their camera.
__INLINE_CODE_68__ __INLINE_CODE_69__ __INLINE_CODE_70__ Allow users to upload an image from their device.
__INLINE_CODE_71__ __INLINE_CODE_72__ __INLINE_CODE_73__ Hide the skin health/damage summary. Alias: __INLINE_CODE_74__.
__INLINE_CODE_75__ __INLINE_CODE_76__ __INLINE_CODE_77__ Hide the skin age result. Alias: __INLINE_CODE_78__.
__INLINE_CODE_79__ __INLINE_CODE_80__ __INLINE_CODE_81__ Disable the image quality warning. Alias: __INLINE_CODE_82__.

Available __INLINE_CODE_83__ values:

__INLINE_CODE_84__ · __INLINE_CODE_85__ · __INLINE_CODE_86__ · __INLINE_CODE_87__ · __INLINE_CODE_88__ · __INLINE_CODE_89__ · __INLINE_CODE_90__ · __INLINE_CODE_91__ · __INLINE_CODE_92__ · __INLINE_CODE_93__ · __INLINE_CODE_94__ · __INLINE_CODE_95__ · __INLINE_CODE_96__

History
Option Type Default Description
__INLINE_CODE_97__ __INLINE_CODE_98__ __INLINE_CODE_99__ Enable previous-analysis history. Stored in __INLINE_CODE_100__/cookies by default, or inject via __INLINE_CODE_101__.
Promotions & Legal
Option Type Default Description
__INLINE_CODE_102__ __INLINE_CODE_103__ __INLINE_CODE_104__ URL to your privacy policy. Invalid URLs are silently ignored.
__INLINE_CODE_105__ __INLINE_CODE_106__ __INLINE_CODE_107__ Show a copyable promo code. Example: __INLINE_CODE_108__.
Supported Languages

40 language codes are supported:

__INLINE_CODE_109__ · __INLINE_CODE_110__ · __INLINE_CODE_111__ · __INLINE_CODE_112__ · __INLINE_CODE_113__ · __INLINE_CODE_114__ · __INLINE_CODE_115__ · __INLINE_CODE_116__ · __INLINE_CODE_117__ · __INLINE_CODE_118__ · __INLINE_CODE_119__ · __INLINE_CODE_120__ · __INLINE_CODE_121__ · __INLINE_CODE_122__ · __INLINE_CODE_123__ · __INLINE_CODE_124__ · __INLINE_CODE_125__ · __INLINE_CODE_126__ · __INLINE_CODE_127__ · __INLINE_CODE_128__ · __INLINE_CODE_129__ · __INLINE_CODE_130__ · __INLINE_CODE_131__ · __INLINE_CODE_132__ · __INLINE_CODE_133__ · __INLINE_CODE_134__ · __INLINE_CODE_135__ · __INLINE_CODE_136__ · __INLINE_CODE_137__ · __INLINE_CODE_138__ · __INLINE_CODE_139__ · __INLINE_CODE_140__ · __INLINE_CODE_141__ · __INLINE_CODE_142__ · __INLINE_CODE_143__ · __INLINE_CODE_144__ · __INLINE_CODE_145__ · __INLINE_CODE_146__ · __INLINE_CODE_147__ · __INLINE_CODE_148__

Arabic (__INLINE_CODE_149__), Persian (__INLINE_CODE_150__), and Urdu (__INLINE_CODE_151__) automatically switch the UI to RTL layout.

Analytics Integration

Face Age fires events automatically. Connect Google Analytics or Facebook Pixel by passing your IDs as options.

Google Analytics / GTM
const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  gtag: 'G-XXXXXXXXXX',        // G-..., GT-..., or GTM-... format
  gtagInsert: true,             // auto-inject GTM script (default: true)
  gtagDataLayer: window.dataLayer, // optional: use a custom dataLayer
});
Facebook Pixel
const faceAge = new FaceAge({
  elementId: 'FaceAge-module',
  faceageId: '<Your Client ID>',
  fbPixel: '123456789012345',  // your numeric Pixel ID
  fbPixelInsert: true,          // auto-inject Pixel script (default: true)
});
Tracked Events

The following interactions are tracked automatically in both GA and Pixel:

Event Description
Quiz start / completion User begins or finishes the quiz
Quiz question views & choices Each question view and answer selection
Skin analysis start Analysis begins
Photo selection / capture Image uploaded or camera used
Results view Analysis results displayed
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
Download report PDF report download initiated

API Reference

After calling __INLINE_CODE_152__, use __INLINE_CODE_153__ to read results and interact with the SDK programmatically.

Read Analysis Results
faceAge.API.getAdvisorData((data) => {
  console.log(data.analysis);        // skin age, damage %, detected problems
  console.log(data.activeSelections); // quiz answers
});
Read Quiz Answers
faceAge.API.getActiveSelections((data) => {
  console.log(data); // { email, skinType, ... }
});
Read the Submitted Image
const image = faceAge.API.getImage();
Read Available Routine Groups
const groups = faceAge.API.getRoutineGroup();
Set Custom Products

Push your own product catalog into the SDK — it will match products to detected skin problems automatically.

faceAge.API.setCustomProducts([
  {
    id: 1,
    url: 'https://yourstore.com/product',
    image: 'https://yourstore.com/product.png',
    title: 'Skin Moisturizer',
    description: 'Vitamin C · 30ml',          // optional
    price: 40,
    offerPrice: 18.99,                         // optional sale price
    problems: ['acne', 'wrinkles'],            // optional: target problems
    routineGroups: { morning: ['cleanser', 'serum'] }, // optional
    variables: {                               // optional: size/variant picker
      size: {
        title: 'Size',
        option: [
          { label: '10 cc', value: '10', price: 40, offerPrice: 18.99 },
          { label: '25 cc', value: '25', price: 52 },
          { label: '35 cc', value: '35' },
        ],
      },
    },
  },
]);
History Management

Restore history from your backend (requires __INLINE_CODE_154__):

faceAge.API.setHistoryData({
  analysis: {
    analyze_ref_token: 'analyze_ref_abc123',
    skinAge: 28,
    damagePercentage: 12.4,
    problems: [],
  },
  activeSelections: {
    email: 'user@example.com',
    skinType: 'combination',
  },
  meta: {
    ts: Date.now(),
    image: 'https://example.com/scan.jpg',
  },
});

Remove a history entry by reference token. Pass __INLINE_CODE_155__ to clear all local history:

faceAge.API.removeHistoryItem('analyze_ref_abc123').then((removed) => {
  console.log('Removed:', removed);
});
Generate PDF Report

Requires PDF access on your Face Age plan.

faceAge.API.getReportPdf()
  .then((report) => console.log('Report:', report))
  .catch((err) => console.error('Failed:', err));
Submit SDK Integration

Send the full analysis payload (skin results, products, quiz data, brand metadata) to the SDK-call integration endpoint. If no email is provided, Face Age falls back to __INLINE_CODE_156__ or __INLINE_CODE_157__ from quiz answers.

// Basic
faceAge.API.submitSdkIntegration('user@example.com').then((res) => {
  console.log('Submitted:', res);
});

// With extra metadata
faceAge.API.submitSdkIntegration('user@example.com', {
  name: 'Jane Doe',
  skinType: 'dry',
  skinConcern: ['fineWrinkles', 'dryness'],
});

Quiz data is automatically normalized to __INLINE_CODE_158__ before submission.

Events

Register callbacks to react to user interactions in real time.

Event Callback signature Fires when
__INLINE_CODE_159__ __INLINE_CODE_160__ User taps a skin problem in the results
__INLINE_CODE_161__ __INLINE_CODE_162__ Product list becomes visible
__INLINE_CODE_163__ __INLINE_CODE_164__ Routine list becomes visible
__INLINE_CODE_165__ __INLINE_CODE_166__ User clicks add to cart
__INLINE_CODE_167__ __INLINE_CODE_168__ User clicks a product card
__INLINE_CODE_169__ __INLINE_CODE_170__ User clicks reset / start over
__INLINE_CODE_171__ __INLINE_CODE_172__ User closes the modal
__INLINE_CODE_173__ __INLINE_CODE_174__ User clicks the checkout button

Example:

faceAge.onAddToCart((data) => {
  // data contains product details
  myCart.add(data);
});

faceAge.onCloseModal(() => {
  // redirect to cart if items were added
  if (myCart.hasItems()) window.location.href = '/cart';
});

faceAge.onClickProblem((key) => {
  console.log('Problem selected:', key); // e.g. 'acne'
});

Contact
Website getfaceage.com
Dashboard panel.getfaceage.com
Email dev@getfaceage.com
, // Quiz quiz: true, defaultQuiz: { email: 'user@example.com' }, // History history: true, // Products & routines showProducts: true, showRoutine: true, showAddToCard: true, showAddToCardAll: false, routinesSupport: ['cleanser', 'serum', 'moisturizer'], showEmptyRoutines: false, // Skin problems to analyze problems: ['fineWrinkles', 'eyeWrinkles', 'acne', 'pores'], // Capture showCamera: true, showUpload: true, // Legal & promotions privacyUrl: 'https://example.com/privacy', discount: { title: 'Use this code at checkout', code: 'FACEAGE20' }, // Display toggles disableSkinHealth: false, disableSkinAge: false, disableImageAlert: false, }); faceAge.render();

Configuration Options

All options are passed to __INLINE_CODE_2__.

Core
Option Type Default Description
__INLINE_CODE_3__ __INLINE_CODE_4__ — Required for __INLINE_CODE_5__ and __INLINE_CODE_6__ display modes. ID of the container element.
__INLINE_CODE_7__ __INLINE_CODE_8__ — Required. Your Face Age license ID from the panel.
__INLINE_CODE_9__ __INLINE_CODE_10__ __INLINE_CODE_11__ Display mode: __INLINE_CODE_12__, __INLINE_CODE_13__, or __INLINE_CODE_14__.
__INLINE_CODE_15__ __INLINE_CODE_16__ __INLINE_CODE_17__ UI language code. See supported languages below.
__INLINE_CODE_18__ __INLINE_CODE_19__ __INLINE_CODE_20__ Width of the widget — only applies when __INLINE_CODE_21__ is __INLINE_CODE_22__.
__INLINE_CODE_23__ __INLINE_CODE_24__ __INLINE_CODE_25__ / __INLINE_CODE_26__ Height of the widget — defaults differ for __INLINE_CODE_27__ vs __INLINE_CODE_28__.
__INLINE_CODE_29__ __INLINE_CODE_30__ __INLINE_CODE_31__ Currency symbol shown next to product prices.
Display Modes
Mode Behavior
__INLINE_CODE_32__ Renders inline, expanding to fill one content row on the page
__INLINE_CODE_33__ Renders as a fixed-size standalone panel (respects __INLINE_CODE_34__ and __INLINE_CODE_35__)
__INLINE_CODE_36__ Opens as a full-screen overlay; no __INLINE_CODE_37__ required
Quiz
Option Type Default Description
__INLINE_CODE_38__ __INLINE_CODE_39__ __INLINE_CODE_40__ Show the pre-analysis quiz form.
__INLINE_CODE_41__ __INLINE_CODE_42__ — Pre-fill quiz fields. Example: __INLINE_CODE_43__.
Products & Routines
Option Type Default Description
__INLINE_CODE_44__ __INLINE_CODE_45__ __INLINE_CODE_46__ Show product recommendations after analysis.
__INLINE_CODE_47__ __INLINE_CODE_48__ __INLINE_CODE_49__ Show skincare routine groupings.
__INLINE_CODE_50__ __INLINE_CODE_51__ __INLINE_CODE_52__ Show add-to-cart buttons on products.
__INLINE_CODE_53__ __INLINE_CODE_54__ __INLINE_CODE_55__ Show a single "add all to cart" button when template supports it.
__INLINE_CODE_56__ __INLINE_CODE_57__ __INLINE_CODE_58__ Limit routines to specific groups, e.g. __INLINE_CODE_59__. Empty = all groups.
__INLINE_CODE_60__ __INLINE_CODE_61__ __INLINE_CODE_62__ Show routine sections even when no product is matched.
Skin Analysis
Option Type Default Description
__INLINE_CODE_63__ __INLINE_CODE_64__ all 13 Skin issues to detect and display. See full list below.
__INLINE_CODE_65__ __INLINE_CODE_66__ __INLINE_CODE_67__ Allow users to capture a photo with their camera.
__INLINE_CODE_68__ __INLINE_CODE_69__ __INLINE_CODE_70__ Allow users to upload an image from their device.
__INLINE_CODE_71__ __INLINE_CODE_72__ __INLINE_CODE_73__ Hide the skin health/damage summary. Alias: __INLINE_CODE_74__.
__INLINE_CODE_75__ __INLINE_CODE_76__ __INLINE_CODE_77__ Hide the skin age result. Alias: __INLINE_CODE_78__.
__INLINE_CODE_79__ __INLINE_CODE_80__ __INLINE_CODE_81__ Disable the image quality warning. Alias: __INLINE_CODE_82__.

Available __INLINE_CODE_83__ values:

__INLINE_CODE_84__ · __INLINE_CODE_85__ · __INLINE_CODE_86__ · __INLINE_CODE_87__ · __INLINE_CODE_88__ · __INLINE_CODE_89__ · __INLINE_CODE_90__ · __INLINE_CODE_91__ · __INLINE_CODE_92__ · __INLINE_CODE_93__ · __INLINE_CODE_94__ · __INLINE_CODE_95__ · __INLINE_CODE_96__

History
Option Type Default Description
__INLINE_CODE_97__ __INLINE_CODE_98__ __INLINE_CODE_99__ Enable previous-analysis history. Stored in __INLINE_CODE_100__/cookies by default, or inject via __INLINE_CODE_101__.
Promotions & Legal
Option Type Default Description
__INLINE_CODE_102__ __INLINE_CODE_103__ __INLINE_CODE_104__ URL to your privacy policy. Invalid URLs are silently ignored.
__INLINE_CODE_105__ __INLINE_CODE_106__ __INLINE_CODE_107__ Show a copyable promo code. Example: __INLINE_CODE_108__.
Supported Languages

40 language codes are supported:

__INLINE_CODE_109__ · __INLINE_CODE_110__ · __INLINE_CODE_111__ · __INLINE_CODE_112__ · __INLINE_CODE_113__ · __INLINE_CODE_114__ · __INLINE_CODE_115__ · __INLINE_CODE_116__ · __INLINE_CODE_117__ · __INLINE_CODE_118__ · __INLINE_CODE_119__ · __INLINE_CODE_120__ · __INLINE_CODE_121__ · __INLINE_CODE_122__ · __INLINE_CODE_123__ · __INLINE_CODE_124__ · __INLINE_CODE_125__ · __INLINE_CODE_126__ · __INLINE_CODE_127__ · __INLINE_CODE_128__ · __INLINE_CODE_129__ · __INLINE_CODE_130__ · __INLINE_CODE_131__ · __INLINE_CODE_132__ · __INLINE_CODE_133__ · __INLINE_CODE_134__ · __INLINE_CODE_135__ · __INLINE_CODE_136__ · __INLINE_CODE_137__ · __INLINE_CODE_138__ · __INLINE_CODE_139__ · __INLINE_CODE_140__ · __INLINE_CODE_141__ · __INLINE_CODE_142__ · __INLINE_CODE_143__ · __INLINE_CODE_144__ · __INLINE_CODE_145__ · __INLINE_CODE_146__ · __INLINE_CODE_147__ · __INLINE_CODE_148__

Arabic (__INLINE_CODE_149__), Persian (__INLINE_CODE_150__), and Urdu (__INLINE_CODE_151__) automatically switch the UI to RTL layout.

Analytics Integration

Face Age fires events automatically. Connect Google Analytics or Facebook Pixel by passing your IDs as options.

Google Analytics / GTM
__CODE_BLOCK_6__
Facebook Pixel
__CODE_BLOCK_7__
Tracked Events

The following interactions are tracked automatically in both GA and Pixel:

Event Description
Quiz start / completion User begins or finishes the quiz
Quiz question views & choices Each question view and answer selection
Skin analysis start Analysis begins
Photo selection / capture Image uploaded or camera used
Results view Analysis results displayed
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
Download report PDF report download initiated

API Reference

After calling __INLINE_CODE_152__, use __INLINE_CODE_153__ to read results and interact with the SDK programmatically.

Read Analysis Results
__CODE_BLOCK_8__
Read Quiz Answers
__CODE_BLOCK_9__
Read the Submitted Image
__CODE_BLOCK_10__
Read Available Routine Groups
__CODE_BLOCK_11__
Set Custom Products

Push your own product catalog into the SDK — it will match products to detected skin problems automatically.

__CODE_BLOCK_12__
History Management

Restore history from your backend (requires __INLINE_CODE_154__):

__CODE_BLOCK_13__

Remove a history entry by reference token. Pass __INLINE_CODE_155__ to clear all local history:

__CODE_BLOCK_14__
Generate PDF Report

Requires PDF access on your Face Age plan.

__CODE_BLOCK_15__
Submit SDK Integration

Send the full analysis payload (skin results, products, quiz data, brand metadata) to the SDK-call integration endpoint. If no email is provided, Face Age falls back to __INLINE_CODE_156__ or __INLINE_CODE_157__ from quiz answers.

__CODE_BLOCK_16__

Quiz data is automatically normalized to __INLINE_CODE_158__ before submission.

Events

Register callbacks to react to user interactions in real time.

Event Callback signature Fires when
__INLINE_CODE_159__ __INLINE_CODE_160__ User taps a skin problem in the results
__INLINE_CODE_161__ __INLINE_CODE_162__ Product list becomes visible
__INLINE_CODE_163__ __INLINE_CODE_164__ Routine list becomes visible
__INLINE_CODE_165__ __INLINE_CODE_166__ User clicks add to cart
__INLINE_CODE_167__ __INLINE_CODE_168__ User clicks a product card
__INLINE_CODE_169__ __INLINE_CODE_170__ User clicks reset / start over
__INLINE_CODE_171__ __INLINE_CODE_172__ User closes the modal
__INLINE_CODE_173__ __INLINE_CODE_174__ User clicks the checkout button

Example:

__CODE_BLOCK_17__

Contact
Website getfaceage.com
Dashboard panel.getfaceage.com
Email dev@getfaceage.com

Keywords

skin-analysisface-analysisai-skincareskin-ageface-ageskin-scannerfacial-analysisskin-healthbeauty-sdkskincare-sdkai-beautywrinkle-detectionacne-detectionskin-typeskin-assessmentface-scancosmetic-analysisaiskinanalyzerfacialconsultationbeautyhealthcareskincarejavascript-sdkwidget