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.
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>
🎓 Recap: Adding the Widget to Squarespace
This article guides you through embedding the On The Stage ticket widget on Squarespace. First, you add the initialization code snippet to your site's <head> via the Custom Code section. Then, to display the widget on specific pages, you insert a Code block where you want it to appear and paste the widget reference inside. While the preview may show placeholder gray lines, publishing the site will render the widget correctly.