Entegrasyon

Kurulum tek bileşen

Modeller CDN üzerinden servis edilir. Ürün sayfasına tek bileşen eklenir, tema koduna dokunulmaz. Kod, format ve performans bütçesi aşağıdadır.

Platformlar

Nerede çalışır

Shopify

Tema bölümü veya ürün sayfası bloğu olarak eklenir. Varyant seçimi Shopify varyantlarıyla eşlenir.

WooCommerce

Shortcode veya blok. Ürün ID'sine göre model otomatik çözümlenir.

Özel storefront

React/Next/Vue için embed script ya da doğrudan iframe. Model URL'i markada kalır.

Pazaryeri / kampanya sayfası

Bağımsız landing sayfası veya QR ile açılan AR bağlantısı.

Kod

İki entegrasyon yolu

Web bileşeni (önerilen)

<!-- Ürün sayfasına tek seferlik script -->
<script type="module"
  src="https://cdn.volumup.co/viewer.js"></script>

<volum-viewer
  model="https://cdn.volumup.co/m/tote-01.glb"
  ios-src="https://cdn.volumup.co/m/tote-01.usdz"
  poster="https://cdn.volumup.co/m/tote-01.webp"
  ar
  camera-controls
  loading="lazy">
</volum-viewer>

iframe (en hızlı kurulum)

<!-- Script eklenmeden: iframe -->
<iframe
  src="https://demo.volumup.co/e/tote-01"
  title="Ürün 3D görüntüleyici"
  loading="lazy"
  allow="camera; xr-spatial-tracking; fullscreen"
  style="width:100%;aspect-ratio:4/3;border:0"></iframe>

Web bileşeni AR butonunu ve varyant API'sini de getirir. iframe tamamen izole çalışır, tema çakışması oluşmaz.

Formatlar

Hangi dosya nereye gider

Format	Kullanım	Not
GLB / glTF	Web + Android	Tek dosya, sıkıştırılmış geometri ve texture
USDZ	iOS Quick Look	Safari'de yerel AR görüntüleme
Poster (WebP)	İlk yükleme	Model yüklenene kadar gösterilen statik kare
Draco / KTX2	Optimizasyon	Geometri ve texture sıkıştırma

Performans

Sayfa hızını bozmadan

Model dosya boyutu≤ 10 MB (hedef 5 MB)
Poligon50k–150k üçgen
Texture2K, KTX2 sıkıştırmalı
YüklemeGörünür alana girince (lazy)
İlk boyama etkisiPoster görsel ile 0 layout kayması

Uygulama gerekmez

iOS

Safari + Quick Look, USDZ ile. iOS 12 ve üzeri.

Android

Chrome + Scene Viewer, GLB ile. ARCore destekli cihazlar.

Desteklenmeyen cihaz

AR butonu gizlenir, 3D görüntüleyici çalışmaya devam eder.

Veri

Ölçüm ve gizlilik

3D etkileşim, AR açılma ve varyant değiştirme olayları GA4 / GTM'e gönderilir.
Kamera görüntüsü cihazdan çıkmaz; AR tamamen cihaz üzerinde çalışır.
Kişisel veri toplanmaz, çerez gerektirmez.
Model mülkiyeti markada kalır; talep hâlinde kaynak dosyalar teslim edilir.