←Blog'a Dön
API

Quote3D Widget Entegrasyonunda Uzmanlaşın: Otomatik 3D Yazıcı Teklifleri İçin Eksiksiz Bir Rehber

16.05.2026 • 131 görüntüleme • Serdar Kaan

Quote3D Widget'ına Giriş

Eklemeli imalatın rekabetçi ortamında, bir müşterinin tasarımı ile kesinleşmiş bir sipariş arasındaki engelleri azaltmak kritik öneme sahiptir. Quote3D Widget, bu boşluğu doldurmak için tasarlanmış, gömülebilir ve güçlü bir 3D baskı teklif arayüzüdür. Bu widget'ı doğrudan web sitenize veya e-ticaret platformunuza entegre ederek, kullanıcılarınızın 3D modeller yüklemesine, belirlediğiniz yazıcı ve malzeme profillerine göre anlık fiyatlandırma almasına ve sitenizden hiç ayrılmadan ödeme aşamasına geçmesine olanak tanırsınız.

Quote3D Widget'ının temel amacı, teklif oluşturma ve sipariş akışını otomatikleştirmektir. STL veya OBJ dosyalarını manuel olarak inceleyip e-postalar göndermek yerine widget; FDM, SLA ve SLS teknolojileri için dilimleme mantığı da dahil olmak üzere teknik ağır işleri üstlenerek müşterileriniz için profesyonel ve self-servis bir deneyim sunar.

Uygulama Stratejileri: Iframe ve SDK Modu

Teknik gereksinimlerinize ve kullanıcı arayüzü üzerinde ihtiyaç duyduğunuz kontrol düzeyine bağlı olarak Quote3D iki ana entegrasyon yöntemi sunar. Hem performansı hem de sorunsuz bir kullanıcı deneyimini sağlamak için doğru yöntemi seçmek esastır.

Iframe Entegrasyonu

Iframe yöntemi, başlangıç için en hızlı yoldur. Basit bir HTML iframe gömerek, Quote3D arayüzü izole edilmiş (sandboxed) bir ortamda oluşturulur. Bu, widget'ın dahili stillerinin ve betiklerinin, web sitenizin mevcut CSS veya JavaScript kodlarıyla çakışmamasını sağlar.

Temel Avantaj: İzole yürütme, düzen kaymalarını ve stil sızıntılarını önleyerek WordPress veya Squarespace gibi CMS tabanlı sitelerde hızlı dağıtım için ideal hale getirir.

SDK Entegrasyonu

Daha derinlemesine entegre bir deneyim arayan geliştiriciler için SDK modu önerilir. SDK, duyarlı (responsive) entegrasyona izin verir; yani widget, farklı ekran boyutlarına ve cihaz yönelimlerine daha akıcı bir şekilde uyum sağlayabilir. Daha da önemlisi SDK, özel olay yönetimini (custom event handling) mümkün kılarak ana uygulamanızın, widget içindeki kullanıcı eylemlerine gerçek zamanlı olarak tepki vermesini sağlar.

Karşılaştırma Tablosu: Entegrasyon Yöntemleri

Özellik Iframe Modu SDK Modu Uygulama Hızı Çok Hızlı Orta CSS/JS İzolasyonu Tam (Sandbox) Entegre Duyarlılık Standart Yüksek (Optimize edilmiş) Özel Olay Yönetimi Sınırlı (postMessage) Gelişmiş SDK Olayları Önerilen Kullanım Durumu Hızlı gömmeler, Basit siteler Özel Web Uygulamaları, Üst düzey UX

Teknik İş Akışı ve Yaşam Döngüsü

Widget içindeki bir teklifin yaşam döngüsünü anlamak, sonuçları kendi arka uç (backend) sistemleriyle senkronize etmek isteyen geliştiriciler için çok önemlidir. Süreç, yapılandırılmış bir olay dizisini takip eder:

  • Dosya Yükleme: Kullanıcı bir 3D dosya (STL, OBJ veya 3MF) yükler. Widget, dosyanın Quote3D'nin güvenli bulut depolama alanına yüklenmesini yönetir.

  • Model İşleme: Sistem bir basılabilirlik kontrolü gerçekleştirir ve bir 3D önizleme oluşturur.

  • Konfigürasyon: Kullanıcı malzemeleri, yazıcı profillerini ve diğer üretim parametrelerini seçer.

  • Anlık Tekliflendirme: Widget; filament ağırlığı, baskı süresi ve malzeme maliyetine göre maliyeti hesaplamak için teknolojiye özgü mantığı (FDM, SLA, SLS) uygular.

  • İnceleme ve Teslimat: Kullanıcı final fiyatını ve teknik detayları görür, ardından "Sepete Ekle" işlemini tetikler.

postMessage API aracılığıyla Çift Yönlü İletişim

Widget genellikle izole bir ortamda çalıştığı için Quote3D, postMessage API'sini kullanır. Bu iletişim katmanı, bir teklif tamamlandığında veya belirli bir model seçildiğinde widget'ın ana uygulamanıza veri göndermesine ve uygulamanızın widget'a komutlar göndermesine olanak tanır.

e-Ticaret Entegrasyonu ve Sepet Senkronizasyonu

Quote3D Widget'ının gerçek gücü, bir e-ticaret arka ucuna bağlandığında ortaya çıkar. Widget, sadece bir fiyat sunmakla kalmaz, bu fiyatı aktif olarak bir alışveriş sepetine itebilir.

Sepet Senkronizasyon API'si

Teklif sonuçlarını e-ticaret sisteminizle senkronize etmek için Quote3D, POST /v2/widget/add-to-cart uç noktasını (endpoint) sağlar. Bu uç nokta şunlardan sorumludur:

  • Dönüşüm Takibi: Teklif sonucunun belirli bir kullanıcı oturumuyla eşleştirilmesi.

  • Sepet İlişkisi Depolama: 3D modelin benzersiz kimliğinin (ID) ve hesaplanan fiyatının sepette birbirine bağlanmasının sağlanması.

  • Webhook Tetikleme: Bir kullanıcı sepetine model eklediğinde, sistem widget.added_to_cart webhook'unu tetikleyebilir; bu da arka ucunuzun CRM kayıtlarını güncellemesine veya üretim ekibinize bildirim göndermesine olanak tanır.

Kapalı Platformların Yönetimi

Kısıtlı sepet erişimine sahip e-ticaret platformları için Quote3D, Platform API tabanlı sepet fiyatı geçersiz kılma stratejisini önerir. Bu iş akışında widget, teklif verilerini sunucunuza gönderir ve sunucunuz, özel fiyatı ödeme sürecine dahil etmek için platformun özel API'sini (örneğin Shopify Admin API) kullanır.

Güvenlik ve Performans En İyi Uygulamaları

Güvenli ve performanslı bir entegrasyon sürdürmek için geliştiriciler aşağıdaki yönergelere uymalıdır:

API Token Yönetimi

Ayrıcalıklı API anahtarlarını asla ön uç (frontend) kodunuzda açık etmeyin. Quote3D Widget, özel widget token'ları kullanır. Bu token'ların kapsamı kısıtlıdır ve hesap ayarlarını değiştirme veya dosyaları silme yetkisine sahip olmamalıdır. Token'ların ve kullanıcı tarafından yüklenen modellerin güvenli bir şekilde iletilmesini sağlamak için her zaman HTTPS kullanın.

Performans Optimizasyonu

En sorunsuz kullanıcı deneyimini sağlamak için şu önerileri takip edin:

  • Asenkron Senkronizasyon: UI iş parçacığını (thread) engellememek için tekliflerin sepetinize senkronizasyonunu asenkron olarak yönetin.

  • Arka Plan Kuyrukları: Eğer widget.added_to_cart webhook'unuz ağır işlemler tetikliyorsa (resmi bir PDF fatura oluşturmak gibi), webhook'un hızlıca 200 OK yanıtı döndürmesini sağlamak için bir arka plan kuyruğu (örneğin Redis/Sidekiq) kullanın.

  • Küçük Resim Kalıcılığı: Oluşturulan base64 önizleme görüntülerini özel bir kullanıcı panelinde görüntülemeniz gerekiyorsa, bunları kendi depolama alanınızda saklamak için POST /v2/thumbnail/save uç noktasını kullanın.

Gerçek Dünya Kullanım Örnekleri

Örnek 1: Özel İmalat Portalı

Uzmanlaşmış bir mühendislik firması, React tabanlı bir portala SDK modunu entegre eder. Widget başlatma işlemi için useEffect hook'unu kullanırlar ve kullanıcı Quote3D widget'ında malzemeyi her değiştirdiğinde bir "Proje Özeti" yan panelini güncellemek için postMessage olaylarını dinlerler.

Örnek 2: Otomatik Shopify Mağazası

Bir 3D baskı servisi, Shopify ürün sayfasında Iframe gömme yöntemini kullanır. Bir müşteri teklifi tamamladığında, /v2/widget/add-to-cart uç noktası çağrılır ve bu da bir Node.js ara yazılımına (middleware) webhook tetikler. Bu ara yazılım daha sonra Shopify API'sini kullanarak 3D modelin tam hesaplanmış fiyatıyla özel bir kalem ekler.

Sıkça Sorulan Sorular (SSS)

1. Widget tarafından hangi dosya formatları destekleniyor?

Quote3D widget'ı en yaygın endüstri standartlarını destekler: STL, OBJ ve 3MF. Bu dosyalar, kullanıcının yerel donanımından bağımsız olarak hızlı performans sağlamak için bulutta yüklenir ve işlenir.

2. Widget renklerini markama uydurmak için değiştirebilir miyim?

Evet. Markalama özelleştirmeleri Quote3D Paneli üzerinden yapılabilir. Widget'ın web sitenizin doğal bir parçası gibi görünmesini sağlamak için marka renklerini ve UI temalarını yapılandırabilirsiniz.

3. Widget farklı 3D baskı teknolojilerini nasıl yönetiyor?

Widget; FDM, SLA ve SLS için teknolojiye özgü mantıklar içerir. Seçilen yazıcı profiline bağlı olarak, maliyetleri farklı değişkenlere göre hesaplar (örneğin, SLA için destek malzemesi veya SLS için toz hacmi).

4. Widget iframe içinde yüklenmezse ne yapmalıyım?

Sunucunuzdaki Cross-Origin Resource Sharing (CORS) sorunlarını veya İçerik Güvenlik Politikası (CSP) başlıklarını kontrol edin. Alan adınızın Quote3D panel ayarlarında beyaz listede (whitelist) olduğundan emin olun.

5. Widget'ı atlayıp doğrudan API'yi kullanmak mümkün mü?

Kesinlikle. Widget ön uç kullanıcıları için harikadır, ancak programlı olarak teklifler oluşturmak için /v2/file/quote/{file_id} uç noktasını kullanabilirsiniz. Bu, bir iş kimliği (job ID) döndüren asenkron bir işlemdir; bu kimliği daha sonra sorgulayabilir veya webhook'lar aracılığıyla takip edebilirsiniz.

Sonuç: 3D Yazıcı İş Akışınızı Optimize Edin

Quote3D Widget'ını entegre etmek, sadece bir fiyatlandırma aracı eklemekten daha fazlasıdır; tüm ön uç satış huninizi otomatikleştirmekle ilgilidir. Bir kullanıcının STL dosyası yüklediği andan, siparişin sepetinizde göründüğü ana kadar widget, manuel darboğazları ortadan kaldırır ve anlık, profesyonel bir deneyim sunar.

Uygulama İçin Sonraki Adımlar:

  1. Quote3D Paneli'nde size özel widget token'ınızı oluşturun.

  2. Iframe (hızlı) veya SDK (özel) entegrasyonu arasında seçim yapın.

  3. Fiyatlandırma doğruluğunu sağlamak için yazıcı ve malzeme profillerinizi yapılandırın.

  4. Satış akışınızı arka ucunuza bağlamak için widget.added_to_cart webhook'unu kurun.