Busca "cómo mostrar cuántas personas están viendo un producto" y casi todas las respuestas son un fragmento como este:
<div><b id="viewers"></b> people are viewing this product</div>
<script>
var min = 15, max = 60;
viewers.textContent = Math.floor(Math.random() * (max - min + 1)) + min;
</script>
El número se elige al azar entre un mínimo y un máximo. No se cuenta a nadie. Abre la misma página en dos ventanas y no coinciden; recarga y obtienes un tercer número. Los compradores lo notan, y nuestro análisis de 200 tiendas Shopify pequeñas encontró contadores que hacían exactamente esto.
Esta guía muestra la otra forma: un conteo de las personas que realmente estuvieron en la página en los últimos 90 segundos, con dos líneas de código, en cualquier sitio.
¿Prefieres verlo en video? Tutoriales en video: cualquier sitio web o WordPress (2 min) y Shopify (3 min).
Qué necesitas
- Una cuenta gratuita de Provedly. Sin tarjeta.
- Acceso al HTML de tu sitio, o al administrador de WordPress o Shopify.
El conteo viene de una señal periódica (heartbeat): mientras una página está abierta, el navegador le dice al servidor de Provedly cada 30 segundos que ese visitante sigue ahí. El número que se muestra es cuántos visitantes distintos se vieron en esa página en los últimos 90 segundos. Nadie puede escribir un número en él, ni siquiera tú.
Paso 1: crea un sitio y un widget
Regístrate, añade tu sitio con su dominio y crea un widget. El contador en vivo viene activado por defecto con un mínimo de 2, así que cuando eres la única persona en la página se queda oculto en lugar de mostrar "1 persona está viendo esto".
En la pestaña Embed del widget encontrarás las dos líneas que necesitas: el fragmento del sitio arriba y, en Show the live count on the page, la línea del contador en dos estilos, One line y Card.
Paso 2: añade el fragmento del sitio
Pega el fragmento del sitio una vez, justo antes de la etiqueta de cierre </body>, en todas las páginas. Se ve así, con tu propia clave de sitio:
<script src="https://provedly.app/w/site.js" data-site="site_your_key" async></script>
Dónde va depende de tu plataforma:
| Plataforma | Dónde pegar el fragmento del sitio |
|---|---|
| HTML simple | Antes de </body> en tu página o en la plantilla compartida |
| Shopify | Tienda online, Temas, Editar código, layout/theme.liquid, antes de </body> |
| WordPress | Instala el plugin gratuito de Provedly y pega el token de tu widget en sus ajustes; no hace falta código |
| React, Next.js, Vue | En tu layout raíz, una vez; la pestaña Embed tiene una versión lista para usar |
Paso 3: coloca el contador donde debe aparecer
Añade esta línea donde quieras que aparezca el conteo, normalmente justo debajo del botón de añadir al carrito o de registro:
<div data-provedly-live data-style="card" data-template="{n} people are viewing this product right now"></div>
- En Shopify, abre Personalizar, cambia a tu plantilla de producto y añade un bloque Liquid personalizado debajo de los botones de compra, luego pega la línea. En temas como Horizon, pasa el cursor justo debajo de Botones de compra en la barra lateral y haz clic en el signo más.
- En WordPress, añade un bloque HTML personalizado donde lo quieras y pega la línea.
- En un sitio simple, pégala en el HTML junto a tu botón.
Opciones que puedes cambiar en esa misma línea:
| Atributo | Qué hace |
|---|---|
data-style="card" |
Una versión en recuadro con el número grande y un enlace Verify. Quítalo para tener una sola línea de texto con la fuente de tu tema |
data-template="..." |
Tu propia redacción. {n} es donde va el número |
data-dot="off" |
Quita el pequeño punto naranja |
Paso 4: pruébalo con ventanas reales
Abre tu página de producto. Estando solo, no se muestra nada, porque estás por debajo del mínimo. Abre la misma página en una segunda ventana, o en tu teléfono: aparece la tarjeta con 2. Abre una tercera y todas las ventanas dicen 3.
Cierra una ventana y el conteo baja en cuanto se agotan los 90 segundos de ese visitante. Se mueve porque la gente se mueve, que es justamente la idea.
El enlace Verify
El estilo tarjeta enlaza a la página de verificación pública de tu widget. Cualquiera que haga clic ve cómo se cuenta el número: visitantes reales en los últimos 90 segundos, oculto por debajo de tu mínimo, y una nota de que el dueño del sitio no puede escribir un número en él. Un fragmento aleatorio no tiene nada que poner ahí.
Cuando el contador no aparece
- Estás solo en la página. Es el mínimo haciendo su trabajo. Abre una segunda ventana.
- Falta el fragmento del sitio. La línea del contador solo funciona si el fragmento del sitio está en la misma página.
- Tu dominio no está permitido. El widget solo responde a solicitudes de los dominios de los ajustes de tu sitio. Añade ahí también los dominios de staging.
- La página está en caché con un tema antiguo. En Shopify, comprueba que editaste el tema publicado y no un borrador.
¿Ya tienes un contador?
Si tu tienda muestra hoy "personas viendo" y no sabes de dónde sale el número, pega una página de producto en el verificador gratuito. Carga la página como varios visitantes nuevos y te dice si el número vino de un servidor o se inventó en el navegador.
Preguntas frecuentes
¿Es ilegal un contador aleatorio de "personas viendo"?
No somos abogados y esto no es asesoramiento legal. Los reguladores de consumo, incluida la Competition and Markets Authority del Reino Unido, han dicho que la popularidad inventada y la urgencia inventada pueden engañar a los compradores. Un conteo de visitantes reales evita la pregunta.
¿Qué incluye el conteo?
Los visitantes vistos en esa página en los últimos 90 segundos, contados a partir de una señal que su navegador envía cada 30 segundos mientras la página está abierta. Solo se muestra cuando alcanza el mínimo que fijes, 2 por defecto.
¿Hace más lento mi sitio?
El fragmento del sitio se carga de forma asíncrona después de tu página, y el contador son unas pocas líneas de texto. Tu página no lo espera.
¿Es gratis?
Sí. El plan gratuito incluye el contador en vivo, un sitio y hasta 2.000 visualizaciones de notificaciones al mes, y no necesitas tarjeta para registrarte. El contador funciona incluso antes de que tengas notificaciones de compra que mostrar.