Editor de Tema (rápido)

Esto guarda variables CSS en vw_business_theme para cada business_id.

Guía rápida de configuración

Rellenar en este editor del formulario

Estos datos son los básicos del negocio y también los usa la miniweb:

  • Nombre del negocio
  • Teléfono
  • Email
  • Dirección
  • Horario

Rellenar en el editor de miniweb

Allí configuras la parte visual y comercial: logo, portada, WhatsApp público, Google Maps, web externa, redes sociales, textos por idioma, promo, visibilidad de bloques, tema visual y PWA.

Abrir editor de miniweb

Preview

Abre el widget aquí:

Abrir widget

(Recarga el widget después de guardar)

Negocio

Datos del negocio

Se mostrará dentro del widget, encima de las horas disponibles.
Tiempo mínimo antes de la cita para que el cliente pueda cancelar desde el enlace. Ejemplos: 0 = siempre, 120 = hasta 2 horas antes, 1440 = hasta 24 horas antes.

* El email aquí es el que usas para avisos y comunicaciones.

Recordatorios (cliente)

Consejo: si solo quieres 2h antes, deja 24h desactivado.

Cierres / vacaciones

Festivos (plantilla Catalunya + España)

Desmarca un festivo si el negocio abre ese día.

Visual

Generar colores desde 1 color base

Usa siempre 3 colores principales derivados del color base.
El resto del diseño puede usar: - #ffffff (fondos) - #000000 (textos) - #999999 (placeholder)

Copia este bloque, cambia el color base y pégalo en ChatGPT: 
Color base: #XXXXXX

1. Genera SOLO estos 3 colores en HSL y HEX:
- Base (sin cambios)
- Claro (menos saturación, más luminosidad)
- Muy claro (mínima saturación, máxima luminosidad)

Reglas:
- Mantener el mismo hue (H)
- Claro: ~20–30% saturación, ~90–95% luminosidad
- Muy claro: ~5–15% saturación, ~96–98% luminosidad

2. Después, usando esos 3 colores, genera una paleta UI completa con:
- Fondo tarjeta
- Fondo inputs
- Texto principal
- Texto inputs
- Labels
- Placeholder
- Bordes
- Slot fondo / texto / activo
- Botón / hover / texto

Prioridad:
→ Usar SOLO los 3 colores generados
→ Blanco y negro solo si es necesario para contraste

Devuelve:
1. Los 3 colores (HSL + HEX)
2. La paleta completa lista para usar

Tipografía

Colores

Huecos (slots)

Botón

Layout

Presets

Servicios

Añade servicios y activa/desactiva. Duración y margen en minutos.

Define cuánto “consume” este servicio la capacidad del trabajador durante el tiempo reservado. 3 = ocupa casi todo, 1 = deja margen para simultanear otras tareas.

Fases del servicio

Trabajadores

Alta/baja y activar/desactivar (soft delete).

Capacidad total “disponible” del trabajador para permitir solapes. Valores altos permiten más simultaneidad.

Google Calendar

Conecta la cuenta del negocio y asigna un calendario a cada trabajador.

⚠️ Importante – Pasos completos para que Google Calendar funcione bien

La integración con Google Calendar tiene dos pasos obligatorios. Si falta alguno, las reservas se crearán, pero no se cancelarán ni editarán desde Google.

1️⃣ Acceder a GoogleCloud y añadir la dirección de correo del cliente
En USUARIOS DE PRUEBA, Pulsar +ADD USERS y agregar el usuario (email del negocio)
https://console.cloud.google.com/auth/audience?project=vadewebs-reservas 2️⃣ Conectar la cuenta de Google del negocio
Pulsa “Conectar / Reconectar Google” y accede con la cuenta del negocio (no la tuya). Este paso guarda el acceso en la base de datos.

3️⃣ Activar la sincronización de cancelaciones (OBLIGATORIO)
Después de conectar Google, debes crear los calendarios de los trabajadores y abrir manualmente esta URL en el navegador:
https://vadewebs.online/reservas/api/admin_google_watch_start.php?key=Toni0739&business_id=ID_DEL_NEGOCIO Este paso crea los webhooks que permiten:
  • Cancelar reservas desde Google Calendar
  • Eliminar clientes dentro de una reserva compartida
  • Liberar plazas automáticamente
⚠️ Si este paso no se hace, las cancelaciones desde Google NO se reflejarán en el sistema.

Cuándo repetir estos pasos:
  • Al crear un negocio nuevo
  • Si Google deja de cancelar reservas
  • Si se reconecta una cuenta de Google

Calendarios disponibles (cuenta conectada)

Gestionar calendario seleccionado

Selecciona un calendario en cada trabajador (abajo).

Crear calendario (opcional)

Asignación servicio ↔ trabajador

Marca qué trabajadores pueden realizar cada servicio.

Horarios

Lun–Dom. Puedes poner 1 o 2 franjas, o marcar cerrado.

Horarios por trabajador (opcional)

Si no defines horarios aquí, se usa el horario general del negocio.

Esto elimina el horario personalizado del trabajador.

Horarios por servicio (especiales)

Define horarios propios para un servicio (por ejemplo una masterclass semanal). Opcionalmente puede salirse del horario del negocio y/o bloquear con prioridad a los trabajadores asignados.

Campos del formulario (widget)

Gestiona los campos dinámicos que aparecen en el widget. Se guardan en vw_form_fields.

Sin espacios. Mejor en minúsculas y con guiones bajos.

Instalación del formulario de reservas

Usa este código para mostrar el formulario de reservas en cualquier web. Funciona en WordPress, Elementor, otras plataformas o webs sin editor.

Generar código

Cómo instalarlo según tu web

🔹 WordPress (sin Elementor)
  1. Ve a Páginas → Añadir nueva (o edita una existente).
  2. Añade un bloque HTML personalizado.
  3. Pega el código generado.
  4. Guarda y publica la página.
🔹 WordPress con Elementor
  1. Edita la página con Elementor.
  2. Arrastra el widget HTML.
  3. Pega el código generado.
  4. Actualiza la página.
🔹 Web sin editor (HTML puro)
  1. Abre el archivo .html de la página.
  2. Pega el código donde quieras que aparezca el formulario.
  3. Guarda y sube el archivo al servidor.
🔹 Otras plataformas (Wix, Webflow, etc.)

Busca una opción de HTML embebido, Custom code o Embed y pega el código generado.

💡 Consejo: después de guardar cambios, recarga la página para ver el formulario.