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 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.
5. 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-widthCSS rule.Add the rule below to your Custom CSS area.
Save the changes
div[id*="bsport-widget"] { width: 100%; }
6. 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.
7. 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.
8. Any other problem
For anything not covered above, please contact us at support@bsport.io.