A lightweight, embeddable ticket checkout widget for fewticket that works in:
npm install few-ticket-widgetbash
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',
});
``