Integrare il Configuratore nel tuo negozio

Il configuratore è uno script più un elemento HTML. Per integrarlo non installi nulla sul tuo server. Tutto quanto segue si può provare in una sandbox prima di andare online.

Il codice

La categoria Embedding code della console scrive lo snippet per te, nella forma che scegli: HTML semplice (quattro varianti), WordPress, un pulsante SKU WooCommerce o un link standalone con codice QR. La sua forma è questa:

<script type="module" src="https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js"></script>

<cutoptim-configurator mode="inline" key="YOUR_PUBLISHABLE_KEY"
  api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>

La chiave, l’indirizzo del servizio e la lingua provengono dalla tua console. Un pop-up o un pannello laterale usa un pulsante per aprirsi:

<button data-cutoptim-open="#cut" data-material="MDF-18">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="YOUR_PUBLISHABLE_KEY"
  api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>

Modalità e attributi

Attributo	Significato
`mode`	`inline` (predefinito), `modal` (pop-up) o `drawer` (pannello laterale)
`key`	la tua chiave pubblicabile
`lang`	la lingua rivolta al cliente
`material`	un pannello del tuo catalogo, per id o nome esatto; il flusso parte allora dall’elenco dei tagli
`thickness`	restringe `material` in millimetri; da solo non seleziona nulla
`template`	un template di mobile da cui partire
`start`	`catalog`, `cutlist` o `template`
`project`	un progetto salvato da caricare
`customer-token`	il tuo riferimento opaco al cliente connesso, fino a 128 caratteri
`width`, `height`	le dimensioni del contenitore, come semplici lunghezze CSS

Un pop-up o un pannello laterale non carica nulla finché non viene aperto per la prima volta, così una griglia di prodotti con molti pulsanti resta leggera. Più configuratori nella stessa pagina funzionano in modo indipendente. Un attributo con un valore non valido viene scartato, mai applicato a metà.

Da script, l’elemento offre open(), close(), setMaterial(), loadProject() e setCustomerToken(). Genera eventi su se stesso: cutoptim:ready, step, quote, order, project, error, open e close.

Pagina standalone, QR e iframe

Lo stesso configuratore può funzionare come pagina a sé: puoi rimandarvi con un link, stampare il codice QR per il banco del negozio o un chiosco, oppure inviarlo a un cliente. Una pagina che non può caricare uno script può mostrare quella pagina in un iframe; solo i domini che elenchi possono incorporarla, e i messaggi tra il frame e la tua pagina sono accettati solo da quei domini.

Domini consentiti

La chiave pubblicabile funziona solo dai domini elencati per essa. Elenchi i domini del tuo negozio, compreso un eventuale dominio di staging, quando crei la chiave nella categoria Keys & embedding; una richiesta da qualsiasi altra origine viene rifiutata.

Branding

Colori, raggio degli angoli, carattere, chiaro o scuro e tutti i testi visibili al cliente in dieci lingue si impostano nella console e si applicano senza modificare la tua pagina. La pagina può inoltre stilizzare parti del widget tramite i selettori CSS ::part.

Una versione bloccata, con integrità

Per impostazione predefinita lo snippet carica la build mobile latest. Dove il servizio conserva le release, la console può invece offrire uno snippet bloccato (pinned): una release numerata specifica con un hash integrity, così il browser rifiuta un file che è stato modificato. Una variante più rigorosa blocca anche le parti caricate in modo differito. Le release sono firmate, una release pubblicata non cambia mai e una release precedente resta disponibile, così puoi bloccarla per tutto il tempo necessario. Per una Content Security Policy rigorosa, la console mostra le direttive da consentire. Gli snippet bloccati richiedono che il servizio conservi le release; finché non lo fa, la console offre solo lo snippet mobile.

Progetti salvati

Un cliente può salvare un elenco di tagli e tornarci. Il primo salvataggio crea un token privato che il browser conserva, quindi per impostazione predefinita un progetto è disponibile solo su quel browser. Non c’è sincronizzazione tra dispositivi basata sull’accesso e il cliente non può eliminare un progetto salvato; i progetti non ordinati vengono eliminati dopo il tuo periodo di conservazione.

Ritorno al tuo carrello

Quando il cliente ordina, il configuratore genera l’evento di ordine sulla tua pagina. Sulla pagina standalone può inoltre rimandare il cliente al tuo negozio dopo un ordine riuscito: imposti un indirizzo di ritorno (solo https, sul tuo dominio) e il cliente vede una breve conferma con un pulsante Back to the shop. Il prezzo non deve mai essere preso dal browser né dall’indirizzo di ritorno: il tuo server verifica prima il preventivo. Come farlo è spiegato nella pagina sugli ordini; un plug-in pronto per WooCommerce è sulla sua pagina e il codice di riferimento per qualsiasi altro negozio è nella pagina sulle piattaforme personalizzate.

FAQ

Cosa devo incollare nella mia pagina?

Un tag script che carica il configuratore e un elemento cutoptim-configurator con la tua chiave pubblicabile. La console genera entrambi per te in Embedding code, nella forma che scegli. La chiave pubblicabile è fatta per stare nella pagina; la chiave segreta mai.

Quali modi di visualizzazione esistono?

Quattro: inline nella pagina, come pop-up (modal), come pannello laterale (drawer) o come pagina standalone a sé, a cui rimandi con un link o che mostri come codice QR. Una pagina che non può caricare uno script può incorporare la pagina standalone in un iframe.

Il pulsante in una scheda prodotto può aprire il configuratore con il pannello di quel prodotto già selezionato?

Sì. Metti data-cutoptim-open su un pulsante e data-material (e facoltativamente data-thickness) con l'id o il nome esatto del pannello. Il configuratore parte allora dall'elenco dei tagli con quel pannello selezionato. Un pannello che non esiste nel tuo catalogo non seleziona nulla.

Chiunque può inserire il mio configuratore nel proprio sito?

No. Le richieste con la tua chiave pubblicabile sono accettate solo dai domini presenti nella lista consentita della chiave, e l'iframe può essere incorporato solo da quei domini. Una pagina su qualsiasi altro dominio riceve un rifiuto.

Cosa significa bloccare una versione?

Ogni build del configuratore viene pubblicata come release immutabile e numerata, con un hash di integrità per ogni file. La console può darti uno snippet che punta a una release e porta l'hash, così il browser rifiuta un file modificato. L'alternativa è il canale mobile latest, che serve sempre la build più recente e non ha hash. Gli snippet bloccati sono offerti quando il servizio conserva le release.

Come fa la mia pagina a sapere che il cliente ha ordinato?

L'elemento genera eventi, tra cui un evento cutoptim:order con l'id dell'ordine e l'ordine firmato. Trattalo solo come una notifica: il tuo server deve verificare il preventivo e ottenere l'ordine da CutOptim prima di addebitare qualsiasi cosa. Vedi la pagina sugli ordini.