How to Embed a MyLaserTools Widget on Your Website

How embedding works

An embedded tool runs inside an <iframe> on your page. Your customer builds their design, and the tool produces a clean, laser-ready SVG. Each embed is tied to your domain and an embed key, so it only works on sites you have authorized.

• The tool stays hosted and maintained by MyLaserTools, so you always get the latest version.
• Embedding is locked to the specific domains you register (for security), so nobody else can load your configured embed.
• You control which features are on or off, and how the finished SVG reaches your order.

Step 1: Get your embed key

The embed key is like an API key for the widget. To get one, contact us at hi@mylasertools.com with:

• The tool you want to embed (for example, the Hat Patch Generator).
• The exact domain(s) the tool will be embedded on, for example https://yourstore.com. Include both the apex and www if you use both.
• Your platform (DecoNetwork, Shopify, custom site, etc.).

We authorize your domain(s) and send you back a unique embed key (for example, yourstore-hatpatch). Nothing works until your domain is whitelisted, so this step is required.

Step 2: Add the widget to your page

Paste this snippet into any page or content block that accepts HTML, replacing the tool slug and key with the ones we send you:

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

• Keep allow="downloads; clipboard-write" so the Download SVG and copy-link buttons work inside the frame.
• Adjust the height to suit your layout. The tool is responsive and fills the width.
• If your platform wraps the iframe in a sandbox, make sure downloads are permitted.

Step 3: Choose your settings

We configure these per embed, so tell us how you would like them set. You can change them any time by asking us.

• Watermark: show a faint MyLaserTools watermark over the preview and baked into the exported SVG.
• Download SVG: let customers download the finished file.
• Attribution: show a small "Powered by MyLaserTools" link under the tool.
• Accent color: recolor the tool's buttons and controls to match your brand.
• Share / Save: allow the built-in share and save-design buttons.
• Lock dimensions: hide the size controls so customers can only use the sizes you allow.
• Send to your order: add an "Add to my order" button that pushes the SVG to your page (see Step 4, option B).

Step 4: Get the design into your order

There are three ways to move the finished SVG into your order workflow. Pick whichever fits your platform.

Option A: Download and attach (simplest)

The customer clicks Download SVG, then uploads that file as artwork with their order using your platform's normal upload field. No setup needed on your side, this works out of the box.

Option B: Push the SVG to your page (tightest)

With the "Send to your order" feature enabled, the tool shows an Add to my order button. When clicked, it sends the SVG to your page using the browser's postMessage API. You add a small listener script to receive it and either fill your artwork upload field or store it in an order note.

The message looks like this:

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

Receiver A - auto-fill an artwork file input. This drops the SVG straight into an upload field on your order form. Change the selector to match your real input:

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

Receiver B - write to an order-notes or hidden field. Use this if there is no file input you can reach:

<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: Paste a design link

If sharing is enabled, customers can use the Share button to create a link to their design and paste it into an order or notes field. Your team opens the link to retrieve and download the SVG when fulfilling the order.

Security and domains

• Embeds only load on the domains you register with us. An unregistered site cannot frame your embed.
• Always use https on the page hosting the iframe.
• If you add a new domain or subdomain later, let us know so we can authorize it.
• You can ask us to disable or rotate your embed key at any time.

Get set up

Ready to embed a tool on your store? Email hi@mylasertools.com with your tool, domain, and platform, and we will get you a key. Commercial embedding is currently offered as a partnership, reach out and we will find the right fit.