Guía para empezar a ofrecer ZonQR

Checklist práctico para reuniones con plazas, asociaciones y negocios.

1. Antes de la reunión

1. Abre promo.html y el directorio demo en tu celular.
2. Edita js/config.js: WhatsApp, precios y mensaje.
3. Prueba el formulario “Solicitar zona” (debe abrir tu WhatsApp con el texto armado).
4. Si ya tienes dominio, publica la carpeta y regenera el QR desde la promo (se arma solo).

2. Pitch de 30 segundos

3. Qué mostrar en orden

1. promo.html — beneficios y precios.
2. index.html — lista, mapa, una ficha con reseña y WhatsApp.
3. QR de la promo — que el cliente escanee con su celular.
4. Formulario — “Si les late, les mando la cotización por WhatsApp ahora.”

4. Empaques que puedes vender

• Setup de zona — pago único (carga inicial + QR).
• Renta mensual de zona — plaza / asociación.
• Alta por negocio — si un comercio quiere entrar a una zona ya activa.

Los montos están en js/config.js y se reflejan solos en la página de ventas.

5. Cargar negocios e imágenes (Admin)

1. Abre admin.html (con Firebase: tu correo y contraseña de admin; sin Firebase: modo local).
2. Crea o edita negocios, sube fotos desde tu galería.
3. Los datos se guardan en este navegador (localStorage). Exporta JSON de respaldo.
4. El directorio (index.html) usa automáticamente ese catálogo.

6. Personalizar el demo

• Negocios y coordenadas: js/data.js
• WhatsApp y precios: js/config.js
• Colores: variables en css/styles.css (--lime, --bg)

7. Google Maps (opcional)

1. En Google Cloud Console crea un proyecto.
2. Habilita Maps JavaScript API.
3. Crea una clave de API y restríngela a tu dominio.
4. En js/config.js pon la clave en googleMapsApiKey.
5. Deja mapsProvider: "auto" (usa Google si hay key; si no, OpenStreetMap).

Sin clave el mapa sigue funcionando con Leaflet/OSM, sin costo.

8. Publicar en Netlify (gratis, paso a paso)

1. Crea cuenta en netlify.com (puedes entrar con GitHub o email).
2. En el dashboard: Add new site → Deploy manually.
3. Arrastra la carpeta completa zonqr/ (la que tiene index.html, admin.html, js/, css/, etc.).
4. Espera 10–30 segundos. Te dará una URL tipo https://algo-random.netlify.app.
5. Opcional: Domain settings → Options → Edit site name (ej. zonqr-xalapa).
6. Abre https://TU-SITIO.netlify.app/promo.html y .../index.html para verificar.
7. HTTPS ya viene activado (necesario para PWA, geolocalización e instalación).

Actualizar el sitio: vuelve a arrastrar la carpeta en Deploys → Deploy manually (o arrastra un zip).

Alternativa Vercel: vercel.com → Add New → Project → upload la carpeta. Mismo resultado.

9. Transferir catálogo entre dispositivos (sin backend)

Los negocios y fotos viven en el navegador. Para pasarlos a otro celular o PC:

1. En el dispositivo origen abre admin.html → sección Transferir.
2. Descargar JSON o Compartir archivo (WhatsApp, Drive, AirDrop).
3. En el otro dispositivo: Admin → Importar archivo (o pegar JSON).
4. Abre el directorio: ya verás los mismos negocios.

Si hay muchas fotos, el JSON pesa más: usa siempre archivo, no el portapapeles.

10. Siguiente nivel (cuando cierres clientes)

• Backend (Firebase / Supabase) para reseñas y negocios en la nube.
• Panel simple para que el dueño de la plaza edite horarios y promos.
• Varias zonas (un subdominio o ruta por zona).
• QR impresos con diseño de la plaza.

Archivos clave

• admin.html — cargar negocios, fotos y transferir JSON
• promo.html — ventas
• index.html — producto demo
• js/config.js — tu WhatsApp y precios
• js/data.js — negocios de ejemplo
• privacidad.html — aviso básico
• offline.html — fallback sin red

Ventas · Demo · Privacidad

Desarrollado por