Add ShadeWise to your store in 60 seconds
ShadeWise is one script tag and one element. The shopper takes a selfie, the widget measures skin tone, and it returns a verdict with the reasons: good match, close match, poor match, or can't tell, retake.
1. Paste this on a product page
<script type="module" src="https://shadewise-lac.vercel.app/widget/index.js"></script>
<shadewise-widget
product-id="demo-05"
catalogue-src="https://shadewise-lac.vercel.app/api/catalogue"
compare="demo-04,demo-10">
</shadewise-widget>Replace YOUR-SHADEWISE-HOST with the address where ShadeWise is deployed. The widget finds its own files from the script's address. If your store is on a different site than ShadeWise, that site's address must be on the server's allowed-origins list.
2. Attributes
| Attribute | Needed | What it does |
|---|---|---|
product-id | Yes | The id of the product on this page. It is looked up in the catalogue; if it is not there, the widget uses swatch instead. |
catalogue-src | Recommended | A web address that returns your shades as JSON. Relative addresses are read from the ShadeWise host, not your page. Without it, only the main shade is judged. |
compare | No | Up to two more product ids from the catalogue to rank against this one, separated by commas. |
swatch | No | A fallback shade colour such as #b88f76, used only when the product is not in the catalogue. |
The catalogue address returns this shape. Prices are whole rupees. Entries with a bad id, colour or price are ignored.
{ "items": [
{ "id": "demo-05", "name": "Skin Tint Foundation", "shade": "Caramel 05",
"hex": "#A57656", "priceInr": 999 }
] }3. Make it match your brand
The widget lives in its own shadow tree, so your page's CSS cannot break it. Colours are set with four CSS variables on the element: --sw-accent, --sw-text, --sw-bg and --sw-border.
<shadewise-widget
product-id="demo-05"
style="--sw-accent:#6d28d9; --sw-border:#c4b5fd; --sw-bg:#faf5ff; --sw-text:#2e1065">
</shadewise-widget>Live example with those colours:
4. What the widget sends
- One photo: a JPEG, shrunk on the shopper's device to at most 1000 pixels on its longer side, with camera metadata removed. It is sent only after the shopper agrees and the on-device quality check passes.
- A random session id (not tied to a person, with no cookies or accounts) and the shade colour of the main product.
- Our server forwards the photo to the YouCam API (Perfect Corp.) to measure skin tone and render an AI preview. We do not store the photo. The YouCam API keeps uploaded files for up to 30 days, according to its documentation, and we cannot delete that copy.
- The shopper's consent is remembered for the browser tab only, as a version number and a time, and never with a photo.
5. Limits
- The result is cosmetic guidance from a photo, not medical advice, and not a promise of how a shade looks in person.
- The widget refuses photos it cannot trust, on the device, before any paid analysis is made.
- This demo uses a made-up catalogue. Shade colours should come from your own product data.