Tryonix Web SDK documentation

Add virtual eyewear try-on to any website.

This guide explains how to initialize Tryonix, connect eyewear products, open the AR experience, track events, and deploy the integration across popular web platforms.

Production URLs

Host your integration against the live Tryonix app at https://tryonix-ar.vercel.app. Load the SDK from https://tryonix-ar.vercel.app/tryonix-sdk.js and set appUrl to https://tryonix-ar.vercel.app in Tryonix.init().

Fast setup

Add the SDK, initialize it once, and pass product details when the shopper clicks Try-On.

Platform independent

The hosted SDK works with HTML, React, Next.js, PHP, WordPress, WooCommerce, and other platforms.

Privacy focused

Camera access is permission-based and should only run after explicit customer interaction.

Quick start

A basic Tryonix installation requires the SDK script, initialization, and one product opening call.

Add the SDK

HTML

<script src="https://tryonix-ar.vercel.app/tryonix-sdk.js"></script>

Initialize Tryonix

JavaScript

Tryonix.init({
  apiKey: "pk_live_your_public_key",
  appUrl: "https://tryonix-ar.vercel.app"
});

Open a product

JavaScript

Tryonix.open({
  productId: "frame_001",
  productName: "Aura Midnight",
  imageUrl: "https://your-store.com/frames/aura-midnight.png"
});

HTTPS is required

Browsers allow camera access on HTTPS and localhost. Set appUrl to https://tryonix-ar.vercel.app (your hosted Tryonix app), not your store domain. Use http://localhost:3000 only when developing locally.

Platform integration guides

Choose the platform used by your store and copy the matching integration pattern.

components/TryOnButton.tsx

'use client';

import Script from 'next/script';

type Product = {
  id: string;
  name: string;
  imageUrl: string;
};

export default function TryOnButton({ product }: { product: Product }) {
  const openTryOn = () => {
    window.Tryonix?.open({
      productId: product.id,
      productName: product.name,
      imageUrl: product.imageUrl,
    });
  };

  return (
    <>
      <Script
        src="https://tryonix-ar.vercel.app/tryonix-sdk.js"
        strategy="afterInteractive"
        onLoad={() => {
          window.Tryonix?.init({
            apiKey: process.env.NEXT_PUBLIC_TRYONIX_KEY!,
            appUrl: "https://tryonix-ar.vercel.app",
          });
        }}
      />

      <button type="button" onClick={openTryOn}>
        Try on in AR
      </button>
    </>
  );
}

Platform notes

Use a client component for the Try-On button.

On external stores, load the SDK from https://tryonix-ar.vercel.app/tryonix-sdk.js.

Store your public key in NEXT_PUBLIC_TRYONIX_KEY.

Product and frame setup

Each eyewear product should provide a stable identifier, display name, and a properly prepared transparent frame asset.

Required product fields

Provide productId, productName, and imageUrl for every Try-On launch.

Frame asset

Use a high-resolution transparent PNG or a supported 3D frame asset with clean edges.

product.json

{
  "id": "frame_001",
  "name": "Aura Midnight",
  "imageUrl": "/frames/aura-midnight.png",
  "price": 149,
  "currency": "USD",
  "category": "optical"
}

Recommended image preparation

Keep empty transparent space around the frame to a minimum. Use consistent dimensions across your product catalog and avoid shadows or model faces in the glasses asset.

SDK reference

These methods define the public browser API merchants use to control Tryonix.

Tryonix.init(options)

Initialize the SDK once after the script loads.

apiKeystring

Required. Your unique pk_live_... public key.

publicKeystring

Alias for apiKey (backward compatible).

appUrlstring

Required. Tryonix app origin: https://tryonix-ar.vercel.app

onEventfunction

Callback for SDK lifecycle events from the iframe.

onErrorfunction

Callback when validation or product limits fail.

onSuccessfunction

Callback when the shopper completes try-on.

Tryonix.open(options?)

Opens AR try-on. Validates apiKey and product limit when productId is set.

productIdstring

Unique product ID on your store (required for tracking).

productNamestring

Display name shown in the try-on UI.

imageUrlstring

Required. Full HTTPS URL to your transparent frame PNG.

categorystring

Optional product category.

Tryonix.close()

Closes the active try-on modal.

Tryonix.isOpen()

Returns true when the modal is visible.

Tryonix.getConfig()

Returns the current SDK configuration.

Tryonix.setConfig(options)

Updates runtime options (e.g. productId before reopening).

Events and analytics

Use init callbacks and dashboard analytics to monitor SDK usage and product limits.

events.js

Tryonix.init({
  apiKey: "pk_live_your_public_key",
  appUrl: "https://tryonix-ar.vercel.app",
  onEvent: function (event) {
    console.log("SDK event", event.eventType, event.category);
  },
  onError: function (error) {
    console.error("Tryonix error", error.message);
  }
});

sdk_initialized

SDK loaded and initialized on the page.

tryon_opened

Customer opened the AR try-on modal.

tryon_closed

Customer closed the try-on experience.

camera_permission_granted

Camera access was allowed.

camera_permission_denied

Camera access was denied.

face_detected

Face tracking started successfully.

error

An SDK or validation error occurred.

Product limits

Each unique productId on your website counts toward your plan limit (15 on Starter). The SDK validates your apiKey before opening try-on for a new product.

Security and production

Protect merchant integrations and ensure camera access works reliably.

Use a public key in the browser

Only publish keys specifically created for client-side SDK initialization. Never expose an administrative or service key.

Configure allowed domains

Restrict each public key to approved merchant domains such as store.example.com.

Serve everything over HTTPS

The page, SDK, product assets, and API requests should all use HTTPS.

Request the camera after user interaction

Open Try-On only after the customer clicks a clear button. Avoid requesting camera access on initial page load.

Troubleshooting

Common integration issues and their most likely solutions.

Ready to integrate

Build your first virtual fitting room.

Create a public key in the Tryonix dashboard, prepare your eyewear assets, and follow the guide for your platform.

Create an account Contact support