few-ticket-widget 1.0.16 → 1.0.18

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.
Files changed (5) hide show
  1. package/README.md +35 -24
  2. package/dist/embed-ticket-widget.js +32 -7
  3. package/dist/index.d.ts +8 -0
  4. package/dist/react-ticket-widget.js +29 -3
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
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,12 +13,12 @@ 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
 
@@ -43,10 +43,14 @@ function App() {
43
43
  return (
44
44
  <TicketWidget
45
45
  eventSlug="my-event-slug"
46
- theme="dark"
46
+ theme="dark" //to use custom colors theme must not be include
47
47
  width="100%"
48
48
  height={700}
49
- baseUrl="https://fewticket.com"
49
+ baseUrl="https://fewticket.com"
50
+ backgroundColor="red" //#fff, #000000
51
+ textColor="red" //#fff, #000000
52
+ buttonColor="green" //#fff, #000000
53
+ buttonTextColor="#fff" //red, bule
50
54
  />
51
55
  );
52
56
  }
@@ -54,13 +58,17 @@ function App() {
54
58
 
55
59
  ### Props
56
60
 
57
- | Prop | Type | Required | Default | Description |
58
- |-----------|----------------------|----------|---------|----------------------------|
59
- | eventSlug | string | ✅ Yes | — | Unique event identifier |
60
- | theme | 'light' \| 'dark' | No | light | Widget theme |
61
- | width | string \| number | No | 100% | Widget width |
62
- | height | string \| number | No | 700 | Widget height |
63
- | baseUrl | string | No | — | Checkout base URL |
61
+ | Prop | Type | Required | Default | Description |
62
+ | --------------- | ----------------- | -------- | ------- | ------------------------------ |
63
+ | eventSlug | string | ✅ Yes | — | Unique event identifier |
64
+ | theme | 'light' \| 'dark' | No | light | Widget theme |
65
+ | width | string \| number | No | 100% | Widget width |
66
+ | height | string \| number | No | 700 | Widget height |
67
+ | baseUrl | string | No | — | Checkout base URL |
68
+ | backgroundColor | string | No | — | widget background color |
69
+ | textColor | string | No | — | widget text color |
70
+ | buttonColor | string | No | — | widget button background color |
71
+ | buttonTextColor | string | No | — | widget button text color |
64
72
 
65
73
  ---
66
74
 
@@ -76,7 +84,7 @@ function App() {
76
84
 
77
85
  ```html
78
86
  <body>
79
- <div id="ticket-widget"></div>
87
+ <div id="ticket-widget"></div>
80
88
  </body>
81
89
  <script src="https://cdn.jsdelivr.net/npm/few-ticket-widget/dist/embed-ticket-widget.js"></script>
82
90
  ```
@@ -91,7 +99,11 @@ function App() {
91
99
  theme: 'dark',
92
100
  height: "700px",
93
101
  width: "50%",
94
- baseUrl: 'https://fewticket.com'
102
+ baseUrl: 'https://fewticket.com',
103
+ backgroundColor="red" //#fff, #000000
104
+ textColor="red" //#fff, #000000
105
+ buttonColor="green" //#fff, #000000
106
+ buttonTextColor="#fff" //red, bule
95
107
  });
96
108
  </script>
97
109
  ```
@@ -115,7 +127,7 @@ import TicketWidget from 'few-ticket-widget';
115
127
  ```ts
116
128
  window.TicketWidget.create({
117
129
  id: 'ticket',
118
- eventSlug: 'my-event'
130
+ eventSlug: 'my-event',
119
131
  });
120
132
  ```
121
133
 
@@ -127,6 +139,5 @@ TypeScript users get autocomplete, type safety, and IntelliSense out of the box.
127
139
 
128
140
  You may use either CDN:
129
141
 
130
- - [https://cdn.jsdelivr.net/npm/few-ticket-widget/dist/embed-ticket-widget.js](https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js)
142
+ - [https://cdn.jsdelivr.net/npm/few-ticket-widget/dist/embed-ticket-widget.js](https://cdn.jsdelivr.net/npm/ticket-widget/dist/embed-ticket-widget.js)
131
143
  - [https://unpkg.com/few-ticket-widget/dist/embed-ticket-widget.js](https://unpkg.com/ticket-widget/dist/embed-ticket-widget.js)
132
-
package/dist/embed-ticket-widget.js CHANGED
@@ -11,15 +11,40 @@
11
11
  theme = 'light',
12
12
  height = "700px",
13
13
  width= "100%",
14
- baseUrl = 'https://fewticket.com'
14
+ baseUrl = 'https://fewticket.com',
15
+ backgroundColor="",
16
+ textColor="",
17
+ buttonColor="",
18
+ buttonTextColor=""
15
19
  } = options;
16
20
 
17
- const iframeURL =
18
- baseUrl +
19
- '/checkout/' +
20
- encodeURIComponent(eventSlug) +
21
- '?theme=' +
22
- encodeURIComponent(theme);
21
+
22
+ // const iframeURL =
23
+ // baseUrl +
24
+ // '/checkout/' +
25
+ // encodeURIComponent(eventSlug) +
26
+ // '?theme=' +
27
+ // encodeURIComponent(theme);
28
+
29
+ const params = new URLSearchParams({
30
+ theme,
31
+ });
32
+
33
+ if (backgroundColor) {
34
+ params.set('backgroundColor', backgroundColor?.replace('#', ''));
35
+ }
36
+ if (textColor) {
37
+ params.set('textColor', textColor?.replace('#', ''));
38
+ }
39
+
40
+ if (buttonColor) {
41
+ params.set('buttonColor', buttonColor?.replace('#', ''));
42
+ }
43
+ if (buttonTextColor) {
44
+ params.set('buttonTextColor', buttonTextColor?.replace('#', ''));
45
+ }
46
+
47
+ const iframeURL = `${baseUrl}/checkout/${encodeURIComponent(eventSlug)}?${params.toString()}`;
23
48
 
24
49
  const iframe = document.createElement('iframe');
25
50
  iframe.src = iframeURL;
package/dist/index.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface TicketWidgetProps {
9
9
  width?: string | number;
10
10
  height?: string | number;
11
11
  baseUrl?: string;
12
+ backgroundColor?:string;
13
+ textColor?:string;
14
+ buttonColor?:string;
15
+ buttonTextColor?:string;
12
16
  }
13
17
 
14
18
  declare const TicketWidget: React.FC<TicketWidgetProps>;
@@ -24,6 +28,10 @@ export interface TicketWidgetEmbedOptions {
24
28
  width?: string;
25
29
  height?: string;
26
30
  baseUrl?: string;
31
+ backgroundColor?:string;
32
+ textColor?:string;
33
+ buttonColor?:string;
34
+ buttonTextColor?:string;
27
35
  }
28
36
 
29
37
  export interface TicketWidgetGlobal {
package/dist/react-ticket-widget.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
+ // import React from 'react';
4
+
3
5
  var TicketWidget = function TicketWidget(_ref) {
4
6
  var eventSlug = _ref.eventSlug,
5
7
  _ref$theme = _ref.theme,
@@ -8,8 +10,31 @@ var TicketWidget = function TicketWidget(_ref) {
8
10
  width = _ref$width === void 0 ? '100%' : _ref$width,
9
11
  _ref$height = _ref.height,
10
12
  height = _ref$height === void 0 ? 700 : _ref$height,
11
- baseUrl = _ref.baseUrl;
12
- var iframeURL = "".concat(baseUrl, "/checkout/").concat(encodeURIComponent(eventSlug), "?theme=").concat(encodeURIComponent(theme));
13
+ baseUrl = _ref.baseUrl,
14
+ _ref$backgroundColor = _ref.backgroundColor,
15
+ backgroundColor = _ref$backgroundColor === void 0 ? '' : _ref$backgroundColor,
16
+ _ref$textColor = _ref.textColor,
17
+ textColor = _ref$textColor === void 0 ? '' : _ref$textColor,
18
+ _ref$buttonColor = _ref.buttonColor,
19
+ buttonColor = _ref$buttonColor === void 0 ? '' : _ref$buttonColor,
20
+ _ref$buttonTextColor = _ref.buttonTextColor,
21
+ buttonTextColor = _ref$buttonTextColor === void 0 ? '' : _ref$buttonTextColor;
22
+ var params = new URLSearchParams({
23
+ theme: theme
24
+ });
25
+ if (backgroundColor) {
26
+ params.set('backgroundColor', backgroundColor.replace('#', ''));
27
+ }
28
+ if (textColor) {
29
+ params.set('textColor', textColor.replace('#', ''));
30
+ }
31
+ if (buttonColor) {
32
+ params.set('buttonColor', buttonColor.replace('#', ''));
33
+ }
34
+ if (buttonTextColor) {
35
+ params.set('buttonTextColor', buttonTextColor.replace('#', ''));
36
+ }
37
+ var iframeURL = "".concat(baseUrl, "/checkout/").concat(encodeURIComponent(eventSlug), "?").concat(params.toString());
13
38
  return /*#__PURE__*/React.createElement("div", {
14
39
  style: {
15
40
  width: width,
@@ -20,7 +45,8 @@ var TicketWidget = function TicketWidget(_ref) {
20
45
  width: "100%",
21
46
  height: "100%",
22
47
  frameBorder: "0",
23
- allowFullScreen: true
48
+ allowFullScreen: true,
49
+ title: "Ticket Checkout"
24
50
  }));
25
51
  };
26
52
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "few-ticket-widget",
3
- "version": "1.0.16",
3
+ "version": "1.0.18",
4
4
  "main": "dist/react-ticket-widget.js",
5
5
  "files": [
6
6
  "dist"