Startseite›Ratgeber›Einen ZPL-Etiketten-Viewer in die eigene Seite einbetten
Einen ZPL-Etiketten-Viewer in die eigene Seite einbetten
Veröffentlicht:
Wenn Ihre Dokumentation, Ihr Support-Portal oder ein internes
Werkzeug ZPL-Code zeigt, können Sie daneben das gerenderte
Etikett mit einem einzigen iframe zeigen. Keine
JavaScript-Bibliothek, kein API-Schlüssel, kein serverseitiger Code:
Das Fragment trägt ein base64-kodiertes JSON-Objekt mit dem
Etikett:
const daten = {z: "^XA^FO50,50^A0N,40^FDHallo^FS^XZ",
d: "8", // dpmm: 6, 8, 12 oder 24
w: "4", // Breite in Zoll
h: "6"}; // Höhe in Zoll
const hash = btoa(unescape(encodeURIComponent(JSON.stringify(daten))));
iframe.src = "https://labelixa.com/embed/viewer#" + hash;
Der einfachste Weg zu einem korrekten Wert: den
ZPL-Viewer öffnen, das Etikett
einfügen und "Link kopieren" nutzen — der Teil nach # ist
genau dieses Format.
Warum das ZPL im Fragment reist
Der Teil nach # wird in keiner Request-URL gesendet;
Ihr Etiketteninhalt landet weder in Proxy-Logs noch in CDN-Logs noch im
Referer-Header. Die eingebettete Seite liest ihn im Browser und rendert
über dieselbe API wie der Haupt-Viewer.
Ehrliche Grenzen
Das Embed nutzt das anonyme Rendering-Kontingent — ausreichend für
Dokumentationsseiten und Support-Threads, aber nicht für stark
besuchte Produktseiten dimensioniert; dort serverseitig über die
API mit Schlüssel rendern und das Bild cachen.
Das iframe passt sich der vorgegebenen Höhe an, und unter dem Etikett
bleibt ein kleiner "Labelixa"-Link sichtbar: Dieser Link ist der Preis
des kostenlosen Embeds.
Den Viewer auf der eigenen Seite nennen
Das iframe-Dokument liegt auf labelixa.com; der Link darin zählt auf
Ihrer Seite nichts. Wenn Sie den kostenlosen Viewer dort nennen wollen, wo
es wirklich hilft — und anderen beim Finden helfen —, setzen Sie eine
Bildunterschrift unter den Rahmen, in Ihrem eigenen HTML:
<p class="caption">Etikett gerendert mit dem
<a href="https://labelixa.com/de/tools/zpl-preview">Labelixa-ZPL-Viewer</a></p>
Das ist optional; das Embed funktioniert auch ohne.
Ein Badge für Ihre README
Wenn Ihr Repository ZPL-Dateien enthält, die in der CI geprüft werden
(die Diagnose-API oder npx labelixa validate
beendet sich bei Fehlern mit Exit-Code ungleich null), können Sie das mit
einem Badge sagen:
[](https://labelixa.com/tools/zpl-preview)
Das Badge ist ein statisches SVG — kein Zähler, kein Tracking, einen Tag
gecacht. Verwenden Sie es nur, wenn die Aussage für Ihr Repository stimmt:
ein „validated“ neben Dateien, die niemand prüft, hilft niemandem.
Leser eigenes ZPL ausprobieren lassen
Der Viewer oben zeigt ein festes Etikett. Sollen Leser ihr ZPL
einfügen und rendern, ohne Ihre Seite zu verlassen — ein Tutorial, ein
Wissensdatenbank-Artikel, ein Support-Formular —, betten Sie stattdessen
das Ausprobieren-Widget ein:
Es ist dieselbe minimale Fläche mit einem Textfeld und einer
Rendern-Schaltfläche. Sie können es mit demselben Fragmentformat wie den
Viewer vorbefüllen (/embed/try#…): das Etikett erscheint im
Feld und wird beim Laden einmal gerendert. Renderings zählen auf das
anonyme Kontingent des Lesers, nicht auf Ihres; der Text verlässt den
Browser nur als Render-Anfrage.
Häufig gestellte Fragen
Brauche ich einen API-Schlüssel, um den Viewer einzubetten?
Nein. Das Embed läuft über das anonyme Rendering-Kontingent — genug für Dokumentations- und Support-Seiten. Stark besuchte Seiten sollten serverseitig über die API mit Schlüssel rendern und das Bild cachen.
Wird das ZPL in der iframe-URL an Ihre Server gesendet?
Das Etikett reist nach dem # (im URL-Fragment), das Browser nie als Teil einer Request-URL senden — es bleibt aus Proxy-Logs, CDN-Logs und Referer-Headern heraus. Das Rendering läuft über dieselbe API wie der Haupt-Viewer.
Wie bekomme ich das ZPL-Badge für meine README?
Kopieren Sie die Markdown-Zeile aus dem Badge-Abschnitt: Sie bindet ein statisches SVG von labelixa.com ein und verlinkt auf den Viewer. Keine Anmeldung, kein Zähler. Nur verwenden, wenn Ihr Repository seine ZPL-Dateien in der CI wirklich prüft.
Kann ich den Labelixa-Link unter dem Etikett entfernen?
Nein — der sichtbare Link ist der Preis des kostenlosen Embeds. Für ein Bild ohne Branding über die API rendern und das PNG selbst ausliefern.
