Il widget è compatibile con un'ampia gamma di siti web, tra cui Wix, WordPress, ContentSquare e altri. Data la varietà di piattaforme, potrebbe essere necessaria una configurazione specifica per ottenere la migliore integrazione. Se dopo aver letto la documentazione del widget continui a riscontrare difficoltà, ti consigliamo di eseguire i controlli riportati di seguito.

1. Il widget mostra contenuti che non dovrebbero esserci

Puoi controllare quali prenotazioni appaiono nel widget organizzandole in categorie. Verifica che i filtri corrispondenti nella configurazione del widget siano impostati come previsto.

Dopo aver modificato la configurazione, copia il codice appena generato e incollalo nuovamente nel tuo sito.

2. Il widget appare diverso dall'anteprima, risulta tagliato o non risponde ai clic

Attiva la modalità di compatibilità. In questo modo il widget viene isolato dagli stili e dal tema del tuo sito web, che di solito sono la causa di questi tre problemi.

Dopo aver modificato la configurazione, copia il codice appena generato e incollalo nuovamente nel tuo sito.

3. Il widget calendario non è responsive su mobile

"Il widget calendario viene visualizzato in modalità scheda su mobile."

Seleziona l'opzione Visualizzazione responsive nelle impostazioni di visualizzazione.
Copia il codice appena generato e incollalo nuovamente nel tuo sito.

4. Il widget calendario mostra la visualizzazione a elenco su desktop

"Il widget calendario viene visualizzato come elenco sul mio desktop invece che come schede."

Si tratta del comportamento previsto, non di un errore. Il widget calendario è responsive: mostra un elenco di lezioni su schermi piccoli e schede su schermi grandi. Tuttavia, sceglie la visualizzazione in base alla larghezza del contenitore in cui si trova il widget sul tuo sito, non alla larghezza dello schermo del visitatore. Per impostazione predefinita, passa alle schede solo quando il contenitore è più largo di 1280px.

Quindi, anche su uno schermo desktop ampio, se la sezione che contiene il widget è più stretta di 1280px — ad esempio perché la tua pagina ha una larghezza massima del contenuto, dei margini o una barra laterale — il widget continuerà a mostrare la visualizzazione a elenco.

Ci sono due modi per risolvere il problema:

Allarga il contenitore. Imposta la sezione che contiene il widget a una larghezza di almeno 1280px (ad esempio, a tutta larghezza). Il widget passerà quindi automaticamente alle schede su desktop.
Abbassa il punto di passaggio. Se vuoi mantenere un contenitore più stretto, aggiungi l'opzione cardModeDisplayMinWidth al codice del tuo widget, all'interno delle impostazioni "calendar", con la larghezza in pixel a partire dalla quale devono essere mostrate le schede. In questo esempio, le schede vengono mostrate non appena il contenitore supera i 1000px di larghezza:

"config": {
    "calendar": {
        // ...le tue opzioni calendario esistenti...
        "cardModeDisplayMinWidth": 1000
    }
}

Questa opzione viene aggiunta manualmente nel codice. Se in seguito modifichi le impostazioni del widget nel back office e incolli il codice appena generato, ricordati di aggiungerla di nuovo.

5. La lingua del widget è sbagliata, oppure il mio testo non viene tradotto

"Le mie descrizioni e i miei titoli non sono tradotti": la lingua del widget traduce solo il testo predefinito di bsport, come pulsanti ed etichette (ad esempio "Aggiungi al carrello"). Titoli delle lezioni, descrizioni e nomi delle attività vengono visualizzati esattamente come li hai scritti nel tuo back office.

"Il mio sito web ha più lingue, ma il widget mostra sempre la stessa": ogni codice del widget contiene un'unica impostazione della lingua, quindi lo stesso codice mostra la stessa lingua su ogni versione del tuo sito. Con "Automatico", il widget segue la lingua del browser del visitatore, non la lingua della pagina. Per avere una lingua diversa per ogni pagina, genera un codice widget per ogni lingua e incolla ciascuno nella pagina corrispondente.

Dopo aver modificato la configurazione, copia il nuovo codice e incollalo nel tuo sito.

6. Il widget appare compresso su mobile

I widget bsport sono responsive per impostazione predefinita, ma hanno bisogno di uno spazio minimo per adattarsi correttamente. Verifica che il contenitore in cui hai inserito il widget sia abbastanza largo da visualizzarlo bene.

7. Il widget calendario va in overflow su mobile

"Ho inserito il widget calendario ma va in overflow su mobile."

Il widget calendario si estende alla larghezza massima della pagina. Se il contenitore che contiene il widget ha una larghezza massima superiore a quella dello schermo mobile, il calendario si estenderà fino a quella larghezza andando in overflow.

Verifica se il contenitore che contiene il widget calendario ha una regola CSS max-width.
Aggiungi la regola seguente nella tua area CSS personalizzato.
Salva le modifiche

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

8. Il CSS personalizzato non funziona

"Ho applicato regole CSS per personalizzare i widget, ma non vengono applicate."

Verifica se è stato aggiunto !important alle tue regole e, in caso affermativo, rimuovilo. bsport aggiunge già automaticamente !important al CSS personalizzato, quindi aggiungerlo manualmente lo duplica, il che può compromettere lo stile previsto e causare comportamenti imprevisti.

9. Apple Pay e Google Pay non appaiono come metodi di pagamento

"Ho attivato Apple Pay e Google Pay ma non appaiono nel processo di acquisto."

Vai su Impostazioni > Metodo di pagamento e assicurati che sia Apple Pay sia Google Pay siano selezionati.
Aggiungi il tuo dominio per attivarli sui widget.
Salva.

10. Qualsiasi altro problema

Per qualsiasi problema non trattato sopra, contattaci all'indirizzo support@bsport.io.

Widget: i problemi più comuni