face-age
v2.3.2
A skin data-based beauty & healthcare platform, which provides a customized solution through accurate skin analysis.
0/weekUpdated 1 weeks agoMITUnpacked: 1.4 MB
Published by milad mostafa
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
$3
``bash`
npm install face-age --save
or
`bash`
yarn add face-age --save
$3
You can also directly include the script in your HTML:
`bash`
Wrappers for React/Vue
Integrate easily with 3rd party frameworks
- react-face-age
- vue-face-age
- vue3-face-age
Usage
`js`
import FaceAge from 'face-age';
To create a basic analysis with minimal configuration:
`js
const options = {
elementId: 'FaceAge-module', // Required if using displayModel 'widget' or 'section'
faceageId: '
showProducts: true,
showRoutine: true,
};
const faceAge = new FaceAge(options);
faceAge.render();
`
For more advanced settings:
`js
const options = {
elementId: 'FaceAge-module',
faceageId: '
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.
$3
- Type: String
Required if using the displayModel 'widget' or 'section'.
$3
- Type: String
Your Face Age license ID, obtainable from the panel after creating an account.
$3
- Type: String
- Default:
- Options:
- : 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.
$3
- Type: String
- Default:
Specify the desired language.
$3
- Type: Number (optional)
Applicable when displayModel is set to 'widget'.
$3
- Type: Number (optional)
Applicable when displayModel is set to 'widget'.
$3
- Type: String
- Default:
Set the currency unit.
$3
- Type: Boolean
- Default:
Toggle quiz display for users.
$3
- Type: Object
- Example:
Prepopulate quiz fields with user information.
$3
- Type: Boolean
- Default:
$3
- Type: Boolean
- Default:
$3
- Type: Boolean
- Default:
$3
- Type: Boolean
- Default:
Allow users to capture images using the camera.
$3
- Type: Boolean
- Default:
Enable or disable image uploads.
$3
- Type: Array
- Default:
- Options:
-
-
-
-
-
-
-
-
-
-
-
-
-
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.
$3
To integrate Google Analytics, add the following options:
`js
const options = {
elementId: 'FaceAge-module',
faceageId: '
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)Boolean
- gtagInsert (, optional): Automatically inject the GTM script into the page. Default: true
- gtagDataLayer (, optional): Custom dataLayer object. Default: window.dataLayer
$3
To integrate Facebook Pixel, add the following options:
`js
const options = {
elementId: 'FaceAge-module',
faceageId: '
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)Boolean
- fbPixelInsert (, optional): Automatically inject the Facebook Pixel script into the page. Default: true
$3
You can use both Google Analytics and Facebook Pixel simultaneously:
`js
const options = {
elementId: 'FaceAge-module',
faceageId: '
gtag: 'G-XXXXXXXXXX',
gtagDataLayer: window.dataLayer,
fbPixel: '123456789012345',
};
const faceAge = new FaceAge(options);
faceAge.render();
`
$3
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:
$3
Retrieve advisor data after the analysis:
`js`
faceAge.API.getAdvisorData((data) => {
console.log('Advisor data analysis:', data);
});
$3
Retrieve active selections after completing the form:
`js`
faceAge.API.getActiveSelections((data) => {
console.log('Quiz active selection data:', data);
});
$3
Retrieve routine groups that the software supports:
`js`
console.log('Routine Groups:', faceAge.API.getRoutineGroup());
$3
Manually add and display custom products:
`js`
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
`js
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:
$3
`js`
faceAge.onClickProblem((key) => {
// Get user status and information when they click on a problem
console.log('User clicked on problem:', key);
});
$3
`js`
faceAge.onDisplayProducts((data) => {
// Display product information when the product list is shown
console.log('Display Products:', data);
});
$3
`js`
faceAge.onDisplayRoutines((data) => {
// Display routine information when the routine list is shown
console.log('Display Routines:', data);
});
$3
`js`
faceAge.onAddToCart((data) => {
// Retrieve product information when a user clicks add to cart
console.log('User clicked add to cart:', data);
});
$3
`js`
faceAge.onClickProduct((product) => {
// Retrieve product details when a user clicks on a product
console.log('User clicked on product info:', product);
});
$3
`js`
faceAge.onResetData(() => {
// Trigger when the user refreshes the information
console.log('User clicked reset data');
});
$3
`js`
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');
});
$3
`js``
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: dev@getfaceage.com