face-age

<img src="https://static.getfaceage.com/logo.png" width="232px"> <a href="https://demo.getfaceage.com" target="_blank" rel="noopener noreferrer">Demo</a> / <a href="https://panel.getfaceage.com" target="_blank" rel="noopener noreferrer">Get Face Age ID</a> 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. <a href="https://getfaceage.com/"> <img src="https://static.getfaceage.com/v2.0/preview.png" /> </a> ## Getting Started ### Installation ```bash npm install face-age --save ``` or ```bash yarn add face-age --save ``` ### Direct `<script>` Inclusion You can also directly include the script in your HTML: ```bash <script src="https://cdn.jsdelivr.net/npm/face-age"></script> ``` ## Wrappers for React/Vue Integrate easily with 3rd party frameworks - [react-face-age](https://www.npmjs.com/package/react-face-age) - [vue-face-age](https://www.npmjs.com/package/vue-face-age) - [vue3-face-age](https://www.npmjs.com/package/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: '<Face Age Client ID>', // Your Face Age license ID showProducts: true, showRoutine: true, }; const faceAge = new FaceAge(options); faceAge.render(); ``` <a href="https://panel.getfaceage.com" target="_blank" rel="noopener noreferrer">Get Face Age ID</a> For more advanced settings: ```js 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 <a href="https://panel.getfaceage.com" target="_blank">panel</a> 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', '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: ```js 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: ```js 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: ```js 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: ```js faceAge.API.getAdvisorData((data) => { console.log('Advisor data analysis:', data); }); ``` ### Get Active Selections Retrieve active selections after completing the form: ```js faceAge.API.getActiveSelections((data) => { console.log('Quiz active selection data:', data); }); ``` ### Get Routine Groups Retrieve routine groups that the software supports: ```js console.log('Routine Groups:', faceAge.API.getRoutineGroup()); ``` ### Add Custom Products 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: ### onClickProblem ```js faceAge.onClickProblem((key) => { // Get user status and information when they click on a problem console.log('User clicked on problem:', key); }); ``` ### onDisplayProducts ```js faceAge.onDisplayProducts((data) => { // Display product information when the product list is shown console.log('Display Products:', data); }); ``` ### onDisplayRoutines ```js faceAge.onDisplayRoutines((data) => { // Display routine information when the routine list is shown console.log('Display Routines:', data); }); ``` ### onAddToCart ```js faceAge.onAddToCart((data) => { // Retrieve product information when a user clicks add to cart console.log('User clicked add to cart:', data); }); ``` ### onClickProduct ```js faceAge.onClickProduct((product) => { // Retrieve product details when a user clicks on a product console.log('User clicked on product info:', product); }); ``` ### onResetData ```js faceAge.onResetData(() => { // Trigger when the user refreshes the information console.log('User clicked reset data'); }); ``` ### onCloseModal ```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'); }); ``` ### onCheckout ```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](https://getfaceage.com/) - Panel: [panel.getfaceage.com](https://panel.getfaceage.com/) - Email: [dev@getfaceage.com](mailto:dev@getfaceage.com)