Our easy-to-use, customizable ticketing widget creates an embeddable purchase flow for your shows, including calendar or list views populated with live event data.
Embedding the OTS widget on your Squarespace page lets you:
Streamline ticket bookings and event discovery by allowing patrons to view and reserve performances directly on your site.
Enhance the patron experience by keeping visitors on your organization's website.
Boost conversions by giving patrons direct access to your events and ticketing flow.
đ Walk Through
Begin by learning how to configure your widget here.
1. Add a Section for Your Widget
Open the Squarespace editor and navigate to the page where you'd like your OTS Widget to appear. Add a new, blank section to the page. We recommend giving the OTS Widget its own dedicated section to prevent other page elements from interfering with the checkout experience.
2. Add a Code Block
Within your new section:
Click Add Block.
Select Code.
Click the pencil icon to edit the Code Block.
In your OTS Admin Portal, navigate to Marketing > Widgets and copy the embed code for your widget.
Paste the embed code directly into the Squarespace Code Block.
Click Save.
đ Noteworthy: You no longer need to add anything to your Squarespace header or use Code Injection. Simply paste the widget embed code from OTS into the Code Block.
3. Preview and Publish
Save your changes and preview the page. Sometimes the Squarespace editor or preview may display the widget as pulsing gray lines inside a white box. If this happens, publish the site and check the live version to confirm the widget is displaying correctly. Once everything looks good, publish your changes. Your On The Stage widget is now embedded on your Squarespace site and ready for patrons to use. đď¸
Squarespace Widget Display Issues at Checkout
If other page content appears on top of the On The Stage widget during checkout, the widget may be sharing a Squarespace section with other content.
Best Practice: Place the OTS embed in its own dedicated section.
Add a new, blank section to the page.
Add a single Code Block.
Paste the OTS embed code into the Code Block.
Do not add any other content to that section.
Keeping the widget in its own section helps prevent other page elements from interfering with the checkout experience.
Already have the widget on the page? Move the existing Code Block into a new, empty section and remove the original block.
If moving the widget isn't possible, placing the widget as the first block in the section may help, but a dedicated section is the recommended approach.
If Your Header Overlaps the Widget
If your Squarespace header or announcement bar appears over the widget during checkout, add the following script to the footer Code Injection area:
<script> window.customOTSHookHandler = function(shouldHide = true) { try { const headerAnnouncementBar = document.querySelector('.header-announcement-bar-wrapper'); if (headerAnnouncementBar) { headerAnnouncementBar.style.display = shouldHide ? 'none' : ''; } const contentWrapper = document.querySelector('.content-wrapper'); if (contentWrapper) { contentWrapper.style.display = shouldHide ? 'none' : ''; } } catch (error) { console.error('Error updating Squarespace header styles:', error); } }; </script>This additional code is only needed if you're experiencing the header overlap issue. It is not required for the standard OTS Widget installation.