ℹ️ Este artículo se actualizará a medida que publiquemos más mejoras en los próximos meses.
El widget de Calendario de bsport te permite mostrar tu horario de clases directamente en tu sitio web, para que tus clientes puedan explorar y reservar clases sin salir de tu página. Encontrarás estas opciones en Configuración > Widgets, en el paso 2 · Configuración de la pestaña Configurar, una vez que hayas seleccionado el widget de Calendario.
1. Visualización
Elige cómo se organiza el calendario. La vista previa de la derecha se actualiza a medida que cambias cada opción.
Vista semanal, modo lista — las sesiones se muestran una debajo de otra a lo largo de la semana.
Vista semanal, modo tarjeta — las sesiones aparecen como tarjetas. En la vista adaptable, puedes elegir separar las sesiones de mañana, tarde y noche. Si tienes muchos horarios libres durante la semana, te recomendamos desactivar esta opción para que las sesiones se muestren una debajo de otra en su lugar.
Visualización adaptable — el calendario se muestra en modo tarjeta por defecto y cambia a modo lista en móvil.
Sesiones del día — solo se muestran las sesiones del día actual, sin encabezados ni filtros.
2. Información destacada en el título de la clase
Información destacada en el título de la clase te permite elegir qué dato aparece primero en cada tarjeta del calendario: Servicio, Profesor u Horario.
3. Opciones de filtro
Los filtros ayudan a los clientes a encontrar las clases que se ajustan a sus preferencias. Puedes filtrar el calendario por:
Profesor — muestra las clases de profesores específicos.
Servicio — filtra por tipo de clase, por ejemplo Yoga, Pilates o HIIT.
Centros — muestra las clases de un centro específico.
Nivel — filtra por dificultad, por ejemplo Principiante, Intermedio o Todos los niveles.
Filtros del calendario en móvil
En móvil, la barra de búsqueda y los filtros se muestran en horizontal, por lo que los clientes deben desplazarse lateralmente para verlos todos. Para cambiar esto, pega uno de los siguientes fragmentos en tu editor de CSS personalizado.
Mostrar todos los filtros — distribuye los filtros en varias líneas para que se vean todos a la vez:
@media (max-width: 500px) { .bs-marketplace-filters__list { flex-wrap: wrap; justify-content: center; }}
Ocultar todos los filtros — elimina por completo los filtros en móvil:
@media (max-width: 500px) { .bs-marketplace-filters__list { display: none; }}
Pega cualquiera de los dos fragmentos en el área de CSS personalizado del widget de calendario en tu back office, en Configuración > Widgets > CSS.
Para ocultar un elemento específico en lugar de toda la barra de filtros, consulta nuestra guía sobre cómo eliminar un elemento usando CSS personalizado:
4. Publica el widget en tu sitio web
Una vez que hayas configurado tu widget, abre el paso 3 · Publicar.
Selecciona Copiar código de inserción.
Ve al editor de tu sitio web.
Añade un bloque HTML o un elemento de código y pega el código.
Para comprobar el widget antes de añadirlo a tu sitio, copia en su lugar el enlace de vista previa del mismo paso.
Importante: la configuración que estableces en el Back Office no se actualiza automáticamente en tu sitio web. Cada vez que cambias la configuración, se genera un nuevo código de inserción. Tus cambios solo aparecerán una vez que hayas pegado el nuevo código en tu sitio web.
Si tienes algún problema, consulta nuestro artículo sobre los problemas más comunes con los widgets. Para cualquier otra consulta, contacta con tu Account Manager.