@moneybar.online/moneybar 3.4.0 → 3.5.0

package/example-template.html

@@ -91,17 +91,87 @@
         </div>
     </div>
 
-    <!-- Import map for dependencies -->
-    <script type="importmap">
-    {
-        "imports": {
-            "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+    <!-- MoneyBar self-contained bundle (no import map needed) -->
+    <script type="module">
+        console.log('🚀 Loading MoneyBar...');
+
+        try {
+            const { MoneyBar } = await import('https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js');
+
+            // Use FEEDBACK_INTELLIGENCE_CONFIG by default (you can change this)
+            const config = {
+                actionFunction: 'runAnalysis',
+                appId: 'saas-analytics',
+                freeAttemptLimit: 3,
+                supabase: {
+                    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+                    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
+                },
+                payment: [{
+                    provider: 'dodo',
+                    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+                    mode: 'test'
+                }],
+                feedback: {
+                    form: {
+                        title: 'Quick Feedback',
+                        description: 'What stopped you from upgrading?',
+                        option1: 'Too complex to implement',
+                        option2: 'Not enough ROI for my team',
+                        option3: 'Need more features first'
+                    },
+                    email: [
+                        {
+                            provider: 'resend',
+                            apiKey: 'your-resend-api-key',
+                            fromEmail: 'feedback@yourapp.com'
+                        }
+                    ]
+                },
+                theme: {
+                    name: 'corporate',
+                    primaryColor: '#0066cc'
+                },
+                titleBar: {
+                    title: '📈 Analytics Tool',
+                    links: [
+                        { text: 'Features', url: '#features', target: '_self' },
+                        { text: 'ROI Calculator', url: '#roi', target: '_self' }
+                    ]
+                }
+            };
+
+            console.log('✅ Creating MoneyBar instance...');
+            const moneyBar = new MoneyBar(config);
+
+            console.log('✅ Attaching to button...');
+            moneyBar.attachToButton('#action-btn', runAnalysis);
+
+            console.log('🎉 MoneyBar loaded successfully!');
+
+        } catch (error) {
+            console.error('❌ MoneyBar failed to load:', error);
+            document.body.innerHTML += `<div style="background: red; color: white; padding: 1rem; margin: 1rem 0;">
+                <strong>Error:</strong> ${error.message}
+            </div>`;
         }
-    }
-    </script>
 
-    <!-- Load MoneyBar configuration and initialization -->
-    <script type="module" src="moneybar-config-template.js"></script>
+        // Action function for the demo
+        function runAnalysis(userContext) {
+            console.log('🎯 FEEDBACK INTELLIGENCE: Running analysis...');
+
+            if (userContext.isPremium) {
+                console.log('✅ Full analytics suite access');
+                alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
+            } else {
+                console.log(`📊 Basic analysis complete. ${userContext.remaining} attempts remaining`);
+                alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
+            }
+        }
+
+        // Make function global for debugging
+        window.runAnalysis = runAnalysis;
+    </script>
 
     <div class="demo-section">
         <h2>📚 Setup Checklist</h2>
@@ -120,13 +190,74 @@
             <li><strong>Add</strong> the import map to your HTML</li>
         </ol>
 
-        <h3>🎛️ Integration Options:</h3>
-        <ul>
-            <li><strong>CDN + Import Map</strong> - Simple, no build step (current demo)</li>
-            <li><strong>Self-contained Bundle</strong> - No import map needed</li>
-            <li><strong>NPM Install</strong> - For projects with bundlers</li>
-            <li><strong>UMD Script Tags</strong> - Traditional non-module usage</li>
-        </ul>
+        <h3>🎛️ Live Integration Examples:</h3>
+        <details>
+            <summary><strong>Method 1: CDN + Import Map</strong> (Current Demo)</summary>
+            <pre><code>&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+  }
+}
+&lt;/script&gt;
+&lt;script type="module" src="moneybar-config-template.js"&gt;&lt;/script&gt;</code></pre>
+        </details>
+
+        <details>
+            <summary><strong>Method 2: Self-contained Bundle</strong> (No import map needed)</summary>
+            <pre><code>&lt;script type="module"&gt;
+import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
+
+const moneyBar = new MoneyBar({
+  actionFunction: 'generatePDF',
+  appId: 'pdf-generator',
+  freeAttemptLimit: 3,
+  supabase: {
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+    mode: 'test'
+  }]
+});
+
+moneyBar.attachToButton('#action-btn', generatePDF);
+
+function generatePDF(userContext) {
+  if (userContext.isPremium) {
+    alert('Premium PDF generated!');
+  } else {
+    alert(`Basic PDF generated! ${userContext.remaining} attempts left.`);
+  }
+}
+&lt;/script&gt;</code></pre>
+        </details>
+
+        <details>
+            <summary><strong>Method 3: NPM Install</strong> (For projects with bundlers)</summary>
+            <pre><code>npm install @moneybar.online/moneybar
+
+import { MoneyBar } from '@moneybar.online/moneybar';
+
+const moneyBar = new MoneyBar({
+  actionFunction: 'generatePDF',
+  appId: 'pdf-generator',
+  freeAttemptLimit: 3,
+  supabase: {
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
+    mode: 'test'
+  }]
+});
+
+moneyBar.attachToButton('#action-btn', generatePDF);</code></pre>
+        </details>
 
         <p><small>See <code>moneybar-config-template.js</code> for all integration options and detailed examples!</small></p>
     </div>

package/moneybar-config-template.js

@@ -50,13 +50,14 @@ const VALUE_FIRST_CONFIG = {
   actionFunction: 'generatePDF',
   appId: 'pdf-generator',
   freeAttemptLimit: 3, // Give enough attempts to prove value
+
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
   payment: [{
     provider: 'dodo',
-    productId: 'your-product-id',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
   }],
   theme: {
@@ -84,12 +85,12 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
   appId: 'saas-analytics',
   freeAttemptLimit: 3,
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
   payment: [{
     provider: 'dodo',
-    productId: 'your-product-id',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
   }],
   // KEY FEATURE: Feedback collection on cancel/exit
@@ -135,12 +136,12 @@ const INSTANT_PAYMENT_CONFIG = {
   appId: 'template-creator',
   freeAttemptLimit: 5, // Lower to trigger payment faster
   supabase: {
-    url: 'your-supabase-url',
-    anonKey: 'your-anon-key'
+    url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
+    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
   },
   payment: [{
     provider: 'dodo',
-    productId: 'your-product-id',
+    productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
     mode: 'test'
   }],
   theme: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneybar.online/moneybar",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "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.",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",