Personaliza la integración del calendario con tu sitio web

Además de la app de Momoyoga para yoguis y el entorno administrativo en línea para estudios, tienes la posibilidad de integrar el horario de clases en tu propio sitio web. El widget de Momoyoga permite a clientes nuevos y existentes reservar clases fácilmente a través de tu web. ¡Nunca ha sido tan sencillo añadir un horario de clases a tu sitio!

En este artículo

• Cómo personalizar la integración de tu sitio web usando la configuración de Momoyoga
• Cómo personalizar la integración de tu sitio web usando CSS

Cómo personalizar la integración de tu sitio web usando la configuración de Momoyoga

Ofrecemos opciones de integración del horario como WordPress, Squarespace, Wix.com, Joomla y JavaScript. Puedes leer más sobre las opciones específicas de integración de Momoyoga aquí.

Al integrar tu horario de Momoyoga en tu sitio web, tendrás la opción de personalizar la integración para que refleje tu marca y el diseño deseado.

Para personalizar tu horario de Momoyoga en tu sitio web, sigue estos pasos:

1. Inicia sesión en Momoyoga
2. Ve a Configuración en el menú de la izquierda
3. Haz clic en la pestaña Integración sítio web
4. Selecciona tu proveedor de sitio web en el resumen
   
   
   
5. Luego podrás personalizar la apariencia para que coincida con la marca y preferencias de tu estudio, incluyendo:
   
   Formato de visualización del horario: vista semanal o vista de lista
   Lo que ven tus yoguis: profesores, hora de término de la clase, imágenes de clases o eventos
   Opción para permitir filtrar por profesor
   Colores personalizados si utilizas la función de marca personalizada de Momoyoga
   
   
6. Revisa la vista previa para asegurarte de que se vea como deseas
7. Haz clic en Ver instrucciones de configuración 
8. Ve al panel de administración de tu sitio web y sigue las instrucciones proporcionadas por Momoyoga

¡Listo! Después de seguir estos pasos, el horario de clases debería ser visible en tu sitio web y personalizado según la apariencia elegida.

Cómo personalizar la integración de tu sitio web usando CSS

Múltiples integraciones en la misma página para un sitio web con HTML personalizado

Ahora puedes colocar más de un horario en una sola página web, y cada uno puede usar configuraciones diferentes (por ejemplo, uno en vista de lista y otro en vista semanal). Para hacerlo, ve a Configuración → Integración sítio web y sigue las instrucciones. Al añadir el código a tu sitio web, puedes insertar tantos contenedores <div> como necesites, colocándolos exactamente donde quieras que aparezca cada horario en la página.

Referencia de clases CSS

• .momo-schedule-wrapper — Estilos para toda el área del horario
• .momo-schedule-item__image — Estilos para la imagen de la clase
• .momo-schedule-item__button — Estilos para el botón de la clase
• .momo-schedule-item__title — Estilos para el título de la clase
• .momo-schedule-item__location — Estilos para la ubicación de la clase
• .momo-schedule-item__description — Estilos para el texto descriptivo de la clase
• .momo-schedule-item__duration — Estilos para la duración de la clase
• .teacher-avatar — Estilos para el avatar/foto del profesor
• .momo-list-schedule — Estilos para el diseño en vista de lista
• .momo-date-pagination — Estilos para la navegación de fechas
• .momo-schedule-day-title — Estilos para el título del día
• .momo-read-more__more — Estilos para el texto “leer más”
• .momo-teacher-filter — Estilos para el filtro de profesores

Consejos para diseño responsive

El horario es responsive por defecto, lo que significa que se ajusta automáticamente según el espacio disponible. Responde al ancho del contenedor en el que se coloca. Por eso, incluso en un ordenador de escritorio, puede verse como una “vista móvil” si está dentro de una sección estrecha (por ejemplo, una columna pequeña o barra lateral).

Si quieres ocultar ciertos detalles en pantallas más grandes (o ajustar lo que se muestra según el tamaño), puedes usar una regla CSS como esta:

@container (min-width: 800px) {

  .momo-schedule-item__duration { display: none; }

}

Nota:  Ten en cuenta que, aunque el equipo de soporte de Momoyoga puede ayudarte con la configuración general, no ofrece asistencia técnica detallada para integraciones web. Si tienes problemas, lo mejor es contactar con tu desarrollador web.