Agregar un código QR a tu sitio web puede ser una solución práctica cuando el contenido se consume en múltiples dispositivos al mismo tiempo. Un código QR a tus publicaciones puede marcar la diferencia. No solo es visualmente atractivo, también es una forma práctica de que los visitantes compartan o accedan fácilmente al contenido desde sus teléfonos.

En esta post te mostramos cómo generar uno automáticamente con JavaScript usando la URL actual del navegador, y cómo evitar errores comunes de estilo que pueden arruinar la presentación.

¿Para qué sirve un QR en un post o página?

Cuando alguien lee tu contenido desde una computadora, muchas veces quiere:

• Guardarlo en su celular para leerlo más tarde.
• Compartirlo por WhatsApp o redes sin copiar/pegar el link.
• Escanearlo desde una pantalla en una presentación, showroom o evento.

En todos esos casos, el código QR actúa como puente directo entre el mundo web y el mundo físico o móvil.

El Codigo

Con solo unas líneas de código podés mostrar un código QR dinámico en cualquier post o página de tu sitio web. Usamos la librería liviana qrcode.js, que no requiere instalación ni configuración compleja.

<!-- Contenedor donde se insertará el QR -->
<div id="qrcode"></div>

<!-- Librería QRCode.js -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>

<!-- Script para generar el código QR -->
<script>
  new QRCode(document.getElementById("qrcode"), {
    text: window.location.href, // URL actual de la página
    width: 160,                 // Ancho en píxeles
    height: 160                 // Alto en píxeles
  });
</script>

Con esto, cada vez que alguien entre a una página, se generará un QR que contiene la URL específica de esa vista. No importa si es un post, una ficha de producto o una sección estática: el código QR siempre apunta al enlace actual.

¿Querés cambiar el tamaño del código QR?

Solo tenés que ajustar los valores de width y height en el bloque del script.

width: 240,
height: 240

Esto hará que el QR se renderice más grande. También podés adaptar su tamaño con estilos CSS si preferís que sea responsivo.

Tip extra: centrarlo o integrarlo al diseño

Podés usar una clase o estilos para que el QR quede alineado al centro o integrado visualmente al contenido:

#qrcode {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

Pensalo como parte de tu estrategia UX

No se trata solo de una herramienta técnica, sino de una experiencia más fluida para el usuario. Un QR bien ubicado puede aumentar la viralidad de tu contenido, facilitar la navegación entre dispositivos y mejorar la percepción tecnológica de tu marca.