Modal Checkout Button

What It Does

The modal checkout button lets your visitors buy tickets without leaving your page. When they click the button, a popup window (modal) opens with the full ticket selection and checkout flow. After they complete their purchase, the modal closes automatically and they're back on your page.

This is perfect for adding a "Buy Tickets" button on your homepage or event landing page.

How It Works

You need two things:

The script tag — paste once in your page <head> or before </body>
A button with an attribute — any button with data-eq-event-id="YOUR-EVENT-ID"

That's it. No additional configuration needed.

Minimal Setup Example

<script src="https://equaticket.com/eq-widget.js" async></script>

<button data-eq-event-id="evt_abc123">Buy Tickets</button>

Replace evt_abc123 with your actual event ID. You can find your event ID in your Equaticket dashboard.

Styling the Button

You can style the button however you want using CSS. Only the data-eq-event-id attribute and the script tag are required.

Styled Button Example

<script src="https://equaticket.com/eq-widget.js" async></script>

<button
  data-eq-event-id="evt_abc123"
  style="
    display: inline-block;
    padding: 12px 24px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  "
>
  Buy Tickets
</button>

Feel free to change the colors, padding, font size, and text to match your brand.

Using CSS Classes

If you prefer to style with a CSS class instead of inline styles:

<script src="https://equaticket.com/eq-widget.js" async></script>

<style>
  .buy-tickets-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<button class="buy-tickets-btn" data-eq-event-id="evt_abc123">
  Buy Tickets
</button>

Mobile Behavior

On desktop, the checkout opens in a centered modal overlay on your page.

On mobile (tablets and phones), the experience is optimized differently: Stripe payment processing opens in a new browser tab because Stripe can't run inside a modal on mobile devices. After the buyer completes payment, they're returned to your page automatically.

The ticket selection happens on your page in the modal. Stripe itself always opens in a new tab on mobile — this is a Stripe requirement, not an Equaticket limitation.

Tracking Conversions

When a buyer completes their purchase, the modal fires a eq:purchase_complete postMessage event. You can listen for this event to fire conversion tracking with Google Analytics, Meta Pixel, Google Tag Manager, or other analytics tools.

Google Analytics Example

<script src="https://equaticket.com/eq-widget.js" async></script>

<button data-eq-event-id="evt_abc123">Buy Tickets</button>

<script>
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://equaticket.com') return;

  if (e.data && e.data.event === 'eq:purchase_complete') {
    gtag('event', 'purchase', {
      value: e.data.total,
      currency: e.data.currency,
      items: [{
        item_id: e.data.eventId,
        quantity: e.data.quantity
      }]
    });
  }
});
</script>

Multiple Buttons

You can have multiple modal buttons on the same page, each with a different event ID. You only need one <script> tag for all buttons:

<script src="https://equaticket.com/eq-widget.js" async></script>

<button data-eq-event-id="evt_event1">Buy Comedy Night Tickets</button>
<button data-eq-event-id="evt_event2">Buy Workshop Tickets</button>
<button data-eq-event-id="evt_event3">Buy Festival Tickets</button>

Frequently Asked Questions

How do I find my event ID?

In your Equaticket dashboard, go to your event. The event ID appears in the URL and also in the embed code snippets. It looks like evt_ followed by a long string of letters and numbers.

The button doesn't work. What's wrong?

Check these things:

Open your browser's Developer Tools (press F12) and look at the Console tab for errors
Make sure the eq-widget.js script tag is in your page's source code (right-click → View Page Source, then search for eq-widget.js)
Make sure the data-eq-event-id attribute on the button exactly matches your event ID (no extra spaces)
Make sure your event is published in Equaticket (not in draft status)

The most common cause is an ad blocker or browser extension blocking the script. Try testing in a private/incognito window with extensions disabled.

Can I open the modal automatically when the page loads?

Yes, but it's not recommended because it can be annoying for visitors. If you want to try it, add data-eq-autoopen="true" to an element with your event ID (the element doesn't need to be a button):

<div data-eq-event-id="evt_abc123" data-eq-autoopen="true"></div>

Does the modal work if my event sells out?

Yes. When your event is sold out, the modal shows the sold-out state. If you have a waitlist enabled, it shows the waitlist signup form instead.

Can I customize the modal colors or branding?

Currently, you can only customize the button styling. The modal itself uses Equaticket's standard design. You can style the button to match your brand, which is where visitors see your branding most.

Still need help? Contact support.