Drop-in components

Web components for tickets, agenda, speakers and sponsors on any site.

One module script, then use the elements anywhere: static HTML, WordPress, Webflow, React, Vue. Under 12 KB gzipped, shadow DOM, keyboard and screen-reader friendly.

<script type="module" src="https://cdn.konec.to/components.js"></script>

<konecto-tickets event="acme-summit" key="pk_live_..."></konecto-tickets>
<konecto-agenda event="acme-summit"></konecto-agenda>
<konecto-speakers event="acme-summit" layout="grid"></konecto-speakers>
<konecto-sponsors event="acme-summit" tier="Gold"></konecto-sponsors>

Pin a version in production: https://cdn.konec.to/components/0.1.0/components.js (immutable, cached for a year). /components.js always points at the latest release and is cached for five minutes.

Attributes

Element	Attributes
`konecto-tickets`	`event` (slug), `key` (publishable key), `mode="redirect	popup"`,` hidden-token `(unlock hidden ticket types),` success-url `(where buyers land after paying;` {CHECKOUT_SESSION_ID}` is replaced)
`konecto-agenda`	`event`, `key`
`konecto-speakers`	`event`, `key`, `layout="grid	list"`
`konecto-sponsors`	`event`, `key`, `tier` (name), `kind="sponsors	exhibitors	all"`

The key is optional for published events; add it when your key restricts origins (recommended for live sites) or when your site is not on an allowed origin you will get a clear error in the widget.

Styling

Components read CSS custom properties from the host page:

konecto-tickets {
  --konecto-accent: #6b3bf5;
  --konecto-accent-contrast: #ffffff;
  --konecto-radius: 12px;
  --konecto-font: inherit;
  --konecto-ink: #0e0d12;
  --konecto-muted: #5f5e63;
  --konecto-rule: #e3e0d8;
  --konecto-surface: #ffffff;
}

Behaviour

konecto-tickets shows live availability and fees, quantity steppers within the per-order limit, a promo code field, and asks for name and email only when everything chosen is free. It then opens Konecto checkout in the same tab (default) or a popup (mode="popup"). Card payments run on Stripe; free registrations complete instantly.
It fires a konecto:checkout DOM event with { url } before navigating, if you want to intercept.
Components record one site.view and one widget.view interaction per page, and sponsor.click on sponsor tiles, so organisers see traffic and engagement in Analytics. No cookies.
Everything a component shows comes from the Public API; the same data is available to your own code.

Plain-text version for agents: llm.konec.to/docs/components/overview.md