Todo sitio de utilidad pública, blog de tecnología, agencia o pequeño negocio recibe visitantes que necesitan generar un código QR rápido — y hoy salen de tu sitio para hacerlo en otro lugar. Cada salida es una visita que no vuelve.

La solución es simple: poner un generador de códigos QR dentro de tu propio sitio, como un widget. El visitante genera el código sin salir de la página, tú ganas una herramienta útil que atrae visitas recurrentes (y a veces hasta un enlace de quien recomienda la página), y todo esto sin escribir una línea de backend.

Este tutorial muestra la forma de 1 minuto: copiar un snippet de embed y pegarlo en tu HTML, WordPress, Wix o Squarespace.

Por qué poner un generador de códigos QR en tu sitio

  • Engagement: el visitante interactúa con la página en vez de solo leer y salir.
  • Retención: resuelve su problema (generar el QR) sin abrir otra pestaña en otro sitio.
  • Herramienta útil = tráfico recurrente: quien la usa una vez tiende a volver cuando necesite otro QR — y puede recomendar la página a otras personas.
  • Link building orgánico: las herramientas incrustadas son el tipo de contenido que otros sitios enlazan de forma natural.
  • Cero mantenimiento: el widget corre en el servidor de Code2Scan. Tú pegas el código una sola vez.

La forma de 1 minuto: copiar y pegar el código de embed

No hace falta instalar nada, crear una cuenta ni escribir JavaScript. Es un único bloque de HTML — un <iframe> — que pegas donde quieras que aparezca el generador:

<iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>

Cada atributo cumple una función:

Atributo Función
src Dirección del widget — no hace falta cambiarla
width="100%" Ocupa el ancho del contenedor donde lo pegaste
height="400" Alto en píxeles — ajústalo según tu diseño
style="max-width:340px" Evita que el widget se vea enorme en pantallas anchas
loading="lazy" Solo carga cuando el visitante llega a esa sección — no ralentiza la página
title="..." Accesibilidad: describe el iframe para lectores de pantalla

Dónde pegarlo y qué ganas

Dónde pegarlo Beneficio
Pie de página del blog Herramienta útil junto al contenido, aumenta el tiempo en página
Página de contacto El visitante genera un QR de tu dirección o enlace mientras está ahí
Artículo sobre marketing digital Contexto perfecto — quien lee sobre QR ya quiere probar uno
Landing page de agencia Demuestra capacidad técnica sin costo de desarrollo
Panel interno / intranet El equipo genera QRs sin depender de otra herramienta

Cómo añadirlo en HTML puro

Si tu sitio es HTML estático (o una plantilla personalizada), pega el <iframe> justo donde quieras que aparezca el widget — dentro de un <div>, una sección o una barra lateral:

<section>
  <h2>Generador de códigos QR</h2>
  <iframe src="https://www.code2scan.com/embed/qr" width="100%" height="400" style="border:0;max-width:340px" loading="lazy" title="Free QR Code Generator"></iframe>
</section>

Guarda el archivo, publícalo y listo — el widget ya está funcionando.

Cómo añadirlo en WordPress

  1. Edita la página o entrada donde va a aparecer el widget.
  2. Añade un bloque "HTML personalizado" (en el editor de bloques) o usa un widget de "Texto/HTML" (en temas con editor clásico).
  3. Pega el código del <iframe> dentro del bloque.
  4. Haz clic en Vista previa para revisarlo antes de publicar.
  5. Publica la página.

No hace falta ningún plugin — el bloque HTML nativo de WordPress ya lo resuelve.

Cómo añadirlo en Wix o Squarespace

Ambos permiten insertar HTML personalizado mediante un elemento específico:

  • Wix: añade el elemento "Embed" → "Embed HTML", pega el código del iframe y ajusta el tamaño del elemento en pantalla.
  • Squarespace: añade un bloque de contenido de tipo "Code Block", pega el snippet y guarda.

En ambos casos el widget se adapta al espacio reservado — no hace falta tocar width="100%".

Es gratis, sin registro y funciona en cualquier CMS

El widget es público y gratuito: no pide inicio de sesión, no pide clave de API, no tiene límite de uso. Funciona en cualquier plataforma que acepte HTML — WordPress, Wix, Squarespace, Webflow, Shopify, Notion, o un sitio hecho a mano. Si tu visitante solo necesita un QR puntual sin instalar nada en tu propio sitio, también puede usar directamente el generador de códigos QR gratis — pero tener el widget incrustado evita ese desvío.

Personalización básica: ancho y alto

Los dos ajustes más comunes:

  • Ancho menor: cambia width="100%" por un valor fijo, como width="340", si el widget va en una barra lateral estrecha.
  • Alto mayor o menor: el valor height="400" funciona bien en la mayoría de los casos, pero si el widget corta contenido, súbelo a 450 o 500.

Evita forzar dimensiones muy pequeñas (menos de 300px de ancho) — el generador queda apretado y difícil de usar en el móvil.

Paso a paso completo

  1. Entra a la página del widget de QR y copia el código de embed ya listo.
  2. Pega el <iframe> en el HTML de tu página, en el bloque HTML de WordPress, o en el elemento de código de Wix/Squarespace.
  3. Ajusta width y height si lo necesitas para tu diseño.
  4. Guarda y publica la página.
  5. Pruébalo en el móvil y en el computador — genera un QR real y escanéalo para confirmar que funciona.

Errores comunes

❌ Olvidar el loading="lazy"

Sin este atributo, el iframe carga apenas se abre la página, aunque el visitante nunca llegue a esa sección. Eso ralentiza la carga inicial sin necesidad.

❌ Pegar el iframe sin max-width

En pantallas grandes, un width="100%" sin límite de ancho máximo estira el widget de forma exagerada. Mantén el style="max-width:340px" del snippet original.

❌ Pensar que hace falta una cuenta o clave de API

El widget es público — no existe paso de autenticación. Si algún tutorial dice lo contrario, está desactualizado o habla de otro servicio.

❌ No probarlo en móvil

El widget en sí es responsivo, pero el contenedor donde lo pegaste puede no serlo. Revisa siempre cómo se ve en el móvil antes de darlo por terminado.

❌ Confundir el widget con un QR rastreable

El widget genera un QR estático directamente en el navegador del visitante. Si necesitas saber cuántas personas escanearon cada QR, eso es una función distinta — mira la guía de códigos QR rastreables con UTM.

Resumen

  1. Copia el snippet <iframe> del widget de QR — no hace falta cuenta.
  2. Pégalo en HTML puro, en el bloque HTML de WordPress, o en el elemento de código de Wix/Squarespace.
  3. El loading="lazy" evita que el widget ralentice la carga de la página.
  4. Ajusta width y height según el espacio disponible en tu diseño.
  5. Es gratis, funciona en cualquier CMS y no expone tus datos.
  6. Para rastreo de escaneos o destino editable, eso ya es un caso de uso de código QR dinámico — el widget cubre la generación simple y gratuita.

¿Quieres probarlo antes de pegarlo en tu sitio? Mira el widget de QR en acción y copia el código de embed — toma menos de un minuto ponerlo en marcha. Si prefieres generar un QR puntual ahora mismo, usa el generador de códigos QR.