Widgets.

Load the script#

One tag registers every element. The bundle is plain JavaScript with zero dependencies, served from this site about 5 KB, Shadow-DOM isolated so your styles and ours never collide.

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

The widgets#

Use it#

Point a widget at an organization and event by their public IDs (both are shown in the organizer portal under Customize → Public URLs). The checkout launcher hands the buyer to the same purchase pipeline the hosted event page uses name, email, pay so there is nothing else to integrate.

<script src="https://zatabox.com/v1/widgets.js" defer></script>
 
<!-- A pre-styled event card for listings and landing pages -->
<zatabox-event-card
  org-id="9f2b7c1e-…"
  event-id="5e6f7a8b-…">
</zatabox-event-card>
 
<!-- A checkout launcher  opens the hosted passwordless purchase
     flow (name + email + pay) in a centered popup -->
<zatabox-checkout
  org-id="9f2b7c1e-…"
  event-id="5e6f7a8b-…"
  label="Get tickets">
</zatabox-checkout>

Listen for events#

Widgets announce what they do with DOM events, so your analytics keep working without a callback API.

const el = document.querySelector('zatabox-checkout')
 
el.addEventListener('zatabox:opened', (e) => {
  console.log('checkout opened', e.detail.url)
})
 
document.querySelector('zatabox-event-card')
  .addEventListener('zatabox:loaded', (e) => {
    console.log('card rendered for', e.detail.eventId)
  })

Theming#

Widgets style themselves with CSS custom properties, so they inherit your brand the same way the rest of your page does. Light and dark are both supported override the variables per scheme and you're done.

<style>
  zatabox-checkout, zatabox-event-card {
    --vt-accent: #0E3B2E;
    --vt-radius: 12px;
    --vt-font: 'Inter';
  }
 
  @media (prefers-color-scheme: dark) {
    zatabox-checkout {
      --vt-accent: #B8A6FF;
    }
  }
</style>

Notes#

• ▸~5 KB total, no dependencies, no build step.
• ▸Shadow DOM isolation your CSS stays yours.
• ▸Zero Zatabox branding on your page the pixels are yours.
• ▸Framework wrappers (@zatabox/react, @zatabox/vue, @zatabox/svelte) follow with the selector widget.
• ▸Self-hosting? Pass api-base and site-origin attributes to point the widgets at your deployment.