ℹ️ This article will be updated as we release more improvements over the coming months.
Whichever bsport widget you add to your website, the same integration options control how it behaves once it's there: how it opens, which language it appears in, whether it keeps its own styling, and whether clients can log in directly from it. You'll find these options in Settings > Widgets, in step 1 · Website of the Configure tab. Set them before you move on to 2 · Setup and 3 · Publish.
Link or widget: which one should I use?
Link or widget: which one should I use?
There are two ways to let your clients book with bsport: you can share a link to your booking page, or embed a widget on your website. Both are available in Settings > Widgets, and you can use both at the same time.
Use a link to share your bookings outside your website: in your Instagram bio, on your Facebook page, in emails and newsletters, or in messaging apps. Your clients open your bsport booking page directly and book there, so you don't need a website or any code. To get your link, go to Settings > Widgets, choose your calendar and copy the link. Instagram does not support long links, so shorten it before adding it to your bio. Step-by-step guides: Instagram bio and Facebook page.
Use a widget to display your bookings on your own website: your calendar, passes, memberships and more, shown directly on a page of your site in a design that matches it. You paste a code into your website editor. See Widget: How to integrate a bsport widget on your website.
The integration options in the rest of this article apply to widgets.
1. Popup type
Choose how the widget opens for your clients. Each option is shown as a card with a short description.
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. Widget language
The widget displays in the language you select under Widget language. Choose Use visitor browser language if you'd rather the widget adapt to each visitor. This setting only affects the widget on your website. It doesn't change your Back Office language and the Back Office language doesn't set the widget language.
3. Keep default styling
Keep default styling stops your website's styles and theme from overriding the widget's design.
Turn it on when:
Your website's styles are interfering with the widget — buttons look wrong, text sizes are off, or colours don't match.
You want the widget to keep exactly its original design, with no external influence.
There's a difference between the preview in the Back Office and what you see on your live website.
4. Client login with EasyConnect
Turn on Add EasyConnect button to display a menu that lets clients log in from your website and reach their profile, bookings, basket and memberships.
Important: make sure Keep default styling is turned off. If it's turned on, the EasyConnect button won't appear.
The button only works on the page where the widget is integrated. It won't appear across the rest of your website.
5. Customising your widgets
To change the appearance of your widgets, go to the Customize tab. You can adjust spacing, rounding, fonts, colours and backgrounds, and see a live preview on the right. Your changes are saved automatically.
Customize is available for Calendar, Workshops, Memberships, Lead acquisition, Class passes, Referral and Agent chat. Other widgets can be styled with Custom CSS.
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're not comfortable writing CSS, ask your web developer or agency, or contact our support team.
