Demo Face Age

A modern JavaScript library for skin beauty and healthcare, enabling the creation of interactive data visualizations with a simple-to-use API. The platform provides customized skincare solutions through precise skin analysis and is suitable for both commercial and non-commercial projects.

Getting Started

Installing

npm install face-age --save

yarn add face-age --save

Direct`<script>`Inclusion

You can also directly include the script in your HTML:

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

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: 'hi@getfaceage.com' },
  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: 'hi@getfaceage.com' }

Prepopulate quiz fields with user information.

showProducts

Type: Boolean
Example: false

showRoutine

Type: Boolean
Example: false

showAddToCart

Type: Boolean
Example: true

showCamera

Type: Boolean
Example: true

Allow users to capture images using the camera.

showUpload

Type: Boolean
Example: 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.

Get Started

Business Management

Custom Template

Skin Analyze Widget

Integrations