Docs › Web component and frameworks

Web component <label-82>

A preview and a print button from one tag: attributes, properties, events.

The CDN script registers <label-82>. It previews the first row and prints every row when its button is pressed. A good fit for server-rendered pages without a framework (PHP, JSP, ASP).

<link rel="stylesheet" href="https://82label.app/cdn/v0.2.0/82label.css">
<script src="https://82label.app/cdn/v0.2.0/82label.min.js"></script>

<label-82
  template="lbl_a1b2c3d4e5"
  data='[{"name":"Wireless earbuds Pro","price":"₩39,000","sku":"EP-2026-0412"}]'
  button="Print label">
</label-82>

Attributes

Attribute	Meaning
`template`	A template id (`lbl_…`) or template JSON.
`data`	A JSON object or array; each array item prints one label.
`printer`	Agent printer name.
`mode`	`auto` (default), `agent`, `browser`
`start-at`	Sheets: first slot.
`button`	Button text (default "인쇄").
`preview`	`false` hides the preview and leaves the button.
`frames`	`false` skips pre-printed frames (`layer: 'frame'`).
`base`	Server for template ids (default https://82label.app).

From script

const el = document.querySelector('label-82');
el.template = template;        // an object as is
el.data = orders.map(toRow);   // an array
el.addEventListener('printed', (e) => console.log(e.detail)); // PrintResult
el.addEventListener('error', (e) => console.error(e.detail));
await el.print();              // print without the button

Styling

82label.css styles the preview frame and button; change them with CSS variables. The label picture itself is paper, so it stays white.

label-82 {
  --l82-accent: #d9431f;   /* button */
  --l82-accent-ink: #fff;
  --l82-bg: #fafaf9;       /* preview frame */
  --l82-border: #e4e4e0;
  --l82-radius: 8px;
  --l82-font: Pretendard, sans-serif;
}

Messages (waiting for permission, subscription needed …) appear below the button in .l82-notice. For another tag name: Label82.defineLabelElement('shop-label').