ℹ️ Changed a setting but your website hasn’t updated? Your widget’s settings are saved inside the widget code on your website. Each time you change the configuration in the Back Office, a new code is generated, and your website keeps showing the old settings until you copy the new code and paste it in place of the old one.

The widget is compatible with a wide range of websites, including Wix, WordPress, ContentSquare and others. Given the diversity of platforms, a specific configuration may be required for the best integration. If you are still having difficulties after reading our widget documentation, we recommend running through the checks below.

1. The widget displays content that should not be there

You can control which bookings appear in the widget by organising them into categories. Check that the corresponding filters in your widget configuration are set as you expect.

Once you have changed the configuration, copy the newly generated code and paste it back into your site.

2. The widget looks different from the preview, appears cut off, or does not respond to clicks

Activate Compatibility Mode. This isolates the widget from your website's styles and theme, which is usually what causes these three symptoms.

Once you have changed the configuration, copy the newly generated code and paste it back into your site.

3. The calendar widget is not responsive on mobile

"The calendar widget displays in card view on mobile."

Select the Responsive display option in the Display settings.
Copy the newly generated code and paste it back into your site.

4. The calendar widget shows the list view on desktop

"The calendar widget displays as a list on my desktop instead of cards."

This is expected behaviour, not a bug. The calendar widget is responsive: it shows a list of classes on small screens and cards on large screens. But it chooses the view based on the width of the container the widget sits in on your website, not the width of the visitor's screen. By default, it only switches to cards when that container is wider than 1280px.

So even on a large desktop screen, if the section holding the widget is narrower than 1280px — for example because your page has a maximum content width, margins or a sidebar — the widget will keep showing the list view.

There are two ways to fix it:

Make the container wider. Set the section holding the widget to at least 1280px wide (for example, full width). The widget will then switch to cards automatically on desktop.
Lower the switch point. If you want to keep a narrower container, add the cardModeDisplayMinWidth option to your widget code, inside the "calendar" settings, with the width in pixels from which cards should be shown. In this example, cards are shown as soon as the container is wider than 1000px:

"config": {
    "calendar": {
        // ...your existing calendar options...
        "cardModeDisplayMinWidth": 1000
    }
}

This option is added by hand in the code. If you later change your widget settings in the back office and paste the newly generated code, remember to add it again.

5. The widget language is wrong, or my own text is not translated

"My descriptions and titles are not translated.": The widget language only translates default bsport text, such as buttons and labels (for example "Add to cart"). Class titles, descriptions and activity names appear exactly as you wrote them in your back office.

"My website has several languages, but the widget always shows the same one.": Each widget code carries a single language setting, so the same code shows the same language on every version of your site. With "Automatic", the widget follows the visitor's browser language, not the page language. For a different language per page, generate one widget code per language and paste each on the matching page.

After changing the configuration, copy the new code and paste it into your site.

6. The widget looks compressed on mobile

bsport widgets are responsive by default, but they need a minimum amount of space to stretch properly. Check whether the container you inserted the widget into is wide enough to display it well.

7. The calendar widget overflows on mobile

"I have inserted the calendar widget but it overflows on mobile."

The calendar widget stretches to the maximum width of the page. If the container holding the widget has a maximum width greater than the mobile screen width, the calendar will stretch to that width and overflow.

Check whether the container holding the calendar widget has a max-width CSS rule.
Add the rule below to your Custom CSS area.
Save the changes

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

8. Custom CSS is not working

"I have applied CSS rules to customise the widgets but they are not being applied."

Check whether !important has been added to your rules, and remove it if so. bsport already appends !important to custom CSS automatically, so adding it yourself duplicates it, which can break the intended styling and lead to unexpected behaviour.

9. Apple Pay and Google Pay do not appear as payment methods

"I have enabled Apple Pay and Google Pay but they do not appear in the purchase flow."

Go to Settings > Payment methods and make sure Apple Pay and Google Pay are both selected.
Add your domain to enable them on widgets.
Save.

10. A pass, class or product is not showing in the widget

"I can see the product in my back office but it does not appear in the widget."

The widget preview in the back office shows what a logged-out visitor sees. If a product appears in the back office but not in the preview or on your site, work through the checks below.

Tags hide products from logged-out visitors. If you have applied a tag to a pass, class or product, it will only be visible to members who are logged in and have that tag on their account. Remove the tag or log in as a tagged member to see it.
The product is hidden or archived. In the back office, check that the product is set to Active and not hidden. Archived or inactive products are never shown in the widget.
The product has been deleted. Deleted products cannot be recovered. You will need to recreate it.
Category filters are excluding it. If your widget is configured with specific category filters, only products in those categories will appear. Go to your widget configuration and check which categories are selected, or clear the filters to show all products.
The widget code is out of date. Every time you change your widget configuration, a new code is generated. If you did not copy and paste the new code into your site, your site is still running the old configuration. Copy the latest code from the back office and paste it back into your site.

11. Any other problem

For anything not covered above, please contact us at support@bsport.io.

Widget: Most Common Problems