2.1.14 • Published 5 months ago

face-age v2.1.14

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

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

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'],
  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
  • 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.

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

2.1.14

5 months ago

2.1.13

5 months ago

2.1.12

5 months ago

2.1.11

5 months ago

2.1.10

6 months ago

2.1.9

6 months ago

2.1.8

6 months ago

2.1.4

7 months ago

2.1.3

7 months ago

2.1.6

6 months ago

2.1.5

7 months ago

2.1.7

6 months ago

2.1.2

7 months ago

2.0.33

7 months ago

2.0.31

7 months ago

2.0.32

7 months ago

2.0.30

7 months ago

2.1.1

7 months ago

2.1.0

7 months ago

2.0.28

8 months ago

2.0.29

8 months ago

2.0.26

8 months ago

2.0.27

8 months ago

2.0.24

8 months ago

2.0.25

8 months ago

2.0.22

9 months ago

2.0.23

9 months ago

2.0.21

9 months ago

2.0.15

10 months ago

2.0.3

10 months ago

2.0.16

10 months ago

2.0.2

10 months ago

2.0.13

10 months ago

2.0.5

10 months ago

2.0.14

10 months ago

2.0.4

10 months ago

2.0.11

10 months ago

2.0.7

10 months ago

2.0.12

10 months ago

2.0.6

10 months ago

2.0.9

10 months ago

2.0.10

10 months ago

2.0.8

10 months ago

2.0.1

10 months ago

2.0.0

10 months ago

2.0.19

10 months ago

2.0.17

10 months ago

2.0.18

10 months ago

2.0.20

10 months ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.0

2 years ago