🎟️ Ticket Widget

A lightweight, embeddable ticket checkout widget for fewticket that works in:

- ✅ React (JavaScript & TypeScript)
- ✅ Plain HTML / Vanilla JavaScript
- ✅ Any framework (Next.js, Vue, Angular, etc.)
- ✅ CDN embeds (no build tools required)

Perfect for event platforms, ticketing systems, and white-label integrations.

---

✨ Features

- Inline iframe checkout (no popups)
- Dynamic event slugs
- Light / Dark themes
- React component + Vanilla JS API
- TypeScript support with full typings
- CDN-ready for non-React websites

---

📦 Installation

``bash

Using npm

npm install few-ticket-widget

Using yarn

yarn add few-ticket-widget
`

---

⚛️ React Usage

`jsx
import TicketWidget from 'few-ticket-widget';

function App() {
return (
eventSlug="my-event-slug"
theme="dark" //to use custom colors theme must not be include
width="100%"
height={700}
baseUrl="https://fewticket.com"
backgroundColor="red" //#fff, #000000
textColor="red" //#fff, #000000
buttonColor="green" //#fff, #000000
buttonTextColor="#fff" //red, bule
/>
);
}
`

$3

| Prop | Type | Required | Default | Description |
| --------------- | ----------------- | -------- | ------- | ------------------------------ |
| eventSlug | string | ✅ Yes | — | Unique event identifier |
| theme | 'light' \| 'dark' | No | light | Widget theme |
| width | string \| number | No | 100% | Widget width |
| height | string \| number | No | 700 | Widget height |
| baseUrl | string | No | — | Checkout base URL |
| backgroundColor | string | No | — | widget background color |
| textColor | string | No | — | widget text color |
| buttonColor | string | No | — | widget button background color |
| buttonTextColor | string | No | — | widget button text color |

---

🌍 Plain HTML / Vanilla JavaScript Usage

$3

`html

`

$3

`html

`

$3

`html

`

---

🧠 TypeScript Support

This package ships with built-in TypeScript definitions.

$3

`tsx
import TicketWidget from 'few-ticket-widget';

;
`

$3

`ts
window.TicketWidget.create({
id: 'ticket',
eventSlug: 'my-event',
});
``

TypeScript users get autocomplete, type safety, and IntelliSense out of the box.

---

🌐 CDN URLs

You may use either CDN:

- https://cdn.jsdelivr.net/npm/few-ticket-widget/dist/embed-ticket-widget.js
- https://unpkg.com/few-ticket-widget/dist/embed-ticket-widget.js