Whichever bsport widget you add to your website, the same set of integration options controls how it behaves once it is there: how it opens, which language it appears in, whether it inherits your website's styles, and whether members can log in directly from it. This guide walks through each of those settings and what it changes, so you can configure them before copying your widget code.
1. Popup type
This setting controls how the widget opens for your members.
New tab — opens in a new browser tab.
Popup on my website — opens in a popup layered over your website.
New window — opens in a separate popup window rather than a tab.
No popup — opens in full view within the same space, with no popup at all.
2. Language
The widget will default to the language you select here. Choose Automatic if you would rather the widget adapt to each visitor's browser language.
3. Compatibility Mode
Compatibility Mode exists to isolate the widget from your website's styles and theme, rather than to inherit them.
Activate it when:
Your website's styles are interfering with the widget — buttons look wrong, text sizes are off, or colours do not match.
You want the widget to keep exactly its original design, with no external influence.
There is an inconsistency between the back-office preview and what you see on your live website.
Separately, Responsive Mode controls how the widget adapts to different screen sizes.
4. Member's interface
Selecting Add an EasyConnect button displays a menu that lets members log in from your website and reach their profile, bookings, basket and subscriptions.
Important: make sure Compatibility Mode is disabled. If Compatibility Mode is enabled at the same time, the EasyConnect button will not appear.
Also note: the button only works on the page where the widget is integrated. It will not appear across the rest of your website.
5. Customising your widgets
To change the appearance of your widgets, go to the Customisation tab. From there you can adjust the visual settings and see a live preview on the right.
Custom CSS
If you need more advanced styling, the Custom CSS tab lets you write your own CSS for greater control over the widget's appearance.
Important: Custom CSS requires some technical knowledge. If you are not comfortable writing CSS, we recommend that you either ask your web developer or agency for assistance, or contact our support team and we will be happy to help.
