@moneybar.online/moneybar 3.1.0
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 +445 -0
- package/dist/index.browser.js +3054 -0
- package/dist/index.browser.js.map +1 -0
- package/dist/index.bundle.js +2 -0
- package/dist/index.bundle.js.map +1 -0
- package/dist/index.cjs.js +3058 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +166 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +3054 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +3065 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +2 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/types.d.ts +141 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/example-template.html +69 -0
- package/moneybar-config-template.js +109 -0
- package/package.json +74 -0
- package/src/index.ts +3273 -0
- package/src/types.ts +173 -0
package/README.md
ADDED
|
@@ -0,0 +1,445 @@
|
|
|
1
|
+
# MoneyBar - Complete Integration Guide
|
|
2
|
+
## The NavBar of Monetization
|
|
3
|
+
|
|
4
|
+
> **Every product has a navbar for navigation. Every product needs a moneybar for monetization.**
|
|
5
|
+
|
|
6
|
+
MoneyBar fixes the 3 critical money-blocking stages that prevent revenue from reaching your bank account, even when your product is good enough. Add usage limiting and premium upgrades to any web app in **3 simple steps**.
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/@moneybar.online/moneybar)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 🚀 Installation & Usage
|
|
14
|
+
|
|
15
|
+
### Option 1: NPM Install (For projects with bundlers)
|
|
16
|
+
```bash
|
|
17
|
+
npm install @moneybar.online/moneybar
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```javascript
|
|
21
|
+
import { MoneyBar } from '@moneybar.online/moneybar';
|
|
22
|
+
|
|
23
|
+
const moneyBar = new MoneyBar({
|
|
24
|
+
appId: 'my-pdf-app',
|
|
25
|
+
freeDownloadLimit: 3,
|
|
26
|
+
supabase: {
|
|
27
|
+
url: 'your-supabase-url',
|
|
28
|
+
anonKey: 'your-anon-key'
|
|
29
|
+
},
|
|
30
|
+
payment: {
|
|
31
|
+
productId: 'your-product-id'
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
moneyBar.attachToButton('#download-btn', (userContext) => {
|
|
36
|
+
if (userContext.isPremium) {
|
|
37
|
+
generatePremiumPDF();
|
|
38
|
+
} else {
|
|
39
|
+
generateBasicPDF();
|
|
40
|
+
console.log(`${userContext.remaining} downloads remaining`);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Option 2: CDN with Import Map (Recommended for HTML projects)
|
|
46
|
+
```html
|
|
47
|
+
<!DOCTYPE html>
|
|
48
|
+
<html>
|
|
49
|
+
<body>
|
|
50
|
+
<button id="action-btn">Try Action</button>
|
|
51
|
+
|
|
52
|
+
<!-- Import map for dependencies -->
|
|
53
|
+
<script type="importmap">
|
|
54
|
+
{
|
|
55
|
+
"imports": {
|
|
56
|
+
"@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<!-- MoneyBar configuration -->
|
|
62
|
+
<script type="module">
|
|
63
|
+
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
|
|
64
|
+
|
|
65
|
+
const moneyBar = new MoneyBar({
|
|
66
|
+
appId: 'my-app',
|
|
67
|
+
freeDownloadLimit: 3,
|
|
68
|
+
supabase: {
|
|
69
|
+
url: 'your-supabase-url',
|
|
70
|
+
anonKey: 'your-anon-key'
|
|
71
|
+
},
|
|
72
|
+
payment: {
|
|
73
|
+
productId: 'your-product-id'
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
78
|
+
if (userContext.isPremium) {
|
|
79
|
+
alert('Premium features unlocked!');
|
|
80
|
+
} else {
|
|
81
|
+
alert(`Free trial: ${userContext.remaining} uses left`);
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Option 3: Self-Contained Bundle (No import map needed)
|
|
90
|
+
```html
|
|
91
|
+
<!DOCTYPE html>
|
|
92
|
+
<html>
|
|
93
|
+
<body>
|
|
94
|
+
<button id="action-btn">Try Action</button>
|
|
95
|
+
|
|
96
|
+
<!-- Single file - no dependencies needed -->
|
|
97
|
+
<script type="module">
|
|
98
|
+
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
|
|
99
|
+
|
|
100
|
+
const moneyBar = new MoneyBar({
|
|
101
|
+
appId: 'my-app',
|
|
102
|
+
freeDownloadLimit: 3,
|
|
103
|
+
// ... configuration
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
107
|
+
// Your logic here
|
|
108
|
+
});
|
|
109
|
+
</script>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Option 4: UMD Script Tags (No modules)
|
|
115
|
+
```html
|
|
116
|
+
<!DOCTYPE html>
|
|
117
|
+
<html>
|
|
118
|
+
<body>
|
|
119
|
+
<button id="action-btn">Try Action</button>
|
|
120
|
+
|
|
121
|
+
<!-- Traditional script tags -->
|
|
122
|
+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
|
|
123
|
+
<script src="https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.umd.js"></script>
|
|
124
|
+
<script>
|
|
125
|
+
const moneyBar = new MoneyBar.MoneyBar({
|
|
126
|
+
appId: 'my-app',
|
|
127
|
+
// ... configuration
|
|
128
|
+
});
|
|
129
|
+
</script>
|
|
130
|
+
</body>
|
|
131
|
+
</html>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Quick Start Template
|
|
135
|
+
Copy `moneybar-config-template.js` and `example-template.html` from this package for a ready-to-use template.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 📱 Live Examples - Problem-Focused Demos
|
|
140
|
+
|
|
141
|
+
### Example #1: [`examples/value-first-demo.html`](examples/value-first-demo.html) + [`examples/value-first.config.js`](examples/value-first.config.js)
|
|
142
|
+
**Problem #1: "Forced Sign-In Before Value"**
|
|
143
|
+
- ❌ **What Kills Revenue:** Users bounce before seeing your product works
|
|
144
|
+
- ✅ **MoneyBar Solution:** Value-first trials with 3 free attempts
|
|
145
|
+
- 💰 **Revenue Impact:** 40-60% more trial conversions
|
|
146
|
+
- 🎨 **Theme:** Emerald (trustworthy, fresh)
|
|
147
|
+
|
|
148
|
+
### Example #2: [`examples/feedback-intelligence.html`](examples/feedback-intelligence.html) + [`examples/feedback-intelligence.config.js`](examples/feedback-intelligence.config.js)
|
|
149
|
+
**Problem #2: "Silent Drop-Off"**
|
|
150
|
+
- ❌ **What Kills Revenue:** Users try but don't buy - you don't know why
|
|
151
|
+
- ✅ **MoneyBar Solution:** Exit feedback capture at cancel moment
|
|
152
|
+
- 💰 **Revenue Impact:** 20-30% better conversion through insights
|
|
153
|
+
- 🎨 **Theme:** Corporate (professional B2B)
|
|
154
|
+
|
|
155
|
+
### Example #3: [`examples/instant-payment-flow.html`](examples/instant-payment-flow.html) + [`examples/instant-payment.config.js`](examples/instant-payment.config.js)
|
|
156
|
+
**Problem #3: "Broken Money Flow" + ⭐ Complete User Context Showcase**
|
|
157
|
+
- ❌ **What Kills Revenue:** Complex payments and broken sessions
|
|
158
|
+
- ✅ **MoneyBar Solution:** Seamless Google Auth + instant payment + full user personalization
|
|
159
|
+
- 💰 **Revenue Impact:** 25-40% higher payment completion
|
|
160
|
+
- 🎨 **Theme:** Dark (modern, premium)
|
|
161
|
+
- **⭐ Features ALL user context properties with live demo**
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## 🚨 The 3 Money-Blocking Stages for Indie Hackers
|
|
166
|
+
|
|
167
|
+
### Problem #1: "Forced Sign-In Before Value"
|
|
168
|
+
**❌ What Kills Revenue:** Users bounce before seeing your product works
|
|
169
|
+
- No evidence = no trust = no money
|
|
170
|
+
- Users don't want to create "yet another account"
|
|
171
|
+
- They leave before seeing what they would have paid for
|
|
172
|
+
|
|
173
|
+
**✅ MoneyBar Solution:** Value-first trials with limited attempts
|
|
174
|
+
- Give 2-3 free attempts - no sign-in required
|
|
175
|
+
- Users experience value immediately
|
|
176
|
+
- Only ask for payment when they're convinced
|
|
177
|
+
|
|
178
|
+
**📄 Example:** [`value-first-demo.html`](examples/value-first-demo.html)
|
|
179
|
+
**💰 Revenue Impact:** 40-60% more trial conversions
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
183
|
+
### Problem #2: "Silent Drop-Off"
|
|
184
|
+
**❌ What Kills Revenue:** Users try your tool but don't buy - you don't know why
|
|
185
|
+
- User experiences tool → it works → but still doesn't pay
|
|
186
|
+
- You have no data on why they left
|
|
187
|
+
- You keep guessing instead of learning
|
|
188
|
+
|
|
189
|
+
**✅ MoneyBar Solution:** Exit feedback capture at cancel moment
|
|
190
|
+
- 1-click micro survey when users cancel upgrade
|
|
191
|
+
- Ask "What stopped you from buying?" with preset options
|
|
192
|
+
- Convert failure into product intelligence
|
|
193
|
+
|
|
194
|
+
**📄 Example:** [`feedback-intelligence.html`](examples/feedback-intelligence.html)
|
|
195
|
+
**💰 Revenue Impact:** 20-30% better conversion through insights
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### Problem #3: "Broken Money Flow"
|
|
200
|
+
**❌ What Kills Revenue:** Complex payments and broken sessions
|
|
201
|
+
- Payment flow is too long (every extra click = revenue death)
|
|
202
|
+
- No Google/Apple Pay integration
|
|
203
|
+
- After paying, user doesn't return cleanly to the tool
|
|
204
|
+
|
|
205
|
+
**✅ MoneyBar Solution:** Seamless Google Auth + instant payment
|
|
206
|
+
- One-click Google sign-in
|
|
207
|
+
- Instant payment integration
|
|
208
|
+
- User returns directly to unlocked tool
|
|
209
|
+
|
|
210
|
+
**📄 Example:** [`instant-payment-flow.html`](examples/instant-payment-flow.html)
|
|
211
|
+
**💰 Revenue Impact:** 25-40% higher payment completion
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## 🎯 Advanced Features
|
|
216
|
+
|
|
217
|
+
### User Context for Personalization
|
|
218
|
+
Access complete user information in your functions:
|
|
219
|
+
|
|
220
|
+
```javascript
|
|
221
|
+
function myAction(userContext) {
|
|
222
|
+
console.log({
|
|
223
|
+
isPremium: userContext.isPremium, // Boolean
|
|
224
|
+
email: userContext.email, // String
|
|
225
|
+
name: userContext.name, // String
|
|
226
|
+
currentCount: userContext.currentCount, // Number
|
|
227
|
+
remaining: userContext.remaining, // Number
|
|
228
|
+
isAuthenticated: userContext.isAuthenticated
|
|
229
|
+
});
|
|
230
|
+
|
|
231
|
+
// Dynamic features based on user status
|
|
232
|
+
if (userContext.isPremium) {
|
|
233
|
+
removeWatermark();
|
|
234
|
+
} else {
|
|
235
|
+
addWatermark();
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Multiple Buttons
|
|
241
|
+
```javascript
|
|
242
|
+
moneyBar.attachToButtons({
|
|
243
|
+
buttons: [
|
|
244
|
+
{
|
|
245
|
+
selector: '#free-btn',
|
|
246
|
+
downloadCallback: (ctx) => downloadFreeTemplate(ctx)
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
selector: '#premium-btn',
|
|
250
|
+
downloadCallback: (ctx) => downloadPremiumTemplate(ctx),
|
|
251
|
+
isPremium: true
|
|
252
|
+
}
|
|
253
|
+
]
|
|
254
|
+
});
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
### Feedback Collection Configuration
|
|
258
|
+
```javascript
|
|
259
|
+
const moneyBar = new MoneyBar({
|
|
260
|
+
// ... other config
|
|
261
|
+
feedback: {
|
|
262
|
+
form: {
|
|
263
|
+
title: 'Quick Feedback',
|
|
264
|
+
description: 'What stopped you from upgrading?',
|
|
265
|
+
option1: 'Too expensive',
|
|
266
|
+
option2: 'Need more features',
|
|
267
|
+
option3: 'Just testing'
|
|
268
|
+
},
|
|
269
|
+
email: {
|
|
270
|
+
resendApiKey: 'your-resend-key',
|
|
271
|
+
fromEmail: 'feedback@yourapp.com'
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## 🎨 UI Themes & Customization
|
|
280
|
+
|
|
281
|
+
MoneyBar includes 29 beautiful DaisyUI themes:
|
|
282
|
+
|
|
283
|
+
```javascript
|
|
284
|
+
const moneyBar = new MoneyBar({
|
|
285
|
+
// ... other config
|
|
286
|
+
theme: {
|
|
287
|
+
name: 'dark', // or 'cupcake', 'emerald', 'corporate', etc.
|
|
288
|
+
primaryColor: '#059669'
|
|
289
|
+
},
|
|
290
|
+
titleBar: {
|
|
291
|
+
title: 'My App',
|
|
292
|
+
links: [
|
|
293
|
+
{ text: 'Home', url: '/', target: '_self' },
|
|
294
|
+
{ text: 'About', url: '/about', target: '_self' }
|
|
295
|
+
]
|
|
296
|
+
}
|
|
297
|
+
});
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
---
|
|
301
|
+
|
|
302
|
+
## 📊 Complete Configuration Reference
|
|
303
|
+
|
|
304
|
+
### Core Configuration (Required)
|
|
305
|
+
```javascript
|
|
306
|
+
const moneyBar = new MoneyBar({
|
|
307
|
+
// Core required config
|
|
308
|
+
appId: 'my-app', // Unique identifier for your app
|
|
309
|
+
freeDownloadLimit: 3, // Free attempts before paywall
|
|
310
|
+
|
|
311
|
+
// Supabase configuration (required)
|
|
312
|
+
supabase: {
|
|
313
|
+
url: 'https://xyz.supabase.co', // Your Supabase project URL
|
|
314
|
+
anonKey: 'your-anon-key' // Public anon key from Supabase
|
|
315
|
+
},
|
|
316
|
+
|
|
317
|
+
// Payment configuration (required)
|
|
318
|
+
payment: {
|
|
319
|
+
productId: 'prod_xyz', // DodoPayments product ID
|
|
320
|
+
mode: 'test' // 'test' or 'live'
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
### 🎨 Available Themes (29 Options)
|
|
326
|
+
|
|
327
|
+
**Light Themes:**
|
|
328
|
+
- `light` - Clean white theme
|
|
329
|
+
- `cupcake` - Soft pink theme
|
|
330
|
+
- `bumblebee` - Warm yellow theme
|
|
331
|
+
- `emerald` - Fresh green theme
|
|
332
|
+
- `corporate` - Professional blue
|
|
333
|
+
- `garden` - Nature green
|
|
334
|
+
- `lofi` - Minimalist gray
|
|
335
|
+
- `pastel` - Soft purple theme
|
|
336
|
+
- `fantasy` - Magical pink theme
|
|
337
|
+
- `wireframe` - Minimal outline style
|
|
338
|
+
- `cmyk` - Print-inspired colors
|
|
339
|
+
- `autumn` - Warm orange theme
|
|
340
|
+
- `business` - Clean corporate
|
|
341
|
+
- `acid` - Bright lime theme
|
|
342
|
+
- `lemonade` - Citrus yellow
|
|
343
|
+
- `winter` - Cool blue theme
|
|
344
|
+
|
|
345
|
+
**Dark Themes:**
|
|
346
|
+
- `dark` - Classic dark mode
|
|
347
|
+
- `synthwave` - Retro 80s neon
|
|
348
|
+
- `retro` - Vintage brown theme
|
|
349
|
+
- `cyberpunk` - Futuristic neon
|
|
350
|
+
- `valentine` - Deep pink theme
|
|
351
|
+
- `halloween` - Orange & purple
|
|
352
|
+
- `forest` - Deep forest green
|
|
353
|
+
- `aqua` - Ocean blue theme
|
|
354
|
+
- `luxury` - Gold & purple
|
|
355
|
+
- `dracula` - Purple vampire theme
|
|
356
|
+
- `night` - Deep blue dark
|
|
357
|
+
- `coffee` - Rich brown theme
|
|
358
|
+
- `black` - Pure dark theme
|
|
359
|
+
|
|
360
|
+
### 👤 User Context Properties
|
|
361
|
+
|
|
362
|
+
All user information available in your functions:
|
|
363
|
+
|
|
364
|
+
```javascript
|
|
365
|
+
function myAction(userContext) {
|
|
366
|
+
// Available properties:
|
|
367
|
+
userContext.isPremium // Boolean: Premium vs Free user
|
|
368
|
+
userContext.isAuthenticated // Boolean: Signed in status
|
|
369
|
+
userContext.email // String: User's email (if signed in)
|
|
370
|
+
userContext.name // String: User's display name (if available)
|
|
371
|
+
userContext.currentCount // Number: Actions taken so far
|
|
372
|
+
userContext.remaining // Number: Free actions remaining
|
|
373
|
+
userContext.limit // Number: Maximum free actions allowed
|
|
374
|
+
userContext.user // Object: Full Supabase user object
|
|
375
|
+
}
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
---
|
|
379
|
+
|
|
380
|
+
## 🔧 Backend Setup
|
|
381
|
+
|
|
382
|
+
### Supabase Setup
|
|
383
|
+
1. Create a Supabase project
|
|
384
|
+
2. Enable Google OAuth
|
|
385
|
+
3. Set up edge functions for payment verification
|
|
386
|
+
|
|
387
|
+
### Payment Integration
|
|
388
|
+
MoneyBar supports DodoPayments for seamless checkout:
|
|
389
|
+
|
|
390
|
+
```javascript
|
|
391
|
+
payment: {
|
|
392
|
+
productId: 'your-dodo-product-id',
|
|
393
|
+
mode: 'test' // or 'live'
|
|
394
|
+
}
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
---
|
|
398
|
+
|
|
399
|
+
## 🚀 Why MoneyBar?
|
|
400
|
+
|
|
401
|
+
**For Indie Hackers:**
|
|
402
|
+
- ✅ Turn trial users into paying customers
|
|
403
|
+
- ✅ Understand why users don't convert
|
|
404
|
+
- ✅ Remove friction from payment flow
|
|
405
|
+
- ✅ Focus on product, not payment infrastructure
|
|
406
|
+
|
|
407
|
+
**Technical Benefits:**
|
|
408
|
+
- ✅ Zero-config auto-initialization
|
|
409
|
+
- ✅ TypeScript support with full type safety
|
|
410
|
+
- ✅ User context for personalized experiences
|
|
411
|
+
- ✅ Built-in UI themes and components
|
|
412
|
+
- ✅ Server-side tracking (incognito-proof)
|
|
413
|
+
|
|
414
|
+
**Revenue Benefits:**
|
|
415
|
+
- ✅ 40-60% more trial conversions (value-first)
|
|
416
|
+
- ✅ 20-30% better conversion through feedback insights
|
|
417
|
+
- ✅ 25-40% higher payment completion rates
|
|
418
|
+
|
|
419
|
+
---
|
|
420
|
+
|
|
421
|
+
## 📞 Support & Community
|
|
422
|
+
|
|
423
|
+
- **GitHub:** [ravi-cloudworks/moneybar](https://github.com/ravi-cloudworks/moneybar)
|
|
424
|
+
- **Website:** [moneybar.online](https://moneybar.online)
|
|
425
|
+
- **Issues:** [GitHub Issues](https://github.com/ravi-cloudworks/moneybar/issues)
|
|
426
|
+
|
|
427
|
+
---
|
|
428
|
+
|
|
429
|
+
## 🎯 Next Steps
|
|
430
|
+
|
|
431
|
+
1. **Try the examples:** Start with [`value-first-demo.html`](examples/value-first-demo.html)
|
|
432
|
+
2. **Copy the config:** Use [`minimum-config.js`](examples/minimum-config.js) as template
|
|
433
|
+
3. **Add your business logic:** Replace the demo function with your code
|
|
434
|
+
4. **Configure feedback:** Set up exit feedback to understand user behavior
|
|
435
|
+
5. **Launch and iterate:** Use feedback data to improve conversion
|
|
436
|
+
|
|
437
|
+
**MoneyBar: Because every product needs a navbar for navigation and a moneybar for monetization.** 💰
|
|
438
|
+
|
|
439
|
+
## 📄 License
|
|
440
|
+
|
|
441
|
+
MIT - Use in any project, commercial or personal.
|
|
442
|
+
|
|
443
|
+
---
|
|
444
|
+
|
|
445
|
+
**⭐ Star on GitHub if this helped you build better freemium apps!**
|