White-label ticketing · launch a branded box office in minutes
All integrations

Add TicketWave to Your WordPress Site

Sell tickets directly from your WordPress pages. No plugin needed — just copy and paste.

New

TicketWave WordPress Plugin

Install our official WordPress plugin for the easiest integration. Adds a Gutenberg block and[ticketwave]shortcode automatically -- no code editing needed.

Version 1.0.0WordPress 5.0+PHP 7.4+GPL-2.0 License
Download Plugin (.zip)

Upload via Plugins → Add New → Upload Plugin

1

Gutenberg Block Editor

Recommended

The default editor in WordPress 5.0 and above. This is the easiest method for most WordPress sites.

1

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.

2

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.

3

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.

4

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>
5

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

yoursite.com/wp-admin/post.php?action=edit
+

Edit Page

Events & Tickets

Custom HTMLBlock
<!-- 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>
HTMLPreview
Publish
2

Classic Editor

If you use the Classic Editor plugin or your WordPress version is older than 5.0, follow these steps.

1

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.

2

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.

3

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.

VisualText
<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>
3

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. 1. Edit your page with Elementor
  2. 2. Search the widget panel for "HTML"
  3. 3. Drag the HTML widget onto your page
  4. 4. Paste the embed code into the HTML field
  5. 5. Click Publish

Divi Builder

  1. 1. Edit your page with Divi Builder
  2. 2. Add a new module
  3. 3. Choose "Code" module
  4. 4. Paste the embed code into the code field
  5. 5. Click Save

WPBakery

  1. 1. Edit your page with WPBakery
  2. 2. Add a new element
  3. 3. Choose "Raw HTML"
  4. 4. Paste the embed code
  5. 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.

4

WordPress Shortcode Plugin

Advanced

For 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.

ticketwavehq.com/dashboard/my-venue/events/summer-party-2026
TicketWave Dashboard

SHARE & EMBED

Venue slug:my-venue
Event slug:summer-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.

AttributeTypeDefaultDescriptionExample
data-clientstringRequiredYour venue slug from the dashboard"my-venue"
data-eventstringRequiredEvent slug from the event detail page"summer-party-2026"
data-api-urlstringhttps://www.ticketwavehq.com/apiAPI endpoint (rarely needs changing)"https://www.ticketwavehq.com/api"
data-theme"light" | "dark""light"Widget colour scheme"dark"
data-accent-colorhex"#000000"Primary accent colour for buttons"#FF6B4A"
data-button-textstring"Buy Tickets"CTA button label"Book Now"
data-localestring"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.