# Drop-in components

Section: Build
Page: https://docs.konecto.ltd/components/overview

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

One script tag, then use the elements anywhere. They work with any framework or none.

``html
<script src="https://cdn.konecto.ltd/components.js" defer></script>

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

## Styling
Components read CSS custom properties from the host page:
`css
konecto-tickets {
  --konecto-accent: #6b3bf5;
  --konecto-radius: 12px;
  --konecto-font: inherit;
}
`

## Behaviour
- konecto-tickets shows live availability and opens Konecto checkout in the same tab or a modal (mode="modal"`).
- Components also record page views and sponsor clicks for Analytics.