few-ticket-widget 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# 🎟️ Ticket Widget
|
|
2
2
|
|
|
3
|
-
A lightweight, embeddable ticket checkout widget that works in:
|
|
3
|
+
A lightweight, embeddable ticket checkout widget for fewticket that works in:
|
|
4
4
|
|
|
5
|
-
- ✅ React (JavaScript & TypeScript)
|
|
6
|
-
- ✅ Plain HTML / Vanilla JavaScript
|
|
7
|
-
- ✅ Any framework (Next.js, Vue, Angular, etc.)
|
|
8
|
-
- ✅ CDN embeds (no build tools required)
|
|
5
|
+
- ✅ React (JavaScript & TypeScript)
|
|
6
|
+
- ✅ Plain HTML / Vanilla JavaScript
|
|
7
|
+
- ✅ Any framework (Next.js, Vue, Angular, etc.)
|
|
8
|
+
- ✅ CDN embeds (no build tools required)
|
|
9
9
|
|
|
10
10
|
Perfect for event platforms, ticketing systems, and white-label integrations.
|
|
11
11
|
|
|
@@ -13,20 +13,115 @@ Perfect for event platforms, ticketing systems, and white-label integrations.
|
|
|
13
13
|
|
|
14
14
|
## ✨ Features
|
|
15
15
|
|
|
16
|
-
- Inline iframe checkout (no popups)
|
|
17
|
-
- Dynamic event slugs
|
|
18
|
-
- Light / Dark themes
|
|
19
|
-
- React component + Vanilla JS API
|
|
20
|
-
- TypeScript support with full typings
|
|
21
|
-
- CDN-ready for non-React websites
|
|
16
|
+
- Inline iframe checkout (no popups)
|
|
17
|
+
- Dynamic event slugs
|
|
18
|
+
- Light / Dark themes
|
|
19
|
+
- React component + Vanilla JS API
|
|
20
|
+
- TypeScript support with full typings
|
|
21
|
+
- CDN-ready for non-React websites
|
|
22
22
|
|
|
23
23
|
---
|
|
24
24
|
|
|
25
|
-
## 📦 Installation
|
|
25
|
+
## 📦 Installation
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
+
# Using npm
|
|
28
29
|
npm install few-ticket-widget
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
# Using yarn
|
|
32
|
+
yarn add few-ticket-widget
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## ⚛️ React Usage
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
import TicketWidget from 'ticket-widget';
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<TicketWidget
|
|
45
|
+
eventSlug="groove-&-chill-with-ayode"
|
|
46
|
+
theme="dark"
|
|
47
|
+
height={700}
|
|
48
|
+
baseUrl="https://yourdomain.com"
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Props
|
|
55
|
+
|
|
56
|
+
| Prop | Type | Required | Default | Description |
|
|
57
|
+
|-----------|----------------------|----------|---------|----------------------------|
|
|
58
|
+
| eventSlug | string | ✅ Yes | — | Unique event identifier |
|
|
59
|
+
| theme | 'light' \| 'dark' | No | light | Widget theme |
|
|
60
|
+
| width | string \| number | No | 100% | Widget width |
|
|
61
|
+
| height | number | No | 700 | Widget height |
|
|
62
|
+
| baseUrl | string | No | — | Checkout base URL |
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🌍 Plain HTML / Vanilla JavaScript Usage
|
|
67
|
+
|
|
68
|
+
### Step 1: Add container
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<div id="ticket-widget"></div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Step 2: Load widget script (CDN)
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<script src="https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js"></script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Step 3: Initialize widget
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<script>
|
|
84
|
+
TicketWidget.create({
|
|
85
|
+
id: 'ticket-widget',
|
|
86
|
+
eventSlug: 'groove-&-chill-with-ayode',
|
|
87
|
+
theme: 'dark',
|
|
88
|
+
height: 700,
|
|
89
|
+
baseUrl: 'https://yourdomain.com'
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## 🧠 TypeScript Support
|
|
97
|
+
|
|
98
|
+
This package ships with built-in TypeScript definitions.
|
|
99
|
+
|
|
100
|
+
### React (TypeScript)
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import TicketWidget from 'ticket-widget';
|
|
104
|
+
|
|
105
|
+
<TicketWidget eventSlug="my-event" theme="dark" />;
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Vanilla TypeScript
|
|
109
|
+
|
|
110
|
+
```ts
|
|
111
|
+
window.TicketWidget.create({
|
|
112
|
+
id: 'ticket',
|
|
113
|
+
eventSlug: 'my-event'
|
|
114
|
+
});
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
TypeScript users get autocomplete, type safety, and IntelliSense out of the box.
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## 🌐 CDN URLs
|
|
122
|
+
|
|
123
|
+
You may use either CDN:
|
|
124
|
+
|
|
125
|
+
- [https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js](https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js)
|
|
126
|
+
- [https://unpkg.com/ticket-widget/dist/embed-ticket-widget.js](https://unpkg.com/ticket-widget/dist/embed-ticket-widget.js)
|
|
31
127
|
|
|
32
|
-
yarn add ticket-widge
|