Add TicketWave to Your Webflow Site
Perfect for designers who want beautiful, branded ticket sales.
Embed Element
RecommendedThe fastest way to add TicketWave to a Webflow page. Requires a paid Webflow site plan.
In the Webflow Designer, find Embed in the Add Elements panel (or press A)
Open the Add Elements panel from the left sidebar (the "+" icon) or press A on your keyboard. Search for Embed in the elements list.
Drag the Embed element to your desired location on the page
Drag it into the section, container, or div where you want the ticket widget to appear. You can reposition it later in the Navigator panel.
Double-click it to open the Code Editor
Double-clicking the Embed element opens its code editor. This is where you paste your HTML and JavaScript.
Paste the embed code
Replace YOUR-VENUE-SLUG and YOUR-EVENT-SLUG with your actual values.
<!-- 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 Save & Close
Close the code editor. You'll see a placeholder box in the Designer — this is normal. The widget renders on the published site.
Publish your site
Click the Publish button in the top-right corner to deploy your changes. The ticket widget will be live on your published URL.
Note: Requires a paid Webflow site plan. Free Starter plans cannot add custom JavaScript.
What it looks like in the Webflow Designer
Navigator
<!-- TicketWave Ticket Widget -->
<div id="ticketwave-widget"
data-client="my-venue"
data-event="sunset-party-2026"
data-api-url="https://www.ticketwavehq.com/api">
</div>
<script src="https://www.ticketwavehq.com/widget/
ticketwave.js" async></script>Custom Code in Page Settings
For site-wide script loading. Add the script once in Page Settings, then use lightweight Embed elements for each event.
Go to Page Settings → Custom Code → Before </body> tag
In the Webflow Designer, click the gear icon on the page in the Pages panel to open Page Settings. Scroll down to Custom Code.
Paste the script tag
In the Before </body> tag field, paste the TicketWave script:
<script src="https://www.ticketwavehq.com/widget/ticketwave.js" async></script>Add the container div in an Embed element on the page
On each page where you want tickets, add an Embed element with just the container div (without the script tag):
<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: You can also use Project Settings → Custom Code to add the script globally across all pages, instead of per-page settings.
Responsive Design with Webflow Breakpoints
The TicketWave widget is fully responsive, but you should configure its parent container in Webflow to ensure proper sizing at every breakpoint.
Desktop (992px+)
Set the container to max-width: 480px and centre it with auto margins. The widget fills the container width.
Tablet (768px)
The widget adapts automatically. Consider adding padding: 0 20px to the parent container for breathing room.
Mobile (480px)
Set the container to width: 100% with side padding. The widget stacks its content vertically on small screens.
Customisation Options
Add these data attributes to the widget <div> to match your Webflow 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 after publishing
- Webflow's free Starter plan does not support custom JavaScript. You need a paid site plan (Basic, CMS, Business, or Enterprise) to use Embed elements with scripts.
- Make sure you have published your site after adding the embed — the widget will not render in the Webflow Designer preview.
- Check that your venue slug and event slug are correct — they are case-sensitive.
Widget layout issues on different breakpoints
- Use Webflow's breakpoint system (Desktop, Tablet, Mobile Landscape, Mobile Portrait) to adjust the width and padding of the Embed element's parent container.
- Set the Embed element's parent div to width: 100% and max-width: 480px for consistent rendering.
- The widget itself is responsive, but the container it sits in controls the available width.
Styling conflicts with Webflow classes
- The widget renders in a shadow DOM, so Webflow's custom CSS classes will not affect it.
- Use data-theme="dark" if your Webflow page has a dark background.
- Use data-accent-color to match your Webflow project's colour palette.
Widget loads slowly
- The widget script is under 30KB gzipped and loads asynchronously.
- If you have many Webflow interactions and animations on the page, they may compete for resources. The widget loads independently and will not block your page.
- Ensure you are not accidentally loading the script multiple times on the same page.
Frequently Asked Questions
Does this work on the free Webflow Starter plan?
No. Webflow's free Starter plan does not allow custom JavaScript in Embed elements. You need a paid site plan (Basic or higher) to add the TicketWave widget.
Can I use this with Webflow CMS Collection pages?
Yes. Add an Embed element inside your CMS Collection template. You can use CMS fields to dynamically set the data-event attribute if you store event slugs in your CMS.
Will the widget work with Webflow Interactions?
Yes. The widget loads independently of Webflow Interactions and animations. You can trigger animations on the widget's parent container as usual.
How does it look on mobile?
The TicketWave widget is fully responsive. Use Webflow's breakpoint system to ensure the parent container has appropriate padding and width at each breakpoint.
Can I add the script site-wide instead of per-page?
Yes. Use Page Settings > Custom Code > Before </body> tag to add the script tag. Then place an Embed element with just the container div on each page where you want tickets.
Ready to sell tickets from Webflow?
Create your free account, grab the embed code, and start selling in under two minutes.