> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> React to shopper interactions in real time with callbacks.

Register callbacks to connect the scan to your cart, CRM or analytics.

| Event | Callback | Fires when |
| - | - | - |
| `onClickProblem` | `(key: string)` | The user taps a skin problem in the results |
| `onDisplayProducts` | `(data)` | The product list becomes visible |
| `onDisplayRoutines` | `(data)` | The routine list becomes visible |
| `onAddToCart` | `(data)` | The user clicks add to cart |
| `onClickProduct` | `(product)` | The user clicks a product card |
| `onResetData` | `()` | The user clicks reset / start over |
| `onCloseModal` | `()` | The user closes the modal |
| `onCheckout` | `(data)` | The user clicks the checkout button |

## Example

```js theme={null}
faceAge.onAddToCart((data) => {
  // data contains product details
  myCart.add(data);
});

faceAge.onCloseModal(() => {
  // redirect to cart if items were added
  if (myCart.hasItems()) window.location.href = '/cart';
});

faceAge.onClickProblem((key) => {
  console.log('Problem selected:', key); // e.g. 'acne'
});
```

## Next

> [card] [Analytics](https://getfaceage.com/docs/developer-guides/integrations/analytics.md)
>
> Track the scan in Google Analytics and Facebook Pixel.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.