few-ticket-widget

v1.0.16

Published

7 days ago

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

0High
0Medium
0Low

kingsleymortalweb

🎟️ 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

# Using npm
npm install few-ticket-widget

# Using yarn
yarn add few-ticket-widget

⚛️ React Usage

import TicketWidget from 'few-ticket-widget';

function App() {
  return (
    <TicketWidget
      eventSlug="my-event-slug"
      theme="dark"
      width="100%"
      height={700}
      baseUrl="https://fewticket.com" 
    />
  );
}

Props

| 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 |

🌍 Plain HTML / Vanilla JavaScript Usage

Step 1: Add container

<div id="ticket-widget"></div>

Step 2: Load widget script (CDN)

<body>
    <div id="ticket-widget"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/few-ticket-widget/dist/embed-ticket-widget.js"></script>

Step 3: Initialize widget

<script>
  TicketWidget.create({
    id: 'ticket-widget',
    eventSlug: 'my-event-slug',
    theme: 'dark',
    height: "700px",
    width: "50%",
    baseUrl: 'https://fewticket.com'
  });
</script>

🧠 TypeScript Support

This package ships with built-in TypeScript definitions.

React (TypeScript)

import TicketWidget from 'few-ticket-widget';

<TicketWidget eventSlug="my-event" theme="dark" />;

Vanilla TypeScript

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: