Cómo generar el plugin de agenda para su sitio web
La pantalla «Plugin para agendar desde tu sitio web» le permite obtener un pequeño código que, al colocarlo en su página web, muestra un calendario para que sus pacientes agenden citas directamente desde ahí. Es una forma de captar citas las 24 horas, sin que su personal tenga que intervenir.
💡 ¿Qué es un "plugin"? Es un componente que se incrusta en su sitio web. En este caso, muestra el calendario de agenda de AppDoctors dentro de su propia página, con los colores que usted elija.
ℹ️ Nota: para colocar el código en su página web normalmente necesitará a quien administre su sitio (por ejemplo, su diseñador o agencia web). Esta guía cubre cómo generar el código en AppDoctors; el pegado en la web lo realiza quien gestione su sitio.
Paso 1 — (Opcional) Personalice los colores
En la parte superior, bajo «Personalización de colores», puede ajustar la apariencia del calendario para que combine con su sitio web:
| Opción | Qué controla |
|---|---|
| Color primario | Color principal de botones y elementos destacados. |
| Color secundario | Color de apoyo para otros elementos del calendario. |
Como indica la propia pantalla: «Estos colores se aplicarán a botones, badges y elementos interactivos del widget de agenda.».
💡 Consejo: use los mismos colores de su marca para que el calendario se vea integrado y profesional. Si no cambia nada, se usarán los colores por defecto.
📷 Captura sugerida: sección «Personalización de colores» con los selectores de color primario y secundario.
Paso 2 — Elija el tipo de calendario
Hay dos tarjetas, según dónde quiera colocar el calendario:
Opción A — Clínica
La tarjeta «Clínica» genera un calendario que permite agendar con cualquier médico de la clínica.
- Está pensado para la página principal de su sitio web.
- Tiene un diseño horizontal y, como advierte la pantalla, «requiere un espacio de al menos 800 píxeles de ancho, si tu sitio es resposive cambia el atributo width por 100%».
- Para obtener el código, haga clic en «Generar».
Opción B — Médico
La tarjeta «Médico» genera un calendario para un médico en particular.
- Está pensado para la página de perfil de un médico dentro de su sitio.
- Antes de generarlo, en «Elige un médico» seleccione al profesional deseado de la lista («Seleccione un médico..»).
- El botón «Generar» de esta tarjeta permanece deshabilitado hasta que elija un médico.
- Una vez seleccionado, haga clic en «Generar».
📷 Captura sugerida: las dos tarjetas «Clínica» y «Médico» con sus botones «Generar».
Paso 3 — Copie el código generado
Después de hacer clic en «Generar», aparece un recuadro destacado con el título «Copia este código y pégalo en el código HTML de tu sitio web» y, debajo, el código correspondiente al tipo que eligió.
- Seleccione todo el código que se muestra.
- Cópielo (puede usar clic derecho y Copiar, o las teclas de copiar de su computadora).
- Entrégueselo a quien administra su sitio web para que lo pegue en la página indicada (la principal, si eligió Clínica; la del perfil del médico, si eligió Médico).
💡 El código ya incluye los colores que personalizó y, en el caso de Médico, el médico que seleccionó. Si cambia los colores o el médico, vuelva a hacer clic en «Generar» para obtener el código actualizado.
📷 Captura sugerida: recuadro «Copia este código y pégalo en el código HTML de tu sitio web» con el código visible.
Recomendaciones finales
- Después de instalar el código, pruebe el calendario desde su sitio web para confirmar que aparece bien y que permite agendar.
- Si su sitio es responsive (se adapta a celulares), recuerde la indicación de cambiar el ancho a 100% para el calendario de tipo Clínica.
- Las citas que sus pacientes agenden desde el sitio web llegarán directamente a su agenda en AppDoctors.