Integration guide

<script src="https://svalbox.com/sdk/v7/svalbox.iife.js"></script>

<svalbox-tryon
  license="YOUR-LICENSE-KEY"
  product-id="nora-black"
  front="/glasses/nora/front.png"
  left="/glasses/nora/left.png"
  lenses="/glasses/nora/lenses.png"
  width-mm="138"
  size="4/3">
</svalbox-tryon>

<div id="tryon"></div>

<script type="module">
  import { createTryOn } from 'https://svalbox.com/sdk/v7/svalbox.js';

  const tryon = createTryOn('#tryon', {
    license: 'YOUR-LICENSE-KEY',
    size: { aspectRatio: 4 / 3 },
    frame: {
      productId: 'nora-black',
      front: '/glasses/nora/front.png',
      left: '/glasses/nora/left.png',
      lenses: '/glasses/nora/lenses.png',
      widthMm: 138,
    },
  });
</script>

<script src="https://svalbox.com/sdk/v7/svalbox.iife.js"></script>
<script>
  // The script tag exposes a global `Svalbox` object.
  const tryon = Svalbox.createTryOn('#tryon', { license: 'YOUR-LICENSE-KEY', frame: { /* … */ } });
</script>

<svalbox-tryon
  id="tryon"
  license="YOUR-LICENSE-KEY"
  front="/glasses/a/front.png"
  left="/glasses/a/left.png">
</svalbox-tryon>

<script>
  // Changing the photo attributes switches the frame live
  // (no reload, the camera keeps running).
  const el = document.getElementById('tryon');
  el.setAttribute('product-id', 'aviator-gold');
  el.setAttribute('front', '/glasses/b/front.png');
  el.setAttribute('left', '/glasses/b/left.png');
</script>

const frames = {
  'nora-black': {
    productId: 'nora-black',
    front: '/glasses/nora/front.png',
    left: '/glasses/nora/left.png',
    lenses: '/glasses/nora/lenses.png',
    widthMm: 138,
  },
  'aviator-gold': {
    productId: 'aviator-gold',
    front: '/glasses/aviator/front.png',
    left: '/glasses/aviator/left.png',
    widthMm: 142,
    wrapMm: 12,
  },
};

// Product picker / colour swatches
document.querySelector('#colour').addEventListener('change', (event) => {
  tryon.setFrame(frames[event.target.value]);
});

// With the web component, the instance is on the element:
document.querySelector('svalbox-tryon').tryon.setFrame(frames['aviator-gold']);

// Flat tint
tryon.setLenses({ tint: ['rgba(30, 30, 35, 0.85)'] });

// Gradient, top to bottom, with a mirror effect
tryon.setLenses({ tint: ['rgba(90, 50, 20, 0.8)', 'rgba(150, 100, 60, 0.2)'], reflectivity: 0.4 });

// Clear lenses
tryon.setLenses({ tint: [] });

// Your own button instead of the built-in one
const tryon = createTryOn('#tryon', { license, frame, startButton: false });
document.querySelector('#try-it').addEventListener('click', () => tryon.play());

// Pause when the product modal closes, resume later
modal.addEventListener('close', () => tryon.pause());

// Don't download anything until the visitor clicks
createTryOn('#tryon', { license, frame, preload: false });

// A video or a photo instead of the camera (they start on their own)
tryon.setSource({ type: 'video', src: '/media/model.mp4' });
tryon.setSource({ type: 'image', src: '/media/model.jpg' });
tryon.setSource({ type: 'camera' });

// Save a photo with the glasses on (JPEG Blob)
const blob = await tryon.snapshot({ type: 'image/jpeg', quality: 0.9 });
const url = URL.createObjectURL(blob);
Object.assign(document.createElement('a'), { href: url, download: 'my-glasses.jpg' }).click();

// Measure the pupillary distance (the visitor looks straight at the camera)
try {
  const { mm } = await tryon.measurePd();
  pdInput.value = mm; // e.g. 62.5
} catch (error) {
  alert(error.message);
}

const off = tryon.on('faces', ({ count }) => {
  badge.textContent = count ? 'Face detected' : 'Look at the camera';
});

tryon.on('error', ({ code, message }) => {
  if (code === 'camera') showCameraHelp();
  analytics.track('tryon_error', { code, message });
});

tryon.on('play', () => analytics.track('tryon_started'));

off(); // stop listening

createTryOn('#tryon', {
  license,
  frame,
  theme: { color: '#c2410c', background: '#111827' },
  messages: {
    start: 'Essayer en direct',
    startHint: 'L’image de votre caméra reste sur votre appareil.',
    centerFace: 'Placez votre visage au centre',
    cameraDenied: 'Autorisez la caméra dans votre navigateur pour essayer les montures.',
    noCamera: 'Aucune caméra trouvée.',
    retry: 'Réessayer',
  },
});

// Before consent: anonymous, session-only statistics, nothing stored on the device
const tryon = createTryOn('#tryon', { license, frame, analytics: { persistent: false } });

// Once the visitor accepts analytics cookies (applies from the next session)
tryon.setAnalytics({ persistent: true });

// If consent is withdrawn: deletes the stored visitor id
tryon.setAnalytics({ persistent: false });

createTryOn('#tryon', {
  license,
  frame,
  assets: {
    wasm: '/vendor/mediapipe/wasm', // contents of @mediapipe/tasks-vision/wasm
    model: '/vendor/mediapipe/face_landmarker.task',
  },
});