# Cómo poner un botón de reservas online en tu sitio web (widget de VitalDesk)

> Agrega un botón "Reservar Hora" a la página web de tu clínica con una sola línea de código: tus pacientes agendan sin salir de tu sitio, conectado directo a tu agenda real.

**Categoría**: Integraciones · **Lectura**: 5 min · **Actualizado**: 2026-08-25

---

Si tu clínica tiene sitio web propio (WordPress, Wix, Webflow, HTML a medida — cualquiera), puedes agregar un botón de **"Reservar Hora"** que abre tu agenda online de VitalDesk en una ventana elegante, **sin que el paciente salga de tu página**. Es una sola línea de código y no requiere conocimientos técnicos.

Requisito: tener activado el **agendamiento online** en VitalDesk (Configuración → Reserva online). El widget muestra tu agenda real: profesionales, horarios disponibles y duración de las citas se leen en vivo.

## Opción 1: botón flotante (la más simple)

Pega esta línea justo antes del cierre de </body> de tu sitio, reemplazando tu-clinica por el identificador de tu clínica en VitalDesk (el mismo de tu dirección web, por ejemplo miclinica.vitaldesk.cl → miclinica):

<script src="https://app.vitaldesk.cl/widget.js"
  data-clinic="tu-clinica"
  data-label="Reservar Hora"
  data-position="bottom-right"></script>
Esto muestra un botón flotante en la esquina inferior derecha de todas las páginas donde lo pegues. Al hacer clic, se abre la reserva en una ventana modal sobre tu sitio.

## Opción 2: botón dentro de tu página

Si prefieres ubicar el botón en un lugar específico (por ejemplo, junto a la descripción de un tratamiento), usa un div donde quieras que aparezca:

<div data-vitaldesk="tu-clinica" data-label="Agenda tu evaluación"></div>
<script src="https://app.vitaldesk.cl/widget.js"></script>
Puedes poner varios botones en la misma página (uno por tratamiento, por ejemplo), todos con textos distintos.

## Personalización

- **data-label**: el texto del botón (por defecto "Reservar Hora").

- **data-color**: el color de fondo en formato hex, por ejemplo data-color="#0ea5e9" — úsalo para calzar con tu marca.

- **data-size**: sm, md (por defecto) o lg.

- **data-position**: para el botón flotante, bottom-right (por defecto) o bottom-left.

- **data-icon**: "false" para ocultar el ícono de calendario.

## Dónde pegarlo según tu plataforma

- **WordPress:** Apariencia → Editor de temas → footer.php antes de </body>, o usa un plugin de "insert headers and footers" y pégalo en el footer.

- **Wix:** Configuración → Código personalizado → agregar código al final del body.

- **Webflow:** Project Settings → Custom Code → Footer Code.

- **HTML propio:** directamente antes de </body> en tu plantilla.

## Cómo verificar que funciona

- Abre tu sitio web y confirma que aparece el botón.

- Haz clic: debe abrirse la ventana con tu agenda de VitalDesk (profesionales y horarios reales).

- Agenda una hora de prueba y confírmala en tu agenda de VitalDesk. Puedes cancelarla después.

La reserva del paciente cae directo a tu agenda de VitalDesk con confirmación automática y recordatorios según tu configuración. ¿Aún no usas VitalDesk? [Prueba gratis 14 días](/registro) o revisa [todas las funciones](/funciones).

## Preguntas frecuentes

**¿El widget de reservas funciona en WordPress, Wix o Webflow?**

Sí, funciona en cualquier plataforma web que permita pegar código HTML/JavaScript: WordPress, Wix, Webflow, Squarespace, Shopify o un sitio HTML a medida. Es una sola línea de código en el footer.

**¿El paciente sale de mi sitio web al reservar?**

No. La agenda se abre en una ventana modal sobre tu propia página; el paciente elige profesional y horario y confirma sin abandonar tu sitio.

**¿Puedo cambiar el color y el texto del botón?**

Sí: data-label define el texto, data-color el color de tu marca (hex), data-size el tamaño y data-position la esquina donde flota. También puedes ponerlo inline en cualquier sección de tu página.

**¿Qué necesito tener configurado en VitalDesk?**

Solo el agendamiento online activo (Configuración → Reserva online) con los horarios de tus profesionales cargados. El widget lee tu disponibilidad real en vivo.

**¿El widget tiene costo adicional?**

No. Está incluido en todos los planes con agendamiento online, sin límite de reservas ni de páginas donde lo instales.



---

**Tags**: widget, reservas online, sitio web, agendamiento, integraciones

[← Volver a Tutoriales](https://vitaldesk.cl/tutoriales)