Getting Started

Installation

npm install face-age --save

yarn add face-age --save

Direct <script> Inclusion

<script src="https://cdn.jsdelivr.net/npm/face-age"></script>

Wrappers for React/Vue

Integrate easily with 3rd party frameworks

• react-face-age
• vue-face-age
• vue3-face-age

Usage

import FaceAge from 'face-age';

To create a basic analysis with minimal configuration:

const options = {
  elementId: 'FaceAge-module', // Required if using displayModel 'widget' or 'section'
  faceageId: '<Face Age Client ID>', // Your Face Age license ID
  showProducts: true,
  showRoutine: true,
};

const faceAge = new FaceAge(options);
faceAge.render();

Get Face Age ID

For more advanced settings:

const options = {
  elementId: 'FaceAge-module',
  faceageId: '<Face Age Client ID>', // Your Face Age license ID
  displayModel: 'section',
  language: 'en',
  height: '550px',
  currency: '$',
  quiz: true,
  defaultQuiz: { email: '[email protected]' },
  showProducts: true,
  showRoutine: true,
  showAddToCart: true,
  problems: ['fineWrinkles', 'eyeWrinkles'],
  showCamera: true,
  showUpload: true,
};

const faceAge = new FaceAge(options);
faceAge.render();

Options

You can set analysis options using new FaceAge(). To modify global default options, use the options object.

elementId

• Type: String

Required if using the displayModel 'widget' or 'section'.

faceageId

• Type: String

Your Face Age license ID, obtainable from the panel after creating an account.

displayModel

• Type: String
• Default: 'section'
• Options:
  • 'widget': Only displays the analysis environment.
  • 'section': Occupies one line on the page.
  • 'modal': Shows the analysis in a full-screen modal.

You can choose between different display modes.

language

• Type: String
• Default: 'en'

Specify the desired language.

width

• Type: Number (optional)

Applicable when displayModel is set to 'widget'.

height

• Type: Number (optional)

Applicable when displayModel is set to 'widget'.

currency

• Type: String
• Default: '$'

Set the currency unit.

quiz

• Type: Boolean
• Default: true

Toggle quiz display for users.

defaultQuiz

• Type: Object
• Example: { email: '[email protected]' }

Prepopulate quiz fields with user information.

showProducts

• Type: Boolean
• Default: false

showRoutine

• Type: Boolean
• Default: false

showAddToCart

• Type: Boolean
• Default: true

showCamera

• Type: Boolean
• Default: true

Allow users to capture images using the camera.

showUpload

• Type: Boolean
• Default: true

Enable or disable image uploads.

problems

• Type: Array
• Default: ['fineWrinkles', 'eyeWrinkles', 'deepWrinkles', 'darkCircle', 'eyeBag', 'pores', 'pigment', 'redness', 'oiliness', 'dryness', 'sagginess', 'dullness', 'acne']
• Options:
  • fineWrinkles
  • eyeWrinkles
  • deepWrinkles
  • darkCircle
  • eyeBag
  • pores
  • pigment
  • redness
  • oiliness
  • dryness
  • sagginess
  • dullness
  • acne

Limit the types of skin issues displayed during analysis.

Analytics Integration

Face Age supports integration with Google Analytics (GTM) and Facebook Pixel to track user interactions and conversions.

Google Analytics (GTM)

To integrate Google Analytics, add the following options:

const options = {
  elementId: 'FaceAge-module',
  faceageId: '<Face Age Client ID>',
  gtag: 'G-XXXXXXXXXX', // Your Google Analytics Measurement ID
  gtagInsert: true, // Optional: Automatically inject GTM script (default: true)
  gtagDataLayer: window.dataLayer, // Optional: Custom dataLayer (default: window.dataLayer)
};

const faceAge = new FaceAge(options);
faceAge.render();

GTM Options

• gtag (String): Your Google Analytics Measurement ID (format: G-XXXXXXXXXX, GT-XXXXXXXXXX, or GTM-XXXXXXXXXX)
• gtagInsert (Boolean, optional): Automatically inject the GTM script into the page. Default: true
• gtagDataLayer (Object, optional): Custom dataLayer object. Default: window.dataLayer

Facebook Pixel

To integrate Facebook Pixel, add the following options:

const options = {
  elementId: 'FaceAge-module',
  faceageId: '<Face Age Client ID>',
  fbPixel: '123456789012345', // Your Facebook Pixel ID
  fbPixelInsert: true, // Optional: Automatically inject Facebook Pixel script (default: true)
};

const faceAge = new FaceAge(options);
faceAge.render();

Facebook Pixel Options

• fbPixel (String): Your Facebook Pixel ID (numeric string)
• fbPixelInsert (Boolean, optional): Automatically inject the Facebook Pixel script into the page. Default: true

Using Both Analytics Services

You can use both Google Analytics and Facebook Pixel simultaneously:

const options = {
  elementId: 'FaceAge-module',
  faceageId: '<Face Age Client ID>',
  gtag: 'G-XXXXXXXXXX',
  gtagDataLayer: window.dataLayer,
  fbPixel: '123456789012345',
};

const faceAge = new FaceAge(options);
faceAge.render();

Tracked Events

Face Age automatically tracks the following user interactions:

• Quiz start and completion
• Quiz question views and choices
• Skin analysis start
• Photo selection and capture
• Results view
• Product views and interactions
• Add to cart actions
• Checkout button clicks
• Modal open/close events
• Download report actions

API

Once the image is analyzed, you can retrieve the results using the following commands:

Get Advisor Data

Retrieve advisor data after the analysis:

faceAge.API.getAdvisorData((data) => {
  console.log('Advisor data analysis:', data);
});

Get Active Selections

Retrieve active selections after completing the form:

faceAge.API.getActiveSelections((data) => {
  console.log('Quiz active selection data:', data);
});

Get Routine Groups

Retrieve routine groups that the software supports:

console.log('Routine Groups:', faceAge.API.getRoutineGroup());

Add Custom Products

Manually add and display custom products:

faceAge.API.setCustomProducts([
  {
    id: 1,
    url: 'https://getfaceage.com',
    image: 'https://demo.getfaceage.com/static/products/pr5.png',
    title: 'Skin moisturizers',
    description: 'Vitamin C. Rooster 30ml', //optional
    routineGroups: {'morning': ['cleanser', 'serum']}, //optional
    problems: ['acne', 'wrinkles'], //optional
    price: 40,
    offerPrice: 18.99, //optional
    variables: { //optional
      'size': {
        title: 'Size',
        option: [
          {label: '10 cc', value: '10', price: 40 /*optional*/, offerPrice: 18.99 /*optional*/},
          {label: '25 cc', value: '25', price: 52 /*optional*/, offerPrice: 19.99 /*optional*/},
          {label: '35 cc', value: '35'}
        ]
      }
    },
  }
]);

Complete Example of API Usage

faceAge.API.getAdvisorData((data) => {
  // Use the data from the analysis
  console.log('Advisor data analysis:', data);

  console.log('User Image:', faceAge.API.getImage());

  faceAge.API.getActiveSelections((data) => {
    console.log('Quiz active selection data:', data);
  });

  faceAge.API.setCustomProducts([
    {
      id: 1,
      url: 'https://getfaceage.com',
      image: 'https://demo.getfaceage.com/static/products/pr5.png',
      title: 'Skin moisturizers',
      description: 'Vitamin C. Rooster 30ml', //optional
      routineGroups: {'morning': ['cleanser', 'serum']}, //optional
      problems: ['acne', 'wrinkles'], //optional
      price: 40,
      offerPrice: 18.99, //optional
    }
  ]);

});

Events

Add custom event listeners for different interactions:

onClickProblem

faceAge.onClickProblem((key) => {
  // Get user status and information when they click on a problem
  console.log('User clicked on problem:', key);
});

onDisplayProducts

faceAge.onDisplayProducts((data) => {
  // Display product information when the product list is shown
  console.log('Display Products:', data);
});

onDisplayRoutines

faceAge.onDisplayRoutines((data) => {
  // Display routine information when the routine list is shown
  console.log('Display Routines:', data);
});

onAddToCart

faceAge.onAddToCart((data) => {
  // Retrieve product information when a user clicks add to cart
  console.log('User clicked add to cart:', data);
});

onClickProduct

faceAge.onClickProduct((product) => {
  // Retrieve product details when a user clicks on a product
  console.log('User clicked on product info:', product);
});

onResetData

faceAge.onResetData(() => {
  // Trigger when the user refreshes the information
  console.log('User clicked reset data');
});

onCloseModal

faceAge.onCloseModal(() => {
  // Trigger when the user closes the modal. You could forward them to checkout if products were added to cart.
  console.log('User clicked close');
});

onCheckout

faceAge.onCheckout((data) => {
  // Trigger when the user clicks the checkout button
  console.log('User clicked checkout');
});

New Features

• Face Mask & Skin Routine: Display skin routine products and allow users to manage their routines.
• Summary of Skin Information: Provide users with a summary of their skin analysis.
• Multiple Languages: Support for multiple languages and custom labels.
• Customizable Themes: Customizable themes and layouts to match user preferences.

Contact

• Website: getfaceage.com
• Panel: panel.getfaceage.com
• Email: [email protected]