This article explains how to add a bsport widget (calendar, passes, memberships and more) to a page of your Squarespace website using a Code Block.
Before you start
Your Squarespace plan: Squarespace only lets you run JavaScript or an iframe inside a Code Block on the Core, Plus or Advanced plans. On other plans the widget will not display.
Your widget code: you need the code generated in your bsport back office. If you have not created it yet, follow Widget: How to integrate a bsport widget on your website and copy the code at the end.
Add the widget to your page
In the bsport back office, go to Settings > Widgets, choose your widget, set your configuration and click the copy icon to copy the code.
In Squarespace, open the page where you want the widget and click Edit.
Hover over the section where the widget should appear, click Add block (or +) and choose Code.
Click the pencil icon on the block to open the code editor.
In the Mode menu, select HTML. Make sure Display Source is switched off, otherwise the code is shown as text instead of running.
Paste the bsport widget code into the editor.
Click Save (or Apply), then save and publish your page.
Open your live website and check that the widget appears.
Each time you change your widget settings in the bsport back office, a new code is generated. Your website does not update automatically: copy the new code and replace the old one in the Code Block.
Troubleshooting
I see the code as text on my page. Open the Code Block, set the Mode to HTML and switch Display Source off.
The widget is blank while I am editing. For security reasons, Squarespace sometimes hides embedded code while you are logged in. Click Preview in Safe Mode, or open the published page in a private browser window.
The widget does not render on a specific page. Squarespace notes that code may not render on index pages, or when AJAX loading is turned on. Try a standard page, or turn AJAX loading off in your site settings.
I cannot edit my page anymore. If a Code Block prevents you from editing, disable scripts in the Squarespace preview, then edit or remove the block.
The widget looks different from the preview, is cut off, or is compressed on mobile. See Widget: most common problems (Compatibility Mode, container width and mobile display).
Still stuck? Contact us at support@bsport.io and include the link to the page where the widget should appear.
Can bsport integrate my widgets for me? Yes — if you'd prefer we handle the setup, find out what we need to get started.