Our easy-to-use, customizable ticketing widget automatically creates an embeddable purchase flow for every show that includes an embeddable calendar or list view of all events populated with live data in real time. With dynamic data, you'll be able to drive patron urgency to purchase when inventory is low.
Embedding the OTS widget in your Squarespace page lets you:
Streamline ticket bookings or event discoveryāusers can view and reserve performances directly on your site.
Enhance user experienceāvisitors stay on your brandās site while engaging with your event calendar.
Boost conversionsāin-line access typically results in higher engagement and ticket sales.
Please note: Squarespace requires a Business plan or higher to use custom code blocks and header injections, which are necessary for the On The Stage widget to function.
šWalk Through
Access the widget configuration from your dashboard.
Whitelist your Domain URL by typing in the full URL address. Then add a brief description if needed. Domain whitelist allows you to restrict which URLs your ticket widget can be displayed on. This helps you maintain security control over your widget and make sure they are showing up only on the sites you want them to be shown. You can whitelist multiple domains by repeating the same process.
ā
To add the initialization scripts into your head tag of your website page:
Open the edit tool for your Squarespace site and select Pages and scroll to the bottom of the list in the left hand navigation bar.
Click Custom Code. Click Code Injection.
Add the Code Snippet to the header. Do not remove any existing code - simply add the OTS code block on a new line.
After adding your code, hit Save.
To add the code reference to a specific spot on your website:
Add a content block wherever you wish on your website.
In the menu when you add content block - choose āCodeā
Click the pencil icon to edit the Code within this block
Paste your code reference in this modal and hit Save.
Notes:
Sometimes on Squarespace preview, the widget will appear as pulsing gray lines within a white box. Publish your site and view the live version in order to see if content is appearing.
Do not add more than one code reference to a page - the widget will not render correctly and content will not appear.
If you have issues with your header overhanging the widget, please add this into the custom code for the footer:
<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>
Squarespace Widget Display Issues at Checkout
If page content appears on top of the On The Stage widget during checkout, the widget is likely sharing a Squarespace section with other content.
Best Practice: Place the OTS embed in its own dedicated section.
Add a new 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 prevents other page elements from interfering with the checkout experience.
Already have the widget on the page? Simply move the 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 the dedicated-section approach is the most reliable and recommended solution.