Widget.

Load the script#

A single self-contained file with zero dependencies, served from widget.zatabox.com. It registers one custom element, <zatabox-events>, which renders inline in a Shadow DOM so your styles and ours never collide and talks to the Zatabox API directly. There is no iframe and nothing else to host.

<script src="https://widget.zatabox.com/v1/widgets.js" defer></script>

Drop it in#

Point it at your organization with org-id (a public ID or slug, shown in the organizer portal under Customize → Public URLs) that is the only required attribute. Add the optional search box and location filter when you want them.

<script src="https://widget.zatabox.com/v1/widgets.js" defer></script>
 
<!-- Your organization's events as a grid. Clicking a card opens a
     full-screen event page with the in-page checkout. org-id is the
     only required attribute; search + location are optional. -->
<zatabox-events
  org-id="9f2b7c1e-…"
  search
  location>
</zatabox-events>

The widget renders a responsive grid of the organization's upcoming events. Clicking a card opens a full-screen event page brand hero, about, line-up, schedule, gallery, location map and FAQs with a sticky ticket panel that runs the same passwordless checkout as the hosted Zatabox page: pick tickets, enter a name and email, then pay by card, bank transfer or USSD (Flutterwave) or with cryptocurrency. Tickets are emailed the moment the payment confirms. It all happens on your page the buyer never leaves and never sees a Zatabox login.

Customize#

Everything is configured with plain attributes no build step, no JavaScript. Colours, radius and font also read from CSS variables (see Theming), so you can brand once and the widget inherits it.

Listen for events#

The widget announces what it does with DOM events on the element, so your analytics keep working without a callback API.

const el = document.querySelector('zatabox-events')
 
// Fires when a buyer opens an event's full-screen detail page.
el.addEventListener('zatabox:opened', (e) => {
  console.log('event opened', e.detail.eventId)
})
 
// Fires once an order is confirmed.
el.addEventListener('zatabox:purchased', (e) => {
  console.log('order', e.detail.orderNumber, 'confirmed')
})
 
// Fires if an event or order fails to load.
el.addEventListener('zatabox:error', (e) => {
  console.warn(e.detail.code, e.detail.message)
})

Theming#

Brand it with CSS custom properties so it inherits your design the same way the rest of your page does, or use the accent, radius, font and theme attributes whichever you prefer. Button text auto-contrasts against whatever accent you pick, and both light and dark are supported.

<style>
  zatabox-events {
    --vt-accent: #0E3B2E;
    --vt-radius: 12px;
    --vt-font: 'Inter';
  }
</style>
 
<!-- …or with attributes (these win over the CSS variables) -->
<zatabox-events org-id="9f2b…" theme="dark" accent="#B8A6FF"></zatabox-events>

Notes#

• ▸One self-contained file (~27 KB gzipped), no dependencies, no build step.
• ▸Shadow-DOM isolation your CSS stays yours, ours stays ours.
• ▸Zero Zatabox branding on your page the pixels are yours.
• ▸Works in plain HTML and in React, Vue and Svelte alike it's a standard custom element, so you just write <zatabox-events>.
• ▸A strict Content-Security-Policy must allow the checkout's helpers: script-src for checkout.flutterwave.com, connect-src for api.zatabox.com, and frame-src for openstreetmap.org and checkout.flutterwave.com.
• ▸On the roadmap: single-event embeds (a standalone card and a checkout button) and in-browser QR check-in.