How to Add Glasses Try-On to an Optical Ecommerce Site

To add glasses try-on to an optical site, you build your frame catalog in the ZeDaq.ai dashboard, fetch it with your API key, run the live-camera try-on in the shopper's browser, and report each completed try-on to the API. This is a developer task, so plan for some code on your product pages.

It sits next to clothing try-on, which works differently. For that, see our guide to a virtual fitting room for clothing websites. For how the camera side behaves, read live-camera eyewear try-on for optical stores.

How is glasses try-on different from clothing try-on?

Clothing try-on uses a shopper's photo and renders the garment on them. Eyewear try-on uses the shopper's camera, live, and the whole thing runs in their browser.

According to ZeDaq.ai's widget page in the dashboard, face detection and rendering both run client-side, and no photo is uploaded for that step. Only a count is sent to the API afterward.

What do you need before you start?

• A ZeDaq.ai account and an API key from Dashboard → API keys.
• Your frames added in the dashboard under Eyewear.
• A product template you can edit, or a developer who can.
• A phone and a laptop to test the camera on.

Start on the free trial. Every paid plan has a 3-day free trial with no card required. The Free plan also lets you test with 3 try-ons a month.

How do you add it step by step?

Step 1: Build your frame catalog

Open Eyewear in the dashboard and add the frames you want shoppers to try. Only active frames that are ready appear in the catalog your site fetches.

Step 2: Fetch the catalog

Call GET /api/v1/eyewear/catalog with your x-api-key header. It returns a list of frames, each with a name, a model URL and a thumbnail URL. Lookups are free and are not metered.

const { frames } = await fetch("https://www.zedaq.ai/api/v1/eyewear/catalog", {
  headers: { "x-api-key": "YOUR_KEY" },
}).then((r) => r.json());

Because the key would sit in page source here, lock it to your domain, as described in using an x-api-key header safely. Note that a key used in browser code is visible to visitors.

Step 3: Run the live-camera try-on

Face detection and rendering run in the shopper's browser. ZeDaq.ai's dashboard points to a reference implementation for this step. Your developer wires the shopper's chosen frame to the camera view on the product page.

Step 4: Count each completed try-on

When a try-on finishes, send POST /api/v1/eyewear/tryon with your key and no payload. It counts against the same monthly try-on cap as clothing try-on.

await fetch("https://www.zedaq.ai/api/v1/eyewear/tryon", {
  method: "POST",
  headers: { "x-api-key": "YOUR_KEY" },
});

Step 5: Test on a phone

Most shoppers browse on mobile. Open the page on a phone, allow the camera and check that the frame sits where it should.

Which approach fits your site?

Your site	Suggested route
Custom-built store	Follow the steps above
Shopify store	The Shopify app lists eyewear try-on; see the app listing
WooCommerce, Wix, Squarespace, BigCommerce	Talk to your developer; use the REST calls above

For a comparison of widget and API routes for clothing, see embeddable widget vs API. For a no-code clothing setup on any site, the one script tag guide covers it.

What should you check before launch?

• Frame names and thumbnails look right in your catalog.
• The camera permission prompt appears on iOS and Android.
• The try-on button is easy to find above the fold on a phone.
• Your key is domain-locked.
• You count each completed try-on once, not on every frame change.

FAQs

Does the shopper's camera image leave their device?

ZeDaq.ai's dashboard says face detection and rendering run in the browser, not through its servers. Your own code may behave differently if you add features, so check what you add.

Does eyewear try-on use my monthly try-on allowance?

Yes. Eyewear try-ons share the same monthly try-on cap as clothing try-on.

Do I need the Shopify app?

No. The REST calls work on any site. Shopify stores can use the app listing instead.

How do I find the API details?

The API reference lists the eyewear endpoints, the key header and the error codes.