Come incorporare un widget MyLaserTools nel tuo sito web

Come funziona l'incorporamento

Uno strumento incorporato funziona dentro un <iframe> nella tua pagina. Il cliente crea il suo design e lo strumento produce un SVG pulito, pronto per il laser. Ogni embed è legato al tuo dominio e a una chiave embed, quindi funziona solo sui siti che hai autorizzato.

• Lo strumento resta ospitato e mantenuto da MyLaserTools, quindi hai sempre la versione più recente.
• L'incorporamento è limitato ai domini specifici che registri (per sicurezza), quindi nessun altro può caricare il tuo embed configurato.
• Decidi tu quali funzioni sono attive o disattivate e come l'SVG finito arriva al tuo ordine.

Passo 1: ottieni la tua chiave embed

La chiave embed è come una chiave API per il widget. Per ottenerne una, scrivici a hi@mylasertools.com indicando:

• Lo strumento che vuoi incorporare (per esempio, il Generatore di toppe per cappelli).
• Il dominio o i domini esatti su cui lo strumento sarà incorporato, per esempio https://yourstore.com. Indica sia il dominio radice sia www se li usi entrambi.
• La tua piattaforma (DecoNetwork, Shopify, sito personalizzato, ecc.).

Autorizziamo il tuo dominio o i tuoi domini e ti inviamo una chiave embed univoca (per esempio, yourstore-hatpatch). Nulla funziona finché il tuo dominio non è tra quelli consentiti, quindi questo passo è obbligatorio.

Passo 2: aggiungi il widget alla tua pagina

Incolla questo frammento in qualsiasi pagina o blocco di contenuto che accetta HTML, sostituendo lo slug dello strumento e la chiave con quelli che ti inviamo:

<iframe
  src="https://mylasertools.com/embed/hat-patch-generator?k=YOUR_EMBED_KEY"
  style="width:100%;height:820px;border:0"
  allow="downloads; clipboard-write"
  title="Hat Patch Generator">
</iframe>

• Mantieni allow="downloads; clipboard-write" affinché i pulsanti Scarica SVG e Copia link funzionino dentro il frame.
• Regola height in base al tuo layout. Lo strumento è responsive e occupa tutta la larghezza.
• Se la tua piattaforma racchiude l'iframe in una sandbox, assicurati che i download siano consentiti.

Passo 3: scegli le tue impostazioni

Configuriamo queste impostazioni per ogni embed, quindi dicci come le vuoi. Puoi cambiarle in qualsiasi momento chiedendocelo.

• Filigrana: mostra una leggera filigrana MyLaserTools sopra l'anteprima e incorporata nell'SVG esportato.
• Scarica SVG: permette ai clienti di scaricare il file finito.
• Attribuzione: mostra un piccolo link «Creato con MyLaserTools.com» sotto lo strumento.
• Colore d'accento: ricolora i pulsanti e i controlli dello strumento per abbinarli al tuo marchio.
• Condividi / Salva: consente i pulsanti integrati per condividere e salvare il design.
• Blocca dimensioni: nasconde i controlli delle dimensioni, così i clienti possono usare solo le misure che consenti.
• Invia al tuo ordine: aggiunge un pulsante «Aggiungi al mio ordine» che invia l'SVG alla tua pagina (vedi il passo 4, opzione B).

Passo 4: porta il design nel tuo ordine

Ci sono tre modi per portare l'SVG finito nel tuo flusso degli ordini. Scegli quello più adatto alla tua piattaforma.

Opzione A: scarica e allega (la più semplice)

Il cliente fa clic su Scarica SVG, poi carica quel file come grafica insieme al suo ordine usando il normale campo di caricamento della tua piattaforma. Da parte tua non serve alcuna configurazione: funziona subito.

Opzione B: invia l'SVG alla tua pagina (la più integrata)

Con la funzione «Invia al tuo ordine» attiva, lo strumento mostra un pulsante Aggiungi al mio ordine. Al clic, invia l'SVG alla tua pagina tramite l'API postMessage del browser. Tu aggiungi un piccolo script listener che lo riceve e compila il tuo campo di caricamento della grafica oppure lo salva in una nota dell'ordine.

Il messaggio ha questo aspetto:

{
  type: "mylasertools:artwork",
  source: "mylasertools",
  tool: "hat-patch-generator",
  key: "YOUR_EMBED_KEY",
  filename: "hat_patch_capsule_100x100mm.svg",
  svg: "<?xml ... </svg>",
  widthMm: 100,
  heightMm: 100
}

Ricevitore A: compila automaticamente un campo file per la grafica. Inserisce l'SVG direttamente in un campo di caricamento del tuo modulo d'ordine. Cambia il selettore in modo che corrisponda al tuo campo reale:

<script>
window.addEventListener("message", function (e) {
  if (e.origin !== "https://mylasertools.com") return;
  var m = e.data;
  if (!m || m.type !== "mylasertools:artwork") return;

  var file = new File([m.svg], m.filename, { type: "image/svg+xml" });
  var input = document.querySelector('input[type="file"]'); // your artwork input
  var dt = new DataTransfer();
  dt.items.add(file);
  input.files = dt.files;
  input.dispatchEvent(new Event("change", { bubbles: true }));
});
</script>

Ricevitore B: scrivi in un campo note dell'ordine o in un campo nascosto. Usalo se non c'è un campo file che puoi raggiungere:

<script>
window.addEventListener("message", function (e) {
  if (e.origin !== "https://mylasertools.com") return;
  var m = e.data;
  if (!m || m.type !== "mylasertools:artwork") return;

  var notes = document.querySelector("#order-notes"); // your field
  notes.value = (notes.value ? notes.value + "\n" : "") +
    "Design (" + m.widthMm + "x" + m.heightMm + "mm):\n" + m.svg;
});
</script>

Opzione C: incolla un link al design

Se la condivisione è attiva, i clienti possono usare il pulsante Condividi per creare un link al loro design e incollarlo in un campo dell'ordine o delle note. Il tuo team apre il link per recuperare e scaricare l'SVG quando evade l'ordine.

Sicurezza e domini

• Gli embed si caricano solo sui domini che registri presso di noi. Un sito non registrato non può mostrare il tuo embed in un frame.
• Usa sempre https nella pagina che ospita l'iframe.
• Se in seguito aggiungi un nuovo dominio o sottodominio, faccelo sapere così possiamo autorizzarlo.
• Puoi chiederci in qualsiasi momento di disattivare o ruotare la tua chiave embed.

Come iniziare

Vuoi incorporare uno strumento nel tuo negozio? Scrivi a hi@mylasertools.com indicando strumento, dominio e piattaforma, e ti procuriamo una chiave. L'incorporamento commerciale è attualmente offerto come partnership: contattaci e troveremo la soluzione giusta.