Integra un widget di preventivo 3D nel sito

Panoramica

Il widget Embed di Quote3D è una soluzione no-code/low-code che ti permette di fornire preventivi istantanei per la stampa 3D ai tuoi clienti su qualsiasi sito web. Che tu utilizzi un sito personalizzato, WordPress o Shopify, puoi colmare il divario tra la visualizzazione del modello 3D e l'inserimento dell'ordine in modo fluido.

Caratteristiche principali

• Visualizzatore di Modelli 3D: Anteprima interattiva dei file STL, OBJ, 3MF e STEP caricati.
• Prezzi Istantanei: Calcolo automatico dei costi basato sui tuoi profili di materiali e stampanti.
• Multi-tecnologia: supporta FDM, SLA, SLS, SLM e MJF, ciascuna con la propria logica di calcolo.
• Temi Personalizzati: Abbina l'estetica del tuo brand con il glassmorphism e palette di colori personalizzate.
• Configurazione Zero per i Clienti: I tuoi clienti non hanno bisogno di conoscere i dettagli tecnici dello slicing; è tutto gestito da Quote3D.
• Plugin per piattaforme: pacchetti installabili per WooCommerce, PrestaShop, OpenCart, Magento e Wix, più codice pronto per Shopify, Webflow e Framer.
• Moduli Semplice e Avanzato: chieda solo qualità di stampa e resistenza al posto delle impostazioni dello slicer, mostri tutte le impostazioni di stampa o lasci che ogni cliente passi dall'uno all'altro. Si imposta nell'editor del widget o con l'opzione mode dell'SDK.

Cosa Puoi Fare

• Sincronizzazione eCommerce in tempo reale: Utilizza gli eventi 'Aggiungi al carrello' per collegare i preventivi direttamente al carrello del tuo negozio.
• Generazione automatica di lead: Acquisisci automaticamente i requisiti del cliente e i dati del modello.
• Generazione di miniature: Acquisisci e memorizza automaticamente screenshot dei modelli per il tracciamento della produzione.
• Reindirizzamenti flessibili: invia i clienti a una pagina specifica dopo un calcolo riuscito. La destinazione deve essere un URL http o https.

Integrazioni con le piattaforme: WooCommerce, Shopify, PrestaShop, OpenCart, Magento e altre

Il widget funziona su qualsiasi sito. Per queste piattaforme offriamo pacchetti installabili o codice pronto; cosa succede al carrello dipende dalla piattaforma:

• Quote3D per WooCommerce
• Quote3D per PrestaShop
• Quote3D per OpenCart
• Quote3D per Magento
• Quote3D per Wix
• Quote3D per Shopify

Altre piattaforme e stack personalizzati

• Wix: un pacchetto Velo che verifica il prezzo del preventivo nel backend del tuo sito e lo aggiunge al carrello di Wix Stores (piano Premium; usa il service plugin eCommerce Catalog di Wix, attualmente in beta). La riga del carrello mostra l'immagine del prodotto vettore, non la miniatura del modello: Wix accetta solo immagini dal suo Media Manager.
• Squarespace: incorpora il widget con un Code Block. Squarespace non ha un'API del carrello, quindi gli ordini passano da richiesta di preventivo, fattura o link di pagamento.
• PrestaShop 8: un modulo installabile che verifica il prezzo del preventivo sul vostro server e lo aggiunge al carrello, con il back office Quote3D sotto Sell: preventivi, coda di produzione, scorte dei colori, report, download dei modelli e impostazioni.
• OpenCart 3.0, 4.0.2.2+ e 4.1: un'estensione installabile che verifica il prezzo del preventivo sul vostro server e lo aggiunge al carrello, con un menu Quote3D nell'amministrazione: preventivi, coda di produzione, scorte dei colori, report, download dei modelli e impostazioni.
• Magento Open Source / Adobe Commerce 2.4: un modulo che verifica il prezzo del preventivo sul vostro server e lo aggiunge al carrello, con un menu Quote3D nell'amministrazione: preventivi, coda di produzione, scorte dei colori, report, download dei modelli e impostazioni.
• Webflow: incorpora il widget con un elemento Code Embed. I preventivi non possono essere aggiunti al carrello di Webflow Ecommerce.
• Framer: un componente di codice React per il widget. Framer non ha un carrello integrato.
• Software Personalizzato: Può essere integrato in qualsiasi progetto React, Vue o Vanilla JS con l'SDK JS.

Principio di Funzionamento Tecnico

Il Widget Quote3D opera come un Iframe ad alte prestazioni o un moderno JS SDK. Ecco come funziona:

• Funzionamento Isolato: Il widget viene eseguito nella sua zona protetta (Iframe), quindi non compromette lo stile del tuo sito web.
• Comunicazione in tempo reale: il widget trasmette i risultati del calcolo alla tua pagina tramite l'API 'postMessage'. Usando l'SDK, gli eventi vengono consegnati solo all'origine che ha incorporato il widget anziché essere diffusi a qualsiasi listener.
• Ridimensionamento Automatico: Quando si utilizza l'SDK, il widget regola automaticamente la sua altezza in base al contenuto.

Usare l'API insieme al widget

Il widget gestisce internamente il proprio traffico API — quelle rotte non le chiami tu. Quando vuoi leggere o elaborare gli stessi dati dal tuo codice, usa gli endpoint pubblici v2 descritti nei Concetti chiave, puntando a https://api.quote3d.com/v2 con un vero token Bearer dell'API e non con un identificativo di token. Per reagire all'aggiunta al carrello di una parte configurata, iscriviti al webhook widget.added_to_cart invece di chiamare direttamente qualcosa.

Sicurezza e Verifica

Il widget chiama Quote3D dal browser, quindi il suo token è visibile a chiunque guardi il sorgente della pagina. Crea un token widget dedicato, limitalo all'ambito widget e vincolalo alle origini del tuo negozio. La rotazione conserva entrambe le restrizioni, così un token widget ruotato non diventa mai ad accesso completo.

File caricati e anteprime

I file caricati tramite il widget sono memorizzati in modo criptato e non sono accessibili pubblicamente. Il payload add-to-cart fornisce thumbnailUrl, un link assoluto che viene renderizzato dal proprio storefront: memorizzalo esattamente come ricevuto. Riscriverlo, rimuovere i parametri della query o ospitarlo nuovamente sotto il proprio dominio impedirà la visualizzazione dell'immagine.

Prezzi di cui il tuo negozio può fidarsi

• Un token con ambito widget non può stabilire un prezzo. Un preventivo richiesto con esso mantiene solo le opzioni che il cliente sceglie nel modulo; i prezzi di materiali, macchine e tariffe provengono sempre dai tuoi profili.
• Il webhook widget.added_to_cart riporta prezzo, valuta, quantità e materiale salvati con il preventivo, non ciò che ha inviato il browser, e viene inviato una sola volta per preventivo.
• Il messaggio QUOTE3D_ADD_TO_CART che la tua pagina riceve proviene dal browser del cliente e lì può essere alterato. Prima di addebitare, verifica il prezzo tramite il webhook o con GET https://api.quote3d.com/v2/quotes/{quote_id}.

Ambito del token widget

Un token creato con l'ambito widget può raggiungere solo gli endpoint di cui l'esperienza integrata ha davvero bisogno. Tutto il resto dell'API viene rifiutato, così un token prelevato dal sorgente della pagina non può essere usato contro il tuo account.

L'ambito widget consente:

• Leggere la configurazione di stampanti e materiali, così il modulo di preventivo può mostrare le tue opzioni.
• Richiedere un identificativo di caricamento e caricare un file di modello.
• Leggere, ed eliminare, il file che ha caricato.
• Avviare un preventivo asincrono per quel file e interrogare il lavoro risultante.
• Leggere un preventivo tramite id, salvarne la miniatura e inviare l'evento di aggiunta al carrello.

L'ambito widget rifiuta:

• La gestione dei webhook, così un token rubato non può dirottare il tuo flusso di eventi verso un altro server.
• I dati dell'account, la cronologia dei caricamenti, gli elenchi di preventivi, le analisi, l'utilizzo e le quote.
• L'attivazione della licenza e ogni altro endpoint non elencato sopra.

Vincolo di origine

Elenca i negozi autorizzati a usare il token, per esempio https://shop.example.com. Un token widget ne richiede almeno uno: Quote3D controlla la pagina che incorpora il widget quando l’iframe si carica e rifiuta di mostrarsi su qualsiasi sito non presente nell’elenco.

Cosa richiede alla tua pagina il vincolo di origine

• Il controllo legge il referrer che il browser invia quando carica l'iframe del widget. È il comportamento predefinito, quindi a una pagina normale non serve nulla.
• Se la tua pagina imposta referrer-policy: no-referrer, l’origine non può essere verificata e il widget non si carica. Usa il valore predefinito del browser (strict-origin-when-cross-origin) oppure origin nelle pagine che incorporano il widget.
• Le chiamate dirette all'API vengono controllate a parte: una richiesta inviata da un browser su un sito fuori elenco viene respinta, mentre le chiamate server-to-server, che non inviano l'header Origin, non sono interessate.

Cosa non può leggere un token widget

L'endpoint di configurazione restituisce solo ciò che il modulo di preventivo mostra — nomi delle stampanti, volumi di stampa, materiali, colori e limiti di layer. La tua base di costo (prezzo del materiale al chilogrammo, costo orario macchina, moltiplicatore dei supporti, consumo elettrico) non viene mai inviata al browser; il prezzo è calcolato sul server.

Sessioni visitatore

Un token widget è pubblico, quindi un limite conteggiato sul token sarebbe condiviso da tutti i clienti del tuo negozio e un solo script potrebbe esaurirlo lasciando fuori tutti gli altri. Per questo il widget apre una breve sessione visitatore la prima volta che un cliente carica un file, e i passaggi che hanno un costo vengono conteggiati per sessione.

• Il widget incorporato lo fa da solo. Il codice di incorporamento standard non richiede modifiche.
• Caricare un file, avviare un preventivo, salvare una miniatura e l'evento di aggiunta al carrello richiedono una sessione. Leggere la tua configurazione, interrogare lo stato di un job e recuperare un preventivo no, così un calcolo lungo non lascia mai un cliente a metà.
• Una sessione dura 30 minuti. In ogni sessione un cliente può richiedere ogni ora fino a 30 caricamenti, 15 preventivi, 30 salvataggi di miniature e 20 eventi di aggiunta al carrello. Un indirizzo IP può aprire fino a 20 sessioni all'ora per lo stesso token.
• Queste regole si applicano solo ai token con ambito widget. Un token senza ambito viene trattato come un'integrazione server e non riceve nessuna di queste protezioni, quindi il token nel tuo negozio deve sempre avere l'ambito widget.
• Se chiami tu stesso questi endpoint con un token con ambito widget, apri prima una sessione: ottieni una sfida con GET https://api.quote3d.com/v2/widget/challenge, trova il numero compreso tra 0 e maxnumber per cui lo SHA-256 del salt seguito da quel numero è uguale alla sfida e invialo a POST https://api.quote3d.com/v2/widget/session. Invia il valore restituito nell'header X-Widget-Session. Una sessione mancante o scaduta riceve una risposta 401 con codice di errore AUTH_005; apri una nuova sessione e ripeti la chiamata.
• Il traffico del widget ha una propria quota oraria, separata da quella della tua integrazione server, così un negozio molto frequentato e il tuo backend non si ostacolano a vicenda. Puoi anche impostare nella dashboard un limite giornaliero di preventivi per il widget; una volta raggiunto, ai clienti viene chiesto di riprovare il giorno dopo e ricevi un'e-mail.

I token creati senza ambito mantengono l'accesso completo, quindi le integrazioni esistenti continuano a funzionare invariate. Aggiungere un ambito è il modo per applicare la restrizione a un token.