Las etiquetas de envío son la columna vertebral de la logística de e-commerce. Cada paquete necesita una etiqueta impresa con la dirección de destino, dirección de retorno, código de barras de rastreo e información del transportista. Aunque la mayoría de los transportistas proporcionan su propia generación de etiquetas, muchos negocios necesitan etiquetas personalizadas — para experiencias de unboxing de marca, configuraciones multi-transportista, gestión de almacén o envíos internacionales con declaraciones aduaneras.
Anatomía de una Etiqueta de Envío
- Información del remitente — Nombre de la empresa, dirección de retorno
- Información del destinatario — Nombre, dirección, teléfono
- Código de barras de rastreo — Code 128, Code 39 o código QR
- Tipo de servicio — Express, Estándar, Económico, etc.
- Peso y dimensiones — Peso y tamaño del paquete
Generando Códigos de Barras en HTML
const bwipjs = require('bwip-js');
async function generateBarcode(text, type = 'code128') {
const png = await bwipjs.toBuffer({
bcid: type,
text: text,
scale: 3,
height: 15,
includetext: true,
textxalign: 'center',
});
return `data:image/png;base64,${png.toString('base64')}`;
}
const trackingBarcode = await generateBarcode('MX999AA10123456784', 'code128');
const qrCode = await generateBarcode('https://rastreo.ejemplo.com/MX999AA10123456784', 'qrcode');Diseño de la Plantilla de Etiqueta
function shippingLabelHTML(order, barcodes) {
return `
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 101.6mm; height: 152.4mm; font-family: Arial, sans-serif; font-size: 10pt; }
.label { width: 100%; height: 100%; border: 2px solid #000; padding: 3mm; display: flex; flex-direction: column; }
.section { border-bottom: 1px solid #000; padding: 2mm 0; }
.from { font-size: 8pt; color: #333; }
.to { font-size: 14pt; font-weight: bold; padding: 3mm 0; }
.service-badge { display: inline-block; background: #000; color: #fff; padding: 2px 8px; font-weight: bold; }
.barcode-section { text-align: center; padding: 3mm 0; }
.barcode-section img { max-width: 100%; }
.tracking-number { font-family: monospace; font-size: 12pt; text-align: center; }
</style>
</head>
<body>
<div class="label">
<div class="section from">
<strong>DE:</strong> ${order.sender.name}<br>
${order.sender.address}<br>
${order.sender.city}, ${order.sender.state} — CP ${order.sender.zip}
</div>
<div class="section">
<span class="service-badge">${order.serviceType}</span>
<div class="to">
<div>${order.recipient.name}</div>
<div>${order.recipient.address}</div>
<div>${order.recipient.city}, ${order.recipient.state} — CP ${order.recipient.zip}</div>
<div>${order.recipient.country}</div>
</div>
</div>
<div class="section barcode-section">
<img src="${barcodes.tracking}" alt="Código de barras de rastreo">
<div class="tracking-number">${order.trackingNumber}</div>
</div>
<div class="section">
<span>Peso: ${order.weight} kg</span> |
<span>Dimensiones: ${order.dimensions}</span>
</div>
</div>
</body>
</html>`;
}Generando el PDF de la Etiqueta
async function generateShippingLabel(order) {
const barcodes = { tracking: await generateBarcode(order.trackingNumber, 'code128') };
const html = shippingLabelHTML(order, barcodes);
const response = await fetch('https://api.tongorender.io/v1/pdf', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.TONGORENDER_API_KEY,
},
body: JSON.stringify({
html,
width: '101.6mm',
height: '152.4mm',
margin: { top: '0mm', bottom: '0mm', left: '0mm', right: '0mm' },
printBackground: true,
}),
});
return Buffer.from(await response.arrayBuffer());
}Impresión de Etiquetas en Lote
const PDFMerger = require('pdf-merger-js');
async function batchGenerateLabels(orders) {
const merger = new PDFMerger();
for (const order of orders) {
const labelPdf = await generateShippingLabel(order);
await merger.add(labelPdf);
}
const mergedPdf = await merger.saveAsBuffer();
fs.writeFileSync('etiquetas-lote.pdf', mergedPdf);
console.log(`Generadas ${orders.length} etiquetas`);
}Integración con Plataformas de E-Commerce
// Handler de webhook de Shopify para nuevos pedidos
app.post('/webhooks/orders/create', async (req, res) => {
const order = req.body;
const labelData = {
trackingNumber: await getTrackingNumber(order),
sender: { name: 'Mi Tienda', address: 'Calle Almacén 123', city: 'Ciudad de México', state: 'CDMX', zip: '06600' },
recipient: {
name: order.shipping_address.name,
address: order.shipping_address.address1,
city: order.shipping_address.city,
state: order.shipping_address.province_code,
zip: order.shipping_address.zip,
country: order.shipping_address.country,
},
serviceType: 'EXPRESS',
weight: calculateWeight(order.line_items),
dimensions: '30x20x10 cm',
packageCount: 1, totalPackages: 1,
};
const labelPdf = await generateShippingLabel(labelData);
await uploadToS3(labelPdf, `labels/${order.id}.pdf`);
res.status(200).json({ success: true });
});Consejos para Etiquetas en Producción
- Usa dimensiones de impresora térmica — La mayoría de las impresoras térmicas usan etiquetas de 4x6 pulgadas.
- Prueba la lectura del código de barras — Imprime etiquetas de muestra y escanéalas antes de ir a producción.
- Maneja direcciones internacionales — Los formatos de dirección varían por país.
- Incluye información aduanera — Los envíos internacionales requieren declaraciones con descripciones, valores y códigos arancelarios.
- Renderización en alta DPI — Los códigos de barras necesitan bordes nítidos. Genéralos con mínimo 300 DPI.
El soporte de tamaño de página personalizado de TongoRender lo hace perfecto para etiquetas de envío.
Genera etiquetas de envío con TongoRender — 100 renderizaciones gratuitas al mes, sin necesidad de tarjeta de crédito.