Permite a tus pacientes agendar citas directamente desde tu sitio web
¿Que es el widget de reservas?
El widget de reservas es un modulo de agendamiento que se integra directamente en tu sitio web. Permite que tus pacientes reserven citas sin salir de tu pagina, en un flujo rapido y sencillo de 3 pasos: elegir horario, confirmar datos y listo. No necesitas conocimientos de programacion para instalarlo.
A diferencia de redirigir a tus pacientes a una pagina externa, el widget se incrusta dentro de tu propio sitio web, manteniendo la experiencia en tu marca y reduciendo la friccion para que mas pacientes completen la reserva.
Widget vs. Pagina de reservas: ¿cual es la diferencia?
| Caracteristica | 🌐 Widget (embebido) | 🔗 Pagina de reservas (link) |
|---|---|---|
| Ubicacion | Dentro de TU sitio web | Pagina hospedada por Luna |
| Experiencia | Paciente no sale de tu pagina | Paciente visita una URL separada |
| Contenido | Calendario y formulario compacto | Perfil completo, servicios, precios y mapa |
| Ideal para | Clinicas con sitio web propio | Compartir por WhatsApp o redes sociales |
| Instalacion | Copiar y pegar un codigo HTML | Copiar y compartir un link |
Puedes usar ambos al mismo tiempo
No tienes que elegir. Muchas clinicas usan el widget en su sitio web principal y comparten el link de la pagina de reservas por WhatsApp y redes sociales. Ambas opciones estan incluidas en tu plan.
Beneficios para tu clinica
Mas reservas
Al eliminar el paso de salir de tu pagina, reduces la friccion y aumentas la tasa de conversion de visitantes a pacientes.
Tu marca
El widget se integra visualmente con tu sitio web. Personaliza colores para que combine con tu identidad.
Disponible 24/7
Tus pacientes pueden agendar en cualquier momento, incluso fuera de horario de atencion. Sin llamadas, sin esperas.
Funciona en celular
Responsive y optimizado para cualquier dispositivo. Tus pacientes agendan desde su celular sin problemas.
Tres modos de visualizacion
Elige como aparece el widget en tu pagina segun tu diseno y necesidades:
En linea (inline)
El widget se muestra directamente donde coloques el codigo. Ideal para paginas dedicadas a agendar o secciones de "Reserva tu cita". El calendario aparece visible sin necesidad de hacer clic.
Flotante (float)
Un boton fijo en la esquina inferior derecha de tu pagina. Al hacer clic, se abre el widget en una ventana emergente. Visible en todas las paginas sin ocupar espacio en tu diseno.
Modal (popup)
Un boton que aparece donde coloques el codigo. Al hacer clic, se abre el widget en una ventana emergente centrada con fondo oscuro. Ideal para botones de "Agendar cita" en tu menu o hero.
¿Cual modo elegir?
En linea si tienes una pagina dedicada a citas. Flotante si quieres que el boton este disponible en todas las paginas. Modal si ya tienes un boton de "Agendar" y quieres que abra el widget al hacer clic.
Como instalar el widget en tu sitio web
Ve a Configuracion → Enlaces
Desde el menu lateral de Luna Salud, abre Configuracion y selecciona la pestana Enlaces. Busca la seccion "Widget para sitio web".
Elige el modo de visualizacion
Selecciona entre En linea, Flotante o Modal segun como quieras que aparezca en tu sitio web.
Personaliza el color del boton
Para los modos flotante y modal, elige un color que combine con tu marca. Puedes elegir uno de los 7 colores predefinidos o ingresar un codigo hexadecimal personalizado.
Copia el codigo
Haz clic en "Copiar" para copiar el codigo al portapapeles. Es una sola linea de codigo HTML.
<!-- Widget para toda la clinica -->
<script
src="https://account.lunahealth.app/widget/booking.js"
data-luna-clinic="tu-clinica"
async
></script>
Pega el codigo en tu sitio web
Pega el codigo en el HTML de tu pagina web donde quieras que aparezca el widget. Si usas WordPress, Wix, Squarespace o similar, agrega un bloque de HTML personalizado y pega el codigo ahi.
Compatible con tu plataforma
El widget funciona en cualquier sitio web que permita agregar HTML personalizado. Aqui te explicamos como hacerlo en las plataformas mas populares:
WordPress: Usa el bloque "HTML personalizado" en el editor de bloques (Gutenberg), o agrega el codigo al widget de texto en el area de widgets.
Wix: Agrega un elemento "Embed a Widget" → "HTML personalizado" y pega el codigo en el campo de codigo.
Squarespace: Agrega un bloque de "Codigo" en la pagina donde quieras el widget y pega el codigo HTML.
Webflow: Agrega un componente "Embed" en el designer y pega el codigo del widget.
¿Que ve el paciente?
El widget guia al paciente en un flujo de 3 pasos rapidos. Todo sucede dentro de tu sitio web:
Paso 1: Elige horario
El paciente selecciona el tipo de visita (presencial o telemedicina), el servicio, el profesional y un horario disponible en el calendario.
Paso 2: Confirma datos
Ingresa su nombre, apellido, telefono de WhatsApp (obligatorio), correo electronico y motivo de visita (opcionales).
Paso 3: Cita confirmada
Ve el resumen completo de su cita con fecha, hora, servicio y profesional. Recibe un aviso de que le llegara un recordatorio por WhatsApp.
Recordatorios automaticos
Despues de confirmar, el paciente recibe recordatorios automaticos por WhatsApp segun la configuracion de tu clinica. No necesitas hacer nada adicional: las notificaciones se envian igual que con cualquier otra cita.
Opciones de personalizacion
Color del boton: 7 colores predefinidos (negro, azul, indigo, verde, rojo, rosa, naranja) o un codigo hexadecimal personalizado. Disponible para los modos flotante y modal.
Texto del boton: Cambia el texto que aparece en el boton. Por defecto dice "Agendar cita" pero puedes personalizarlo (por ejemplo: "Reservar consulta", "Hacer una cita").
Idioma: Espanol (por defecto) o ingles. Se detecta automaticamente segun la configuracion de tu clinica, o puedes forzarlo con el atributo data-lang.
Clinica o profesional: Genera un widget para toda la clinica (el paciente elige al profesional) o uno exclusivo para un profesional especifico (el profesional ya esta preseleccionado).
Opciones avanzadas
Si tienes conocimientos tecnicos o un desarrollador web te ayuda, puedes personalizar el widget con estos atributos en el codigo:
| Atributo | Valores | Descripcion |
|---|---|---|
data-luna-clinic |
slug de tu clinica | Widget para toda la clinica |
data-luna-provider |
username del profesional | Widget para un profesional especifico |
data-mode |
inline, modal, float | Modo de visualizacion (por defecto: inline) |
data-button-text |
texto libre | Texto del boton (por defecto: "Agendar cita") |
data-button-color |
codigo hexadecimal | Color del boton (por ejemplo: #4F46E5) |
data-lang |
es, en | Forzar idioma del widget |
Ejemplo de un widget con todas las opciones:
<script
src="https://account.lunahealth.app/widget/booking.js"
data-luna-clinic="mi-clinica"
data-mode="float"
data-button-text="Reservar consulta"
data-button-color="#10B981"
data-lang="es"
async
></script>
Nota importante
Usa data-luna-clinic O data-luna-provider, pero no ambos al mismo tiempo. El primero muestra todos los profesionales de la clinica; el segundo preselecciona un profesional especifico.
Para desarrolladores: eventos del widget
Si tu equipo tecnico necesita reaccionar cuando un paciente completa una reserva (por ejemplo, para analytics o seguimiento), el widget emite un evento personalizado:
// Escuchar cuando un paciente completa una reserva
window.addEventListener('luna:booking-complete', (event) => {
console.log('Cita reservada:', event.detail);
// event.detail contiene: { date, service }
});
Seguridad y privacidad
La seguridad de los datos de tus pacientes es prioridad. El widget esta disenado con multiples capas de proteccion:
Iframe protegido: El widget se ejecuta dentro de un iframe con restricciones de seguridad (sandbox) que limitan lo que puede hacer en tu pagina.
Validacion de origen: Toda la comunicacion entre el widget y tu pagina se valida con verificacion de origen estricta para prevenir accesos no autorizados.
Sin almacenamiento local: Los datos del paciente se envian directamente a los servidores seguros de Luna Salud. Ningun dato se almacena en tu sitio web.
Politica de referencia estricta: El widget usa la politica strict-origin para minimizar la informacion compartida entre dominios.
Seguimiento de reservas del widget
Todas las citas reservadas a traves del widget se identifican automaticamente en tu calendario de Luna Salud para que puedas rastrear de donde vienen tus reservas.
Etiqueta "Reservado con widget": Las citas creadas por el widget muestran una etiqueta especial en los detalles de la cita, diferenciandolas de las reservas hechas por el personal o desde la pagina de reservas.
Mismo calendario: Las citas del widget aparecen en tu calendario junto con todas las demas citas, con los mismos recordatorios y notificaciones automaticas.
¿Necesitas ayuda con la instalacion?
Si tienes dudas sobre como agregar el widget a tu sitio web, nuestro equipo te puede guiar paso a paso.
💬 Contactar Soporte
