Embed TicketWave on Any Website

A TypeScript component with proper useEffect cleanup. Loads the script once and removes container content on unmount to prevent memory leaks in SPAs.

'use client'; // Next.js App Router — remove if using Pages Router

import { useEffect, useRef } from 'react';

interface TicketWaveWidgetProps {
  client: string;
  event: string;
  theme?: 'light' | 'dark';
  accentColor?: string;
  buttonText?: string;
  locale?: string;
  showDescription?: boolean;
  showVenue?: boolean;
}

export function TicketWaveWidget({
  client,
  event,
  theme = 'light',
  accentColor,
  buttonText,
  locale = 'en',
  showDescription = true,
  showVenue = true,
}: TicketWaveWidgetProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Load the widget script once
    const existingScript = document.querySelector(
      'script[src="https://www.ticketwavehq.com/widget/ticketwave.js"]'
    );

    if (!existingScript) {
      const script = document.createElement('script');
      script.src = 'https://www.ticketwavehq.com/widget/ticketwave.js';
      script.async = true;
      document.body.appendChild(script);
    }

    // Cleanup: remove the container content on unmount
    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, []);

  return (
    <div
      ref={containerRef}
      id={`ticketwave-widget-${event}`}
      data-client={client}
      data-event={event}
      data-api-url="https://www.ticketwavehq.com/api"
      data-theme={theme}
      {...(accentColor ? { 'data-accent-color': accentColor } : {})}
      {...(buttonText ? { 'data-button-text': buttonText } : {})}
      data-locale={locale}
      data-show-description={String(showDescription)}
      data-show-venue={String(showVenue)}
      style={{ maxWidth: 480, margin: '0 auto' }}
    />
  );
}

// Usage:
// <TicketWaveWidget
//   client="my-venue"
//   event="summer-party-2026"
//   theme="dark"
//   accentColor="#FF6B4A"
//   buttonText="Get Tickets"
// />

A Vue 3 component using the Composition API and <script setup> syntax. Manages the widget script lifecycle with onMounted and onUnmounted.

<template>
  <div
    :id="'ticketwave-widget-' + event"
    :data-client="client"
    :data-event="event"
    data-api-url="https://www.ticketwavehq.com/api"
    :data-theme="theme"
    :data-accent-color="accentColor"
    :data-button-text="buttonText"
    :data-locale="locale"
    :data-show-description="showDescription"
    :data-show-venue="showVenue"
    style="max-width: 480px; margin: 0 auto;"
  />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

const props = withDefaults(defineProps<{
  client: string;
  event: string;
  theme?: 'light' | 'dark';
  accentColor?: string;
  buttonText?: string;
  locale?: string;
  showDescription?: string;
  showVenue?: string;
}>(), {
  theme: 'light',
  locale: 'en',
  showDescription: 'true',
  showVenue: 'true',
});

let script: HTMLScriptElement | null = null;

onMounted(() => {
  const existing = document.querySelector(
    'script[src="https://www.ticketwavehq.com/widget/ticketwave.js"]'
  );
  if (!existing) {
    script = document.createElement('script');
    script.src = 'https://www.ticketwavehq.com/widget/ticketwave.js';
    script.async = true;
    document.body.appendChild(script);
  }
});

onUnmounted(() => {
  // Only remove if we added it and no other instances exist
  if (script && script.parentNode) {
    script.parentNode.removeChild(script);
  }
});
</script>

<!-- Usage: -->
<!-- <TicketWaveWidget client="my-venue" event="summer-party-2026" /> -->

Programmatic initialization for when you need dynamic control — useful for loading events based on user interaction, URL parameters, or API responses.

// Programmatic initialization — useful when you need dynamic control
function loadTicketWave(containerId, config) {
  const container = document.getElementById(containerId);
  if (!container) return;

  // Set data attributes from config
  container.setAttribute('data-client', config.client);
  container.setAttribute('data-event', config.event);
  container.setAttribute('data-api-url', config.apiUrl || 'https://www.ticketwavehq.com/api');

  if (config.theme) container.setAttribute('data-theme', config.theme);
  if (config.accentColor) container.setAttribute('data-accent-color', config.accentColor);
  if (config.buttonText) container.setAttribute('data-button-text', config.buttonText);
  if (config.locale) container.setAttribute('data-locale', config.locale);

  // Load the script (idempotent — safe to call multiple times)
  if (!document.querySelector('script[src*="ticketwave.js"]')) {
    const script = document.createElement('script');
    script.src = 'https://www.ticketwavehq.com/widget/ticketwave.js';
    script.async = true;
    document.body.appendChild(script);
  }
}

// Usage:
loadTicketWave('ticket-container', {
  client: 'my-venue',
  event: 'summer-party-2026',
  theme: 'dark',
  accentColor: '#FF6B4A',
  buttonText: 'Get Tickets',
});