Add TicketWave to Your Framer Site

In Framer, open your project

Open the Framer project where you want to add ticket sales.

Create a new Code Component (click + → Code)

In the Assets panel (left sidebar), click + and select Code. Framer will create a new code file for your component.

Paste this React component code

Replace the default code with the TicketWave component:

import { useEffect, useRef } from "react"

export default function TicketWave({ client, event, theme = "light" }) {
  const ref = useRef(null)

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

  return (
    <div
      ref={ref}
      id="ticketwave-widget"
      data-client={client}
      data-event={event}
      data-theme={theme}
      data-api-url="https://www.ticketwavehq.com/api"
      style={{ width: "100%", minHeight: 400 }}
    />
  )
}

Add component properties for client and event slugs

Framer auto-detects the component props and exposes them in the Properties panel. Set your venue slug and event slug there.

Drag the component onto your page

Find your new TicketWave component in the Assets panel and drag it onto the canvas. Configure the props in the right-hand Properties panel, then publish.