Tema
Consultorio / clínica
Plantilla para consultorios médicos, clínicas dentales, fisioterapeutas, psicólogos, nutriólogos o veterinarias. Transmite confianza y profesionalismo (colores limpios, cédulas visibles, opiniones reales) y tiene un agendador de citas con selección de horario que confirma por WhatsApp.
Vista previa
Secciones
| Sección | Detalle |
|---|---|
| Barra superior | Dirección, horario y teléfono de urgencias siempre visibles. |
| Header | Logo SVG, menú y botón "Agendar cita". |
| Hero | Mensaje empático, botones de cita y WhatsApp, garantías (precio de valoración, meses sin intereses, factura) y tarjetas flotantes con calificación y años de experiencia. |
| Tratamientos | Tarjetas con icono, descripción y precio "desde". Mostrar precios reduce llamadas de sólo-informes. |
| ¿Por qué elegirnos? | Beneficios con iconos de verificación. |
| Especialistas | Foto, especialidad y cédula profesional de cada doctor. |
| Opiniones | Testimonios con tratamiento realizado. |
| Agenda en línea | Formulario con fecha mínima hoy, horarios según el día de la semana, horarios ocupados deshabilitados y confirmación por WhatsApp. |
| Preguntas frecuentes | Acordeón nativo con details. |
| Footer | Responsable sanitario y aviso de privacidad. |
El agendador de citas
Horarios por día
Edita el objeto HORARIOS (0 = domingo). Un arreglo vacío significa cerrado:
js
const HORARIOS = {
0: [], // domingo cerrado
1: ['09:00', '10:00', '11:00', '12:00', '13:00', '16:00', '17:00', '18:00'],
// ...
6: ['09:00', '10:00', '11:00', '12:00', '13:00'], // sábado medio día
};El script también deshabilita las horas que ya pasaron si la fecha elegida es hoy.
Horarios ocupados
En la demo, la función ocupados(fecha) simula horarios no disponibles. En un sistema real, sustitúyela por una consulta a tu API:
js
async function ocupados(fecha) {
const res = await fetch(`/api/disponibilidad?fecha=${fecha}`);
const { ocupados } = await res.json(); // ["10:00", "16:00"]
return new Set(ocupados);
}Y en el change del campo de fecha usa const noDisp = await ocupados(fecha); (convierte el manejador en async). El backend completo con disponibilidad, transacciones para evitar dobles reservas y panel de administración está en Reservas con Node + MySQL.
Confirmación
Al enviar, se valida el formulario, se arma un mensaje y se abre WhatsApp con el número de la clínica:
js
const WHATSAPP = '524421234567';Personalización
css
:root {
--primario: #0e7490; /* azul petróleo: confianza, salud */
--primario-claro: #06b6d4;
--primario-suave: #ecfeff; /* fondos de iconos y hero */
--acento: #10b981; /* verde de las palomitas */
--oscuro: #0c2a33;
}Paletas sugeridas por giro:
| Giro | Primario | Acento |
|---|---|---|
| Pediatría | #7c3aed | #f59e0b |
| Psicología | #4f46e5 | #ec4899 |
| Fisioterapia | #0d9488 | #f97316 |
| Veterinaria | #16a34a | #eab308 |
| Nutrición | #65a30d | #ea580c |
Cambia los emojis de los tratamientos por los servicios del consultorio (consulta general 🩺, terapia 🧠, rehabilitación 🦵, vacunas 💉...).
Requisitos legales (México)
Los sitios de servicios de salud tienen reglas específicas. Revisa con tu cliente:
- Cédula profesional visible del médico responsable (y de especialidad si se anuncia una).
- Aviso de privacidad (LFPDPPP): los datos de salud son sensibles.
- Si se anuncian tratamientos, la publicidad puede requerir permiso de COFEPRIS. No prometas resultados ("100 % garantizado") ni uses fotos de antes/después sin asesoría.
- Nombre del responsable sanitario en el footer.
Datos sensibles
No guardes historiales médicos ni síntomas detallados en un formulario sin cifrado y sin un backend seguro (HTTPS, base de datos protegida, acceso restringido). Para una agenda simple, pide sólo lo necesario: nombre, teléfono, tratamiento y horario.
Recordatorios automáticos
Un valor extra que puedes ofrecer: enviar recordatorios 24 horas antes por correo (nodemailer) o WhatsApp Business API. Reducen las inasistencias hasta en un 30 %.