Add TicketWave to Your Squarespace Site

Sell tickets from your beautifully designed Squarespace website.

Code Block

RecommendedBusiness Plan+

The most straightforward method. Requires a Squarespace Business plan or higher for JavaScript support.

Edit the page where you want tickets

In your Squarespace dashboard, navigate to the page and click Edit. You'll enter the page editor.

Click + to add a new block

Hover between content sections and click the + icon that appears, or click an insertion point.

Select Code from the block menu

In the block picker, find and select the Code block. This opens a code editor overlay.

Make sure the display is set to Code (not Markdown)

In the Code Block settings, ensure the display mode dropdown is set to Code. Markdown mode will not execute HTML or JavaScript.

Paste the embed code

Replace YOUR-VENUE-SLUG and YOUR-EVENT-SLUG with your actual values from the TicketWave dashboard.

<!-- TicketWave Ticket Widget -->
<div id="ticketwave-widget"
     data-client="YOUR-VENUE-SLUG"
     data-event="YOUR-EVENT-SLUG"
     data-api-url="https://www.ticketwavehq.com/api"
     style="max-width: 480px; margin: 0 auto;">
</div>
<script src="https://www.ticketwavehq.com/widget/ticketwave.js" async></script>

Click outside the block to save

Click anywhere outside the Code Block to close the editor. The code is saved automatically.

Save and preview your page

Click Save in the top-left corner, then view the live page to confirm the widget is working.

Important: JavaScript-based widgets require a Squarespace Business plan or higher. Personal and Core plans only support HTML/CSS Code Blocks — the widget script will not execute on those plans.

What it looks like in the Squarespace editor

yoursite.squarespace.com/config/pages/events

Events Page

Save

Code BlockDisplay: Code

<!-- TicketWave Ticket Widget -->
<div id="ticketwave-widget"
     data-client="my-venue"
     data-event="summer-party-2026"
     data-api-url="https://www.ticketwavehq.com/api"
     style="max-width: 480px; margin: 0 auto;">
</div>
<script src="https://www.ticketwavehq.com/widget/ticketwave.js"
  async></script>

Code Injection (Site-Wide)

Business / Commerce

For adding the TicketWave script once for your entire site. Then place a container div on each page where you want tickets to appear.

Go to Settings → Advanced → Code Injection

In your Squarespace dashboard, navigate to Settings, then Advanced, then Code Injection.

In the Footer section, paste the script tag

This loads the TicketWave script on every page of your site. It only needs to be added once.

<script src="https://www.ticketwavehq.com/widget/ticketwave.js" async></script>

On each page, add a Code Block with just the container <div>

Add a Code Block to the page and paste just the container div (without the script tag, since that is already loaded site-wide):

<div id="ticketwave-widget"
     data-client="YOUR-VENUE-SLUG"
     data-event="YOUR-EVENT-SLUG"
     data-api-url="https://www.ticketwavehq.com/api"
     style="max-width: 480px; margin: 0 auto;">
</div>

Tip: This approach is ideal if you have tickets on multiple pages. The script loads once in the footer, and each page just needs the lightweight container div.

Customisation Options

Add these data attributes to the widget <div> to match it to your Squarespace site's design.

Attribute	Type	Default	Description	Example
`data-client`	string	Required	Your venue slug from the dashboard	`"my-venue"`
`data-event`	string	Required	Event slug from the event detail page	`"summer-party-2026"`
`data-api-url`	string	`https://www.ticketwavehq.com/api`	API endpoint (rarely needs changing)	`"https://www.ticketwavehq.com/api"`
`data-theme`	"light" \| "dark"	`"light"`	Widget colour scheme	`"dark"`
`data-accent-color`	hex	`"#000000"`	Primary accent colour for buttons	`"#FF6B4A"`
`data-button-text`	string	`"Buy Tickets"`	CTA button label	`"Book Now"`
`data-locale`	string	`"en"`	Language (en, es, pt, el, fr, de, it)	`"es"`
`data-show-description`	"true" \| "false"	`"true"`	Show the event description	`"false"`
`data-show-venue`	"true" \| "false"	`"true"`	Show venue information	`"false"`

Troubleshooting

Widget not appearing on my site

JavaScript-based widgets require a Squarespace Business plan or higher. Personal plans only support HTML/CSS Code Blocks without JavaScript.
Make sure the Code Block display is set to "Code" (not "Markdown").
Check that your venue slug and event slug are correct — they are case-sensitive.
Try viewing the live site (not preview mode) — some Squarespace previews do not execute third-party scripts.

Code Injection option not available

Code Injection is only available on Squarespace Business and Commerce plans.
If you are on a Personal plan, you must upgrade to access Settings > Advanced > Code Injection.
As an alternative, use a Code Block on each individual page instead.

Styling conflicts with my Squarespace template

The widget renders in a shadow DOM, so Squarespace template CSS will not affect it.
Use data-theme="dark" if your site has a dark background.
Use data-accent-color to match your Squarespace site's accent colour.

Multiple events on one page

Add separate Code Blocks for each event, each with a different data-event attribute.
Use unique IDs for each container (e.g., ticketwave-widget-1, ticketwave-widget-2).
You only need the script tag once — include it in the first Code Block or via Code Injection.

Frequently Asked Questions

Which Squarespace plan do I need?

Code Blocks with JavaScript require a Business plan or higher. The Personal plan only supports HTML/CSS Code Blocks. If you need the full widget with interactive ticket purchasing, you will need at least a Business plan. Code Injection (site-wide scripts) also requires Business or Commerce.

Does the widget work with all Squarespace templates?

Yes. The widget is self-contained and works with every Squarespace template (Brine, Bedford, Montauk, Skye, and all 7.1 templates). It adapts to the width of the Code Block container.

Can I use Code Injection instead of a Code Block?

Yes. Code Injection (Settings > Advanced > Code Injection) lets you add the script tag site-wide in the footer. Then place a Code Block with just the container div on each page where you want tickets. This avoids loading the script multiple times.

Will the widget look good on mobile?

Yes. The TicketWave widget is fully responsive and adapts to any screen size. Squarespace's responsive layout handles the container width, and the widget fills it.

Can I style the widget to match my Squarespace brand?

Yes. Use the data-accent-color attribute to set your brand colour, data-theme for light or dark mode, and data-button-text to customise the CTA label.

Explore other integrations

Wix

Embed tickets on your Wix site

Webflow

Embed in your Webflow Designer project

WordPress

Gutenberg block or shortcode

Ready to sell tickets from Squarespace?

Create your free account, grab the embed code, and start selling in under two minutes.