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'],
  routinesSupport: ['cleanser', 'toner', 'serum'],
  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', 'acne']
• Options:
  • fineWrinkles
  • eyeWrinkles
  • deepWrinkles
  • darkCircle
  • eyeBag
  • pores
  • pigment
  • redness
  • oiliness
  • acne

Limit the types of skin issues displayed during analysis.

routinesSupport

• Type: Array
• Default: ['cleanser', 'toner', 'serum', 'eyeCream', 'spotTreatment', 'moisturizer', 'sunscreen', 'faceOil', 'nightCream']
• Options:
  • cleanser
  • toner
  • serum
  • spotTreatment
  • moisturizer
  • sunscreen
  • faceOil
  • nightCream

Restrict the supported skincare routine categories.

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 Image

Get the user's image after the analysis:

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

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]