Add TicketWave to Your WordPress Site
Sell tickets directly from your WordPress pages. No plugin needed — just copy and paste.
TicketWave WordPress Plugin
Install our official WordPress plugin for the easiest integration. Adds a Gutenberg block and[ticketwave]shortcode automatically -- no code editing needed.
Upload via Plugins → Add New → Upload Plugin
Gutenberg Block Editor
RecommendedThe default editor in WordPress 5.0 and above. This is the easiest method for most WordPress sites.
Open the page where you want tickets to appear
In your WordPress admin, go to Pages and either edit an existing page or click Add New. You can also use Posts if you prefer.
Click the + button to add a new block
You will see the block inserter — it is the blue "+" icon in the top-left toolbar or between blocks in the editor.
Search for "Custom HTML" and select it
Type Custom HTML in the search bar. Click the block to add it to your page. It will appear as a text area where you can paste raw HTML code.
Paste this code
Replace YOUR-VENUE-SLUG and YOUR-EVENT-SLUGwith your actual values (see "Where to Find Your Slugs" below).
<!-- 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 "Preview" to test, then "Publish"
Use the Preview button in the block toolbar to see the widget render inside the editor. When you are happy, click Publish (or Update if editing an existing page). Your tickets are now live.
What it looks like in the Gutenberg editor
Edit Page
Events & Tickets
<!-- 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>Classic Editor
If you use the Classic Editor plugin or your WordPress version is older than 5.0, follow these steps.
Switch to the "Text" tab (not "Visual")
In the top-right corner of the editor area, you will see two tabs: Visual and Text. Click Text to switch to the raw HTML view. This is essential — the Visual tab will strip out the script tag.
Paste the embed code where you want the widget
Position your cursor in the HTML where you want the ticket widget to appear. Paste the same embed code shown in Method 1. Make sure you replace the slug placeholders with your actual values.
Switch back to "Visual" to see the placeholder
You will see a grey placeholder box where the widget will render. This is normal — the widget loads only on the live page. Click Publish or Update to go live.
<p>Welcome to our events page.</p>
<!-- 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>
<p>Contact us for group bookings.</p>Elementor, Divi & Other Page Builders
Every major WordPress page builder includes an HTML or custom code widget. The process is nearly identical across all of them.
Elementor
- 1. Edit your page with Elementor
- 2. Search the widget panel for "HTML"
- 3. Drag the HTML widget onto your page
- 4. Paste the embed code into the HTML field
- 5. Click Publish
Divi Builder
- 1. Edit your page with Divi Builder
- 2. Add a new module
- 3. Choose "Code" module
- 4. Paste the embed code into the code field
- 5. Click Save
WPBakery
- 1. Edit your page with WPBakery
- 2. Add a new element
- 3. Choose "Raw HTML"
- 4. Paste the embed code
- 5. Click Save Changes
Tip:The widget name varies by page builder — look for "HTML", "Custom HTML", "Code", or "Raw HTML". They all do the same thing: let you paste raw HTML and JavaScript.
WordPress Shortcode Plugin
AdvancedFor more control and reuse, create a simple shortcode. This lets you embed the widget on any page with a one-line shortcode instead of pasting the full HTML each time.
Step 1: Add this code to your theme's functions.php file
In your WordPress admin, go to Appearance → Theme File Editor, select functions.php from the right sidebar, and add this code at the bottom of the file:
<?php
/**
* TicketWave Embed Shortcode
* Add this to your theme's functions.php or create a custom plugin.
*
* Usage: [ticketwave client="my-venue" event="summer-party-2026"]
* Optional: [ticketwave client="my-venue" event="summer-party-2026" theme="dark" accent="#FF6B4A"]
*/
function ticketwave_shortcode( $atts ) {
$atts = shortcode_atts( array(
'client' => '',
'event' => '',
'theme' => 'light',
'accent' => '',
'button' => 'Buy Tickets',
'locale' => 'en',
), $atts, 'ticketwave' );
if ( empty( $atts['client'] ) || empty( $atts['event'] ) ) {
return '<!-- TicketWave: client and event attributes are required -->';
}
$accent_attr = ! empty( $atts['accent'] )
? ' data-accent-color="' . esc_attr( $atts['accent'] ) . '"'
: '';
return '<div id="ticketwave-widget"'
. ' data-client="' . esc_attr( $atts['client'] ) . '"'
. ' data-event="' . esc_attr( $atts['event'] ) . '"'
. ' data-api-url="https://www.ticketwavehq.com/api"'
. ' data-theme="' . esc_attr( $atts['theme'] ) . '"'
. ' data-button-text="' . esc_attr( $atts['button'] ) . '"'
. ' data-locale="' . esc_attr( $atts['locale'] ) . '"'
. $accent_attr
. ' style="max-width:480px;margin:0 auto;">'
. '</div>'
. '<script src="https://www.ticketwavehq.com/widget/ticketwave.js" async></script>';
}
add_shortcode( 'ticketwave', 'ticketwave_shortcode' );Step 2: Use the shortcode on any page or post
Basic usage — just provide your venue and event slugs:
[ticketwave client="my-venue" event="summer-party-2026"]With customisation options:
[ticketwave client="my-venue" event="summer-party-2026" theme="dark" accent="#FF6B4A" button="Book Now"]Important: If you update your WordPress theme, changes to functions.php may be lost. Consider using a child theme or a code snippets plugin like Code Snippets (free) to keep your shortcode safe across theme updates.
Where to Find Your Slugs
Your Venue Slug
Your venue slug is in your TicketWave dashboard URL. When you log in, look at the address bar:
ticketwavehq.com/dashboard/my-venue
You can also find it in Settings → Venue Details in your dashboard.
Your Event Slug
Each event has a unique slug. Find it on the event detail page under Share & Embed:
ticketwavehq.com/events/summer-party-2026
The slug is also shown in the Share & Embed section of your event, along with a ready-to-copy embed code.
SHARE & EMBED
my-venuesummer-party-2026<div id="ticketwave-widget" data-client="my-venue" data-event="summer-party-2026" ...>
Customisation Options
Add these data attributes to the widget <div> to match it to your site's design. All are optional except data-client and data-event.
| 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
- Make sure you are in the Text/HTML tab, not the Visual tab, when pasting the code in the Classic Editor.
- Check if your theme or a security plugin (like Wordfence or Sucuri) blocks external scripts. Add ticketwavehq.com to your allowlist.
- If using a caching plugin (WP Super Cache, W3 Total Cache, WP Rocket), clear your cache after adding the widget.
- Verify your venue slug and event slug are correct — they are case-sensitive.
Styling conflicts with my theme
- Add data-theme="dark" if your page has a dark background.
- The widget renders in a shadow DOM, so most theme CSS will not affect it. If you see layout issues, wrap the widget in a container div with explicit width.
- Some themes add padding/margins to all divs. Wrap the embed code in a container with a specific class to override.
Multiple events on one page
- Use a different id for each widget container (e.g., ticketwave-widget-1, ticketwave-widget-2).
- You only need the script tag once — it will initialise all widget containers on the page automatically.
- Each container needs its own data-event attribute.
Widget loads slowly
- The script loads asynchronously (async attribute) so it never blocks your page.
- The widget bundle is under 30KB gzipped. If it seems slow, the delay is likely network latency — the widget fetches event data after loading.
- Ensure your hosting provider is not throttling external script requests.
Ready to sell tickets from WordPress?
Create your free account, grab the embed code, and start selling in under two minutes.