Skip to main contentSkip to main content
Equaticket
Events & Tickets

Modal Checkout Button

Last updated September 25, 20263 min read
In this article

Modal Checkout Button

3 min read · Events & Tickets

Modal Checkout Button

The "Buy Tickets" Button adds a button to your page. When a visitor clicks it, a popup opens over your page where they choose tickets and enter their details. Payment then opens in a new tab on Stripe's secure checkout. When the purchase completes, the popup closes by itself.

Get the code

Go to Dashboard > Events > [your event] > Embed and copy the "Buy Tickets" Button snippet. It looks like this:

Paste it into an HTML or code block on your page. The copied snippet already contains your event ID.

Your event ID

The event ID is a UUID, a long string such as 3f2b9c1e-8a4d-4c7e-9b1a-2d5e6f7a8b9c. It is in the copied snippet, and in your browser's address bar when you open the event in your dashboard (the part after /dashboard/events/).

Styling the button

Only the script tag and the data-eq-event-id attribute are required. Change the text, inline styles or CSS class freely:

Several buttons on one page

Include the script once, then add as many buttons as you like, each with its own event ID.

Opening the popup automatically

Add data-eq-autoopen="true" to an element with your event ID and the popup opens when the page loads. Most visitors find this intrusive, so use it sparingly.

What buyers experience

  • The popup uses your Primary Color and Accent Color from Dashboard > Settings > Branding.
  • Payment always opens in a new tab, on desktop and mobile. If the browser blocks that tab, the popup shows a Continue to payment button.
  • If the buyer tries to close the popup mid-checkout, they are asked to confirm.
  • The popup closes itself after 30 minutes and shows a note to check email if they paid.

Where the button does not work well

Some builders, including Wix, place custom code inside their own small box. There the popup can only open inside that box, not over your page. On those builders, link a regular button to your hosted event page or use Simple Embed instead. See Embed on Wix.

Tracking purchases

When a purchase completes, your page receives a message with type set to eq:purchase_complete. Amounts are in cents, so divide by 100. A Google Analytics 4 example:

The Track Conversions section of the Embed tab has ready-made snippets for Google Analytics 4, Meta Pixel and Google Tag Manager. If you added a Meta Pixel ID in Branding, Pixel events fire automatically; see Conversion Tracking with Meta Pixel.

The button does nothing

  1. Check the script tag is on the page (right-click, View Page Source, search for eq-widget.js).
  2. Check data-eq-event-id matches your event ID exactly.
  3. Check the event is published.
  4. Try a private window with extensions disabled, in case an ad blocker is blocking the script.
  5. If your button is added after the page loads (for example by a page builder's script), it will not be picked up. Put the button directly in the page HTML.

Still need help? Contact support.

Still need help?

If this article didn't answer your question, our support team is here.

Contact Support

Was this article helpful?

Still need help? Contact Support

Modal Checkout Button — Equaticket Organizer Help