El widget es compatible con una amplia variedad de sitios web, incluidos Wix, WordPress, ContentSquare y otros. Dada la diversidad de plataformas, puede ser necesaria una configuración específica para lograr la mejor integración. Si sigues teniendo dificultades después de leer nuestra documentación sobre el widget, te recomendamos realizar las comprobaciones que figuran a continuación.

1. El widget muestra contenido que no debería aparecer

Puedes controlar qué reservas aparecen en el widget organizándolas en categorías. Comprueba que los filtros correspondientes en la configuración de tu widget estén definidos como esperas.

Una vez que hayas modificado la configuración, copia el código recién generado y pégalo de nuevo en tu sitio.

2. El widget se ve diferente respecto a la vista previa, aparece cortado o no responde a los clics

Activa el Modo de compatibilidad. Esto aísla el widget de los estilos y el tema de tu sitio web, que suele ser la causa de estos tres problemas.

Una vez que hayas modificado la configuración, copia el código recién generado y pégalo de nuevo en tu sitio.

3. El widget de calendario no es responsive en el móvil

"El widget de calendario se muestra en vista de tarjetas en el móvil."

Selecciona la opción Visualización responsive en la configuración de visualización.
Copia el código recién generado y pégalo de nuevo en tu sitio.

4. El widget de calendario muestra la vista de lista en el escritorio

"El widget de calendario se muestra como una lista en mi escritorio en lugar de tarjetas."

Este es el comportamiento esperado, no un error. El widget de calendario es responsive: muestra una lista de clases en pantallas pequeñas y tarjetas en pantallas grandes. Pero elige la vista según el ancho del contenedor donde se encuentra el widget en tu sitio web, no el ancho de la pantalla del visitante. Por defecto, solo cambia a tarjetas cuando ese contenedor tiene más de 1280 px de ancho.

Así que incluso en una pantalla de escritorio grande, si la sección que contiene el widget tiene menos de 1280 px de ancho (por ejemplo, porque tu página tiene un ancho de contenido máximo, márgenes o una barra lateral), el widget seguirá mostrando la vista de lista.

Hay dos formas de solucionarlo:

Ampliar el contenedor. Configura la sección que contiene el widget para que tenga al menos 1280 px de ancho (por ejemplo, ancho completo). El widget cambiará entonces automáticamente a tarjetas en el escritorio.
Reducir el punto de cambio. Si quieres mantener un contenedor más estrecho, añade la opción cardModeDisplayMinWidth a tu código del widget, dentro de la configuración de "calendar", con el ancho en píxeles a partir del cual deben mostrarse las tarjetas. En este ejemplo, las tarjetas se muestran en cuanto el contenedor supera los 1000 px de ancho:

"config": {
    "calendar": {
        // ...tus opciones de calendario existentes...
        "cardModeDisplayMinWidth": 1000
    }
}

Esta opción se añade manualmente en el código. Si más adelante cambias la configuración de tu widget en el back office y pegas el código recién generado, recuerda añadirla de nuevo.

5. El idioma del widget es incorrecto, o mi propio texto no está traducido

"Mis descripciones y títulos no están traducidos": el idioma del widget solo traduce el texto predeterminado de bsport, como botones y etiquetas (por ejemplo, "Añadir al carrito"). Los títulos de las clases, las descripciones y los nombres de las actividades aparecen exactamente como los escribiste en tu back office.

"Mi sitio web tiene varios idiomas, pero el widget siempre muestra el mismo": cada código del widget tiene una única configuración de idioma, por lo que el mismo código muestra el mismo idioma en todas las versiones de tu sitio. Con "Automático", el widget sigue el idioma del navegador del visitante, no el idioma de la página. Para tener un idioma diferente por página, genera un código de widget por cada idioma y pega cada uno en la página correspondiente.

Después de cambiar la configuración, copia el nuevo código y pégalo en tu sitio.

6. El widget se ve comprimido en el móvil

Los widgets de bsport son responsive por defecto, pero necesitan una cantidad mínima de espacio para expandirse correctamente. Comprueba si el contenedor en el que insertaste el widget es lo suficientemente ancho para mostrarlo bien.

7. El widget de calendario se desborda en el móvil

"He insertado el widget de calendario, pero se desborda en el móvil."

El widget de calendario se expande hasta el ancho máximo de la página. Si el contenedor que aloja el widget tiene un ancho máximo mayor que el ancho de la pantalla del móvil, el calendario se expandirá hasta ese ancho y se desbordará.

Comprueba si el contenedor que aloja el widget de calendario tiene una regla CSS de max-width.
Añade la siguiente regla en tu área de CSS personalizado.
Guarda los cambios.

div[id*="bsport-widget"] { width: 100%; }

8. El CSS personalizado no funciona

"He aplicado reglas CSS para personalizar los widgets, pero no se están aplicando."

Comprueba si se ha añadido !important a tus reglas y, en ese caso, elimínalo. bsport ya añade !important automáticamente al CSS personalizado, por lo que añadirlo tú mismo lo duplica, lo que puede romper el estilo previsto y provocar un comportamiento inesperado.

9. Apple Pay y Google Pay no aparecen como métodos de pago

"He activado Apple Pay y Google Pay, pero no aparecen en el proceso de compra."

Ve a Configuración > Métodos de pago y asegúrate de que tanto Apple Pay como Google Pay estén seleccionados.
Añade tu dominio para activarlos en los widgets.
Guarda.

10. Cualquier otro problema

Para cualquier otro asunto no cubierto anteriormente, contáctanos en support@bsport.io.

Widget: problemas más comunes