Comment intégrer un widget MyLaserTools à votre site web

Comment fonctionne l'intégration

L'outil intégré fonctionne dans une <iframe> sur votre page. Votre client réalise sa création, et l'outil produit un SVG propre, prêt pour le laser. Chaque intégration est liée à votre domaine et à une clé d'intégration : elle fonctionne uniquement sur les sites que vous avez autorisés.

• L'outil reste hébergé et maintenu par MyLaserTools : vous bénéficiez toujours de sa dernière version.
• L'intégration est limitée aux domaines précis que vous enregistrez, pour des raisons de sécurité. Personne d'autre ne peut charger votre widget configuré.
• Vous choisissez les fonctionnalités activées et la manière dont le SVG final rejoint votre commande.

Étape 1 : obtenir votre clé d'intégration

La clé d'intégration joue le rôle d'une clé API pour le widget. Pour en obtenir une, contactez-nous à hi@mylasertools.com en précisant :

• L'outil à intégrer, par exemple le générateur d'écussons de casquette.
• Le ou les domaines exacts où l'outil sera intégré, par exemple https://yourstore.com. Indiquez le domaine racine et sa version www si vous utilisez les deux.
• Votre plateforme : DecoNetwork, Shopify, site personnalisé, etc.

Nous autorisons vos domaines et vous envoyons une clé d'intégration unique, par exemple yourstore-hatpatch. Rien ne fonctionne tant que votre domaine n'est pas autorisé : cette étape est donc nécessaire.

Étape 2 : ajouter le widget à votre page

Collez cet extrait dans une page ou un bloc de contenu acceptant le HTML, en remplaçant l'identifiant de l'outil et la clé par ceux que nous vous transmettons :

<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>

• Conservez allow="downloads; clipboard-write" pour que les boutons Télécharger le SVG et Copier le lien fonctionnent dans le cadre.
• Ajustez la valeur height à votre mise en page. L'outil s'adapte à l'écran et occupe toute la largeur.
• Si votre plateforme place l'iframe dans un environnement isolé, vérifiez que les téléchargements y sont autorisés.

Étape 3 : choisir vos paramètres

Nous configurons ces paramètres pour chaque intégration : indiquez-nous vos préférences. Vous pouvez les modifier à tout moment en nous le demandant.

• Filigrane : afficher un filigrane MyLaserTools discret sur l'aperçu et l'intégrer au SVG exporté.
• Télécharger le SVG : permettre aux clients de télécharger le fichier final.
• Attribution : afficher un petit lien « Propulsé par MyLaserTools.com » sous l'outil.
• Couleur d'accent : adapter les boutons et les commandes de l'outil aux couleurs de votre marque.
• Partager / Enregistrer : activer les boutons intégrés de partage et d'enregistrement des créations.
• Verrouiller les dimensions : masquer les réglages de taille pour limiter les clients aux dimensions autorisées.
• Envoyer à la commande : ajouter un bouton « Ajouter à ma commande » qui transmet le SVG à votre page (voir l'étape 4, option B).

Étape 4 : joindre la création à la commande

Il existe trois façons de transmettre le SVG final à votre processus de commande. Choisissez celle qui convient à votre plateforme.

Option A : télécharger puis joindre le fichier (la plus simple)

Le client clique sur Télécharger le SVG, puis joint ce fichier à sa commande dans le champ d'import habituel de votre plateforme. Aucune configuration n'est nécessaire de votre côté : cette méthode fonctionne directement.

Option B : transmettre le SVG à votre page (la plus intégrée)

Lorsque la fonctionnalité « Envoyer à la commande » est activée, l'outil affiche un bouton Ajouter à ma commande. Un clic envoie le SVG à votre page via l'API postMessage du navigateur. Ajoutez un court script d'écoute pour le recevoir et remplir le champ d'import d'illustration ou le conserver dans une note de commande.

Le message se présente ainsi :

{
  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
}

Récepteur A : remplir automatiquement un champ de fichier d'illustration. Le SVG est placé directement dans un champ d'import de votre formulaire de commande. Adaptez le sélecteur à votre champ réel :

<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>

Récepteur B : écrire dans un champ de notes de commande ou un champ masqué. Utilisez cette méthode si aucun champ de fichier n'est accessible :

<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>

Option C : coller un lien vers la création

Si le partage est activé, les clients peuvent utiliser le bouton Partager pour créer un lien vers leur création et le coller dans un champ de commande ou de notes. Votre équipe ouvre ce lien pour récupérer et télécharger le SVG lors du traitement de la commande.

Sécurité et domaines

• Les widgets se chargent uniquement sur les domaines enregistrés auprès de nous. Un site non enregistré ne peut pas afficher votre widget dans un cadre.
• Utilisez toujours https sur la page qui héberge l'iframe.
• Si vous ajoutez plus tard un domaine ou un sous-domaine, prévenez-nous pour que nous l'autorisions.
• Vous pouvez nous demander de désactiver ou de renouveler votre clé d'intégration à tout moment.

Mettre en place votre intégration

Vous souhaitez intégrer un outil à votre boutique ? Écrivez à hi@mylasertools.com en indiquant l'outil, le domaine et la plateforme, et nous vous fournirons une clé. L'intégration commerciale est actuellement proposée dans le cadre d'un partenariat : contactez-nous pour trouver la formule adaptée.