@moneybar.online/moneybar 3.6.0 → 3.7.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/example-template.html +48 -196
- package/moneybar-config-template.js +21 -208
- package/package.json +1 -1
package/example-template.html
CHANGED
|
@@ -41,225 +41,77 @@
|
|
|
41
41
|
<body>
|
|
42
42
|
<h1>🚀 MoneyBar Integration Example</h1>
|
|
43
43
|
|
|
44
|
-
<div class="config-note">
|
|
45
|
-
<strong>⚠️ SETUP REQUIRED:</strong> Before testing, you MUST update these credentials in <code>moneybar-config-template.js</code>:
|
|
46
|
-
<ul>
|
|
47
|
-
<li>✅ <strong>Supabase URL</strong> (line 54, 86, 128)</li>
|
|
48
|
-
<li>✅ <strong>Supabase anon key</strong> (line 55, 87, 129)</li>
|
|
49
|
-
<li>✅ <strong>DodoPayments product ID</strong> (line 58, 90, 132)</li>
|
|
50
|
-
<li>✅ <strong>Payment mode</strong> ('test' or 'live')</li>
|
|
51
|
-
</ul>
|
|
52
|
-
<small><strong>Current config:</strong> FEEDBACK_INTELLIGENCE_CONFIG (line 157) - Switch to VALUE_FIRST_CONFIG or INSTANT_PAYMENT_CONFIG if needed</small>
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<div class="demo-section">
|
|
56
|
-
<h2>🎯 The 3 Money-Blocking Problems MoneyBar Solves</h2>
|
|
57
|
-
|
|
58
|
-
<h3>Problem #1: "Forced Sign-In Before Value" (40-60% boost)</h3>
|
|
59
|
-
<p>❌ Users bounce before seeing your product works<br>
|
|
60
|
-
✅ Solution: Value-first trials - let users try before they buy</p>
|
|
61
|
-
|
|
62
|
-
<h3>Problem #2: "Silent Drop-Off" (20-30% boost)</h3>
|
|
63
|
-
<p>❌ Users try but don't buy - you don't know why<br>
|
|
64
|
-
✅ Solution: Exit feedback capture - learn why users don't convert</p>
|
|
65
|
-
|
|
66
|
-
<h3>Problem #3: "Broken Money Flow" (25-40% boost)</h3>
|
|
67
|
-
<p>❌ Complex payments and broken sessions<br>
|
|
68
|
-
✅ Solution: Seamless auth + instant payments</p>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
44
|
<div class="demo-section">
|
|
72
45
|
<h2>🎨 Try the Demo</h2>
|
|
73
|
-
<p>This button
|
|
46
|
+
<p>This button uses the configuration from <code>moneybar-config-template.js</code></p>
|
|
74
47
|
<button id="action-btn">Try Action (Free Trial)</button>
|
|
75
48
|
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
<ul>
|
|
79
|
-
<li><code>VALUE_FIRST_CONFIG</code> - PDF generator demo (calls <code>generatePDF</code> function)</li>
|
|
80
|
-
<li><code>FEEDBACK_INTELLIGENCE_CONFIG</code> - SaaS analytics demo (calls <code>runAnalysis</code> function)</li>
|
|
81
|
-
<li><code>INSTANT_PAYMENT_CONFIG</code> - Template creator demo (calls <code>createTemplate</code> function)</li>
|
|
82
|
-
</ul>
|
|
83
|
-
|
|
84
|
-
<div style="background: #fee2e2; padding: 1rem; border-radius: 6px; border-left: 4px solid #ef4444; margin: 1rem 0;">
|
|
85
|
-
<strong>🚨 Common Error:</strong> If you get "Cannot read properties of null (reading 'AuthClient')" error:
|
|
49
|
+
<div class="config-note">
|
|
50
|
+
<strong>🔧 Change Configuration:</strong> Edit <code>window.APP_CONFIG = VALUE_FIRST_CONFIG;</code> in <code>moneybar-config-template.js</code> to switch between:
|
|
86
51
|
<ul>
|
|
87
|
-
<li
|
|
88
|
-
<li
|
|
89
|
-
<li
|
|
52
|
+
<li><code>VALUE_FIRST_CONFIG</code> - PDF generator demo</li>
|
|
53
|
+
<li><code>FEEDBACK_INTELLIGENCE_CONFIG</code> - SaaS analytics demo</li>
|
|
54
|
+
<li><code>INSTANT_PAYMENT_CONFIG</code> - Template creator demo</li>
|
|
90
55
|
</ul>
|
|
91
56
|
</div>
|
|
92
57
|
</div>
|
|
93
58
|
|
|
94
|
-
<!-- MoneyBar
|
|
95
|
-
<script type="module">
|
|
96
|
-
console.log('🚀 Loading MoneyBar...');
|
|
97
|
-
|
|
98
|
-
try {
|
|
99
|
-
const { MoneyBar } = await import('https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.5.0/dist/index.bundle.js');
|
|
100
|
-
|
|
101
|
-
// Use FEEDBACK_INTELLIGENCE_CONFIG by default (you can change this)
|
|
102
|
-
const config = {
|
|
103
|
-
actionFunction: 'runAnalysis',
|
|
104
|
-
appId: 'saas-analytics',
|
|
105
|
-
freeAttemptLimit: 3,
|
|
106
|
-
supabase: {
|
|
107
|
-
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
108
|
-
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
|
|
109
|
-
},
|
|
110
|
-
payment: [{
|
|
111
|
-
provider: 'dodo',
|
|
112
|
-
productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
|
|
113
|
-
mode: 'test'
|
|
114
|
-
}],
|
|
115
|
-
feedback: {
|
|
116
|
-
form: {
|
|
117
|
-
title: 'Quick Feedback',
|
|
118
|
-
description: 'What stopped you from upgrading?',
|
|
119
|
-
option1: 'Too complex to implement',
|
|
120
|
-
option2: 'Not enough ROI for my team',
|
|
121
|
-
option3: 'Need more features first'
|
|
122
|
-
},
|
|
123
|
-
email: [
|
|
124
|
-
{
|
|
125
|
-
provider: 'resend',
|
|
126
|
-
apiKey: 'your-resend-api-key',
|
|
127
|
-
fromEmail: 'feedback@yourapp.com'
|
|
128
|
-
}
|
|
129
|
-
]
|
|
130
|
-
},
|
|
131
|
-
theme: {
|
|
132
|
-
name: 'corporate',
|
|
133
|
-
primaryColor: '#0066cc'
|
|
134
|
-
},
|
|
135
|
-
titleBar: {
|
|
136
|
-
title: '📈 Analytics Tool',
|
|
137
|
-
links: [
|
|
138
|
-
{ text: 'Features', url: '#features', target: '_self' },
|
|
139
|
-
{ text: 'ROI Calculator', url: '#roi', target: '_self' }
|
|
140
|
-
]
|
|
141
|
-
}
|
|
142
|
-
};
|
|
59
|
+
<!-- Load MoneyBar configuration and initialization -->
|
|
60
|
+
<script type="module" src="moneybar-config-template.js"></script>
|
|
143
61
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
console.log('✅ Attaching to button...');
|
|
148
|
-
moneyBar.attachToButton('#action-btn', runAnalysis);
|
|
149
|
-
|
|
150
|
-
console.log('🎉 MoneyBar loaded successfully!');
|
|
151
|
-
|
|
152
|
-
} catch (error) {
|
|
153
|
-
console.error('❌ MoneyBar failed to load:', error);
|
|
154
|
-
document.body.innerHTML += `<div style="background: red; color: white; padding: 1rem; margin: 1rem 0;">
|
|
155
|
-
<strong>Error:</strong> ${error.message}
|
|
156
|
-
</div>`;
|
|
157
|
-
}
|
|
62
|
+
<!-- App-specific action functions -->
|
|
63
|
+
<script type="module">
|
|
64
|
+
// 🎯 App-specific action functions (customize these for your app)
|
|
158
65
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
66
|
+
window.generatePDF = function(userContext) {
|
|
67
|
+
if (userContext.isPremium) {
|
|
68
|
+
alert('Premium PDF generated with watermark removal, custom fonts, and high quality!');
|
|
69
|
+
// Your premium PDF generation logic here
|
|
70
|
+
} else {
|
|
71
|
+
alert(`Basic PDF generated! ${userContext.remaining} free attempts left.`);
|
|
72
|
+
// Your basic PDF generation logic here
|
|
73
|
+
}
|
|
74
|
+
};
|
|
162
75
|
|
|
76
|
+
window.runAnalysis = function(userContext) {
|
|
163
77
|
if (userContext.isPremium) {
|
|
164
|
-
console.log('✅ Full analytics suite access');
|
|
165
78
|
alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
|
|
79
|
+
// Your premium analytics logic here
|
|
166
80
|
} else {
|
|
167
|
-
console.log(`📊 Basic analysis complete. ${userContext.remaining} attempts remaining`);
|
|
168
81
|
alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
|
|
82
|
+
// Your basic analytics logic here
|
|
169
83
|
}
|
|
170
|
-
}
|
|
84
|
+
};
|
|
171
85
|
|
|
172
|
-
|
|
173
|
-
|
|
86
|
+
window.createTemplate = function(userContext) {
|
|
87
|
+
if (userContext.isPremium) {
|
|
88
|
+
alert('Premium template created! Full customization, commercial license, and PSD files included.');
|
|
89
|
+
// Your premium template logic here
|
|
90
|
+
} else {
|
|
91
|
+
alert(`Template created! Basic version only. ${userContext.remaining} attempts left.`);
|
|
92
|
+
// Your basic template logic here
|
|
93
|
+
}
|
|
94
|
+
};
|
|
174
95
|
</script>
|
|
175
96
|
|
|
176
97
|
<div class="demo-section">
|
|
177
|
-
<h2>📚
|
|
98
|
+
<h2>📚 Integration Guide</h2>
|
|
99
|
+
<p>See the <a href="README.md">README.md</a> file for complete integration instructions including:</p>
|
|
100
|
+
<ul>
|
|
101
|
+
<li>Multiple integration methods (CDN, NPM, self-contained)</li>
|
|
102
|
+
<li>Configuration options and themes</li>
|
|
103
|
+
<li>Backend setup instructions</li>
|
|
104
|
+
<li>Use case examples and best practices</li>
|
|
105
|
+
</ul>
|
|
106
|
+
|
|
107
|
+
<h3>🔧 Quick Setup</h3>
|
|
178
108
|
<ol>
|
|
179
|
-
<li
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<li>Set payment mode: <code>'test'</code> or <code>'live'</code></li>
|
|
185
|
-
</ul>
|
|
186
|
-
</li>
|
|
187
|
-
<li><strong>Choose</strong> your use case config (line 157 in template)</li>
|
|
188
|
-
<li><strong>Test</strong> the button - should work without errors now!</li>
|
|
189
|
-
<li><strong>Copy</strong> to your project when ready</li>
|
|
190
|
-
<li><strong>Add</strong> the import map to your HTML</li>
|
|
109
|
+
<li>Copy <code>moneybar-config-template.js</code> to your project</li>
|
|
110
|
+
<li>Update Supabase and payment credentials in the config</li>
|
|
111
|
+
<li>Choose your use case configuration</li>
|
|
112
|
+
<li>Add your app-specific action functions to your HTML</li>
|
|
113
|
+
<li>Include the import map and script tags</li>
|
|
191
114
|
</ol>
|
|
192
|
-
|
|
193
|
-
<h3>🎛️ Live Integration Examples:</h3>
|
|
194
|
-
<details>
|
|
195
|
-
<summary><strong>Method 1: CDN + Import Map</strong> (Current Demo)</summary>
|
|
196
|
-
<pre><code><script type="importmap">
|
|
197
|
-
{
|
|
198
|
-
"imports": {
|
|
199
|
-
"@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
</script>
|
|
203
|
-
<script type="module" src="moneybar-config-template.js"></script></code></pre>
|
|
204
|
-
</details>
|
|
205
|
-
|
|
206
|
-
<details>
|
|
207
|
-
<summary><strong>Method 2: Self-contained Bundle</strong> (No import map needed)</summary>
|
|
208
|
-
<pre><code><script type="module">
|
|
209
|
-
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
|
|
210
|
-
|
|
211
|
-
const moneyBar = new MoneyBar({
|
|
212
|
-
actionFunction: 'generatePDF',
|
|
213
|
-
appId: 'pdf-generator',
|
|
214
|
-
freeAttemptLimit: 3,
|
|
215
|
-
supabase: {
|
|
216
|
-
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
217
|
-
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
|
|
218
|
-
},
|
|
219
|
-
payment: [{
|
|
220
|
-
provider: 'dodo',
|
|
221
|
-
productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
|
|
222
|
-
mode: 'test'
|
|
223
|
-
}]
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
moneyBar.attachToButton('#action-btn', generatePDF);
|
|
227
|
-
|
|
228
|
-
function generatePDF(userContext) {
|
|
229
|
-
if (userContext.isPremium) {
|
|
230
|
-
alert('Premium PDF generated!');
|
|
231
|
-
} else {
|
|
232
|
-
alert(`Basic PDF generated! ${userContext.remaining} attempts left.`);
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
</script></code></pre>
|
|
236
|
-
</details>
|
|
237
|
-
|
|
238
|
-
<details>
|
|
239
|
-
<summary><strong>Method 3: NPM Install</strong> (For projects with bundlers)</summary>
|
|
240
|
-
<pre><code>npm install @moneybar.online/moneybar
|
|
241
|
-
|
|
242
|
-
import { MoneyBar } from '@moneybar.online/moneybar';
|
|
243
|
-
|
|
244
|
-
const moneyBar = new MoneyBar({
|
|
245
|
-
actionFunction: 'generatePDF',
|
|
246
|
-
appId: 'pdf-generator',
|
|
247
|
-
freeAttemptLimit: 3,
|
|
248
|
-
supabase: {
|
|
249
|
-
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
250
|
-
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
|
|
251
|
-
},
|
|
252
|
-
payment: [{
|
|
253
|
-
provider: 'dodo',
|
|
254
|
-
productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
|
|
255
|
-
mode: 'test'
|
|
256
|
-
}]
|
|
257
|
-
});
|
|
258
|
-
|
|
259
|
-
moneyBar.attachToButton('#action-btn', generatePDF);</code></pre>
|
|
260
|
-
</details>
|
|
261
|
-
|
|
262
|
-
<p><small>See <code>moneybar-config-template.js</code> for all integration options and detailed examples!</small></p>
|
|
263
115
|
</div>
|
|
264
116
|
</body>
|
|
265
117
|
</html>
|
|
@@ -1,56 +1,25 @@
|
|
|
1
1
|
// MoneyBar Configuration Template
|
|
2
2
|
// Copy this file and customize for your project
|
|
3
|
+
// See README.md for detailed integration instructions
|
|
3
4
|
|
|
4
5
|
// ========================================
|
|
5
|
-
//
|
|
6
|
+
// IMPORT MONEYBAR
|
|
6
7
|
// ========================================
|
|
7
8
|
|
|
8
|
-
//
|
|
9
|
-
|
|
10
|
-
// Use case: PDF generators, image tools, converters
|
|
9
|
+
// Self-contained bundle (works without import map)
|
|
10
|
+
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@latest/dist/index.bundle.js';
|
|
11
11
|
|
|
12
|
-
//
|
|
13
|
-
// Solution: Exit feedback capture - learn why users don't convert
|
|
14
|
-
// Use case: SaaS trials, B2B tools, complex products
|
|
15
|
-
|
|
16
|
-
// PROBLEM #3: "Broken Money Flow" (25-40% conversion boost)
|
|
17
|
-
// Solution: Seamless auth + instant payments
|
|
18
|
-
// Use case: Templates, premium features, instant upgrades
|
|
19
|
-
|
|
20
|
-
// ========================================
|
|
21
|
-
// IMPORT OPTIONS
|
|
22
|
-
// ========================================
|
|
23
|
-
|
|
24
|
-
// Option 1: Browser CDN Usage (Recommended for simple projects)
|
|
25
|
-
// Add this import map to your HTML:
|
|
26
|
-
/*
|
|
27
|
-
<script type="importmap">
|
|
28
|
-
{
|
|
29
|
-
"imports": {
|
|
30
|
-
"@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
</script>
|
|
34
|
-
*/
|
|
35
|
-
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
|
|
36
|
-
|
|
37
|
-
// Option 2: Self-contained bundle (No import map needed)
|
|
38
|
-
// import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
|
|
39
|
-
|
|
40
|
-
// Option 3: NPM install usage (for projects with bundlers)
|
|
12
|
+
// For NPM projects:
|
|
41
13
|
// import { MoneyBar } from '@moneybar.online/moneybar';
|
|
42
14
|
|
|
43
15
|
// ========================================
|
|
44
|
-
// CONFIGURATION
|
|
16
|
+
// CONFIGURATION OPTIONS
|
|
45
17
|
// ========================================
|
|
46
18
|
|
|
47
|
-
// 🎯 USE CASE 1: VALUE-FIRST DEMO (Problem #1 Solution)
|
|
48
|
-
// Perfect for: PDF generators, image tools, converters
|
|
49
19
|
const VALUE_FIRST_CONFIG = {
|
|
50
20
|
actionFunction: 'generatePDF',
|
|
51
21
|
appId: 'pdf-generator',
|
|
52
|
-
freeAttemptLimit: 3,
|
|
53
|
-
|
|
22
|
+
freeAttemptLimit: 3,
|
|
54
23
|
supabase: {
|
|
55
24
|
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
56
25
|
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
|
|
@@ -61,7 +30,7 @@ const VALUE_FIRST_CONFIG = {
|
|
|
61
30
|
mode: 'test'
|
|
62
31
|
}],
|
|
63
32
|
theme: {
|
|
64
|
-
name: 'emerald',
|
|
33
|
+
name: 'emerald',
|
|
65
34
|
primaryColor: '#059669'
|
|
66
35
|
},
|
|
67
36
|
titleBar: {
|
|
@@ -78,8 +47,6 @@ const VALUE_FIRST_CONFIG = {
|
|
|
78
47
|
}
|
|
79
48
|
};
|
|
80
49
|
|
|
81
|
-
// 🎯 USE CASE 2: FEEDBACK INTELLIGENCE (Problem #2 Solution)
|
|
82
|
-
// Perfect for: SaaS trials, B2B tools, complex products
|
|
83
50
|
const FEEDBACK_INTELLIGENCE_CONFIG = {
|
|
84
51
|
actionFunction: 'runAnalysis',
|
|
85
52
|
appId: 'saas-analytics',
|
|
@@ -93,7 +60,6 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
|
|
|
93
60
|
productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
|
|
94
61
|
mode: 'test'
|
|
95
62
|
}],
|
|
96
|
-
// KEY FEATURE: Feedback collection on cancel/exit
|
|
97
63
|
feedback: {
|
|
98
64
|
form: {
|
|
99
65
|
title: 'Quick Feedback',
|
|
@@ -102,22 +68,14 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
|
|
|
102
68
|
option2: 'Not enough ROI for my team',
|
|
103
69
|
option3: 'Need more features first'
|
|
104
70
|
},
|
|
105
|
-
email: [
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
// Future providers can be added:
|
|
112
|
-
// {
|
|
113
|
-
// provider: 'sendgrid',
|
|
114
|
-
// apiKey: 'your-sendgrid-api-key',
|
|
115
|
-
// fromEmail: 'feedback@yourapp.com'
|
|
116
|
-
// }
|
|
117
|
-
]
|
|
71
|
+
email: [{
|
|
72
|
+
provider: 'resend',
|
|
73
|
+
apiKey: 'your-resend-api-key',
|
|
74
|
+
fromEmail: 'feedback@yourapp.com'
|
|
75
|
+
}]
|
|
118
76
|
},
|
|
119
77
|
theme: {
|
|
120
|
-
name: 'corporate',
|
|
78
|
+
name: 'corporate',
|
|
121
79
|
primaryColor: '#0066cc'
|
|
122
80
|
},
|
|
123
81
|
titleBar: {
|
|
@@ -129,12 +87,10 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
|
|
|
129
87
|
}
|
|
130
88
|
};
|
|
131
89
|
|
|
132
|
-
// 🎯 USE CASE 3: INSTANT PAYMENT FLOW (Problem #3 Solution)
|
|
133
|
-
// Perfect for: Templates, premium features, instant upgrades
|
|
134
90
|
const INSTANT_PAYMENT_CONFIG = {
|
|
135
91
|
actionFunction: 'createTemplate',
|
|
136
92
|
appId: 'template-creator',
|
|
137
|
-
freeAttemptLimit: 5,
|
|
93
|
+
freeAttemptLimit: 5,
|
|
138
94
|
supabase: {
|
|
139
95
|
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
140
96
|
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
|
|
@@ -145,7 +101,7 @@ const INSTANT_PAYMENT_CONFIG = {
|
|
|
145
101
|
mode: 'test'
|
|
146
102
|
}],
|
|
147
103
|
theme: {
|
|
148
|
-
name: 'dark',
|
|
104
|
+
name: 'dark',
|
|
149
105
|
primaryColor: '#7c3aed'
|
|
150
106
|
},
|
|
151
107
|
titleBar: {
|
|
@@ -166,163 +122,20 @@ const INSTANT_PAYMENT_CONFIG = {
|
|
|
166
122
|
// CHOOSE YOUR CONFIGURATION
|
|
167
123
|
// ========================================
|
|
168
124
|
|
|
169
|
-
//
|
|
170
|
-
window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG;
|
|
171
|
-
|
|
172
|
-
// Or create a custom configuration:
|
|
173
|
-
/*
|
|
174
|
-
window.APP_CONFIG = {
|
|
175
|
-
// REQUIRED: Function name that gets called
|
|
176
|
-
actionFunction: 'myAction',
|
|
177
|
-
|
|
178
|
-
// REQUIRED: Your unique app identifier
|
|
179
|
-
appId: 'my-app',
|
|
180
|
-
|
|
181
|
-
// REQUIRED: Number of free attempts before paywall
|
|
182
|
-
freeAttemptLimit: 3,
|
|
183
|
-
|
|
184
|
-
// REQUIRED: Supabase configuration
|
|
185
|
-
supabase: {
|
|
186
|
-
url: 'your-supabase-project-url',
|
|
187
|
-
anonKey: 'your-supabase-anon-key'
|
|
188
|
-
},
|
|
189
|
-
|
|
190
|
-
// REQUIRED: Payment configuration
|
|
191
|
-
payment: [{
|
|
192
|
-
provider: 'dodo',
|
|
193
|
-
productId: 'your-dodo-payments-product-id',
|
|
194
|
-
mode: 'test' // Change to 'live' for production
|
|
195
|
-
}],
|
|
196
|
-
|
|
197
|
-
// OPTIONAL: UI Theme (29 themes available)
|
|
198
|
-
theme: {
|
|
199
|
-
name: 'dark', // cyberpunk, emerald, corporate, etc.
|
|
200
|
-
primaryColor: '#7c3aed'
|
|
201
|
-
},
|
|
202
|
-
|
|
203
|
-
// OPTIONAL: Title bar configuration
|
|
204
|
-
titleBar: {
|
|
205
|
-
title: 'My App',
|
|
206
|
-
titleImage: './logo.png',
|
|
207
|
-
links: [
|
|
208
|
-
{ text: 'Home', url: '/', target: '_self' },
|
|
209
|
-
{ text: 'Pricing', url: '/pricing', target: '_self' }
|
|
210
|
-
]
|
|
211
|
-
},
|
|
212
|
-
|
|
213
|
-
// OPTIONAL: Success modal
|
|
214
|
-
successMessage: {
|
|
215
|
-
enabled: true,
|
|
216
|
-
title: 'Success!',
|
|
217
|
-
message: 'Your action completed successfully!'
|
|
218
|
-
},
|
|
219
|
-
|
|
220
|
-
// OPTIONAL: Feedback collection (Problem #2 solution)
|
|
221
|
-
feedback: {
|
|
222
|
-
form: {
|
|
223
|
-
title: 'Quick Feedback',
|
|
224
|
-
description: 'What stopped you from upgrading?',
|
|
225
|
-
option1: 'Too expensive',
|
|
226
|
-
option2: 'Need more features',
|
|
227
|
-
option3: 'Just testing'
|
|
228
|
-
},
|
|
229
|
-
email: [
|
|
230
|
-
{
|
|
231
|
-
provider: 'resend',
|
|
232
|
-
apiKey: 'your-resend-api-key',
|
|
233
|
-
fromEmail: 'hello@yourapp.com'
|
|
234
|
-
}
|
|
235
|
-
]
|
|
236
|
-
}
|
|
237
|
-
};
|
|
238
|
-
*/
|
|
125
|
+
// Select one of the configs above:
|
|
126
|
+
window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG;
|
|
239
127
|
|
|
240
128
|
// ========================================
|
|
241
129
|
// INITIALIZE MONEYBAR
|
|
242
130
|
// ========================================
|
|
243
131
|
|
|
244
|
-
// Initialize MoneyBar with the configuration
|
|
245
132
|
const moneyBar = new MoneyBar(window.APP_CONFIG);
|
|
246
133
|
|
|
247
|
-
// Attach to button with your business logic
|
|
248
134
|
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
249
|
-
// Call the specified
|
|
135
|
+
// Call the function specified in actionFunction
|
|
250
136
|
if (typeof window[window.APP_CONFIG.actionFunction] === 'function') {
|
|
251
137
|
window[window.APP_CONFIG.actionFunction](userContext);
|
|
252
138
|
} else {
|
|
253
|
-
|
|
254
|
-
myAction(userContext);
|
|
255
|
-
}
|
|
256
|
-
});
|
|
257
|
-
|
|
258
|
-
// ========================================
|
|
259
|
-
// ACTION FUNCTIONS BY USE CASE
|
|
260
|
-
// ========================================
|
|
261
|
-
|
|
262
|
-
// 🎯 USE CASE 1: Value-First Demo Actions
|
|
263
|
-
window.generatePDF = function(userContext) {
|
|
264
|
-
console.log('🎯 VALUE-FIRST: Generating PDF...');
|
|
265
|
-
|
|
266
|
-
if (userContext.isPremium) {
|
|
267
|
-
console.log('✅ Premium PDF with all features');
|
|
268
|
-
alert('Premium PDF generated with watermark removal, custom fonts, and high quality!');
|
|
269
|
-
// Your premium PDF generation logic here
|
|
270
|
-
} else {
|
|
271
|
-
console.log(`📄 Basic PDF generated. ${userContext.remaining} attempts remaining`);
|
|
272
|
-
alert(`Basic PDF generated! ${userContext.remaining} free attempts left.`);
|
|
273
|
-
// Your basic PDF generation logic here
|
|
139
|
+
console.error(`Function '${window.APP_CONFIG.actionFunction}' not found`);
|
|
274
140
|
}
|
|
275
|
-
};
|
|
276
|
-
|
|
277
|
-
// 🎯 USE CASE 2: Feedback Intelligence Actions
|
|
278
|
-
window.runAnalysis = function(userContext) {
|
|
279
|
-
console.log('🎯 FEEDBACK INTELLIGENCE: Running analysis...');
|
|
280
|
-
|
|
281
|
-
if (userContext.isPremium) {
|
|
282
|
-
console.log('✅ Full analytics suite access');
|
|
283
|
-
alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
|
|
284
|
-
// Your premium analytics logic here
|
|
285
|
-
} else {
|
|
286
|
-
console.log(`📊 Basic analysis complete. ${userContext.remaining} attempts remaining`);
|
|
287
|
-
alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
|
|
288
|
-
// Your basic analytics logic here
|
|
289
|
-
}
|
|
290
|
-
};
|
|
291
|
-
|
|
292
|
-
// 🎯 USE CASE 3: Instant Payment Actions
|
|
293
|
-
window.createTemplate = function(userContext) {
|
|
294
|
-
console.log('🎯 INSTANT PAYMENT: Creating template...');
|
|
295
|
-
|
|
296
|
-
if (userContext.isPremium) {
|
|
297
|
-
console.log('✅ Premium template with full customization');
|
|
298
|
-
alert('Premium template created! Full customization, commercial license, and PSD files included.');
|
|
299
|
-
// Your premium template logic here
|
|
300
|
-
} else {
|
|
301
|
-
console.log(`🎨 Basic template created. ${userContext.remaining} attempts remaining`);
|
|
302
|
-
alert(`Template created! Basic version only. ${userContext.remaining} attempts left.`);
|
|
303
|
-
// Your basic template logic here
|
|
304
|
-
}
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
// 🎯 DEFAULT: Fallback Action
|
|
308
|
-
window.myAction = function(userContext) {
|
|
309
|
-
console.log('User context:', userContext);
|
|
310
|
-
|
|
311
|
-
if (userContext.isPremium) {
|
|
312
|
-
alert('Premium features unlocked!');
|
|
313
|
-
// Your premium functionality here
|
|
314
|
-
} else {
|
|
315
|
-
alert(`Free trial: ${userContext.remaining} uses left`);
|
|
316
|
-
// Your free tier functionality here
|
|
317
|
-
}
|
|
318
|
-
};
|
|
319
|
-
|
|
320
|
-
// ========================================
|
|
321
|
-
// QUICK REFERENCE: Available Themes
|
|
322
|
-
// ========================================
|
|
323
|
-
|
|
324
|
-
// Light themes: light, cupcake, bumblebee, emerald, corporate, garden
|
|
325
|
-
// Dark themes: dark, synthwave, retro, cyberpunk, valentine, halloween
|
|
326
|
-
// Professional: corporate, business, luxury
|
|
327
|
-
// Creative: fantasy, cyberpunk, synthwave
|
|
328
|
-
// And 20+ more themes available!
|
|
141
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moneybar.online/moneybar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "The navbar of monetization. Fix the 3 money-blocking stages: forced sign-ins, silent drop-offs, and broken payment flows. Turn browsers into buyers.",
|
|
5
5
|
"main": "dist/index.esm.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|