@moneybar.online/moneybar

v3.9.0

Published

14 days ago

The navbar of monetization. Fix the 3 money-blocking stages: forced sign-ins, silent drop-offs, and broken payment flows. Turn browsers into buyers.

0High
0Medium
0Low

ravicloudworks

moneybar monetization paywall revenue conversion trial-to-paid freemium payment-flow user-feedback google-auth indie-hackers saas-monetization

MoneyBar - Complete Integration Guide

The NavBar of Monetization

Every product has a navbar for navigation. Every product needs a moneybar for monetization.

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.

🚀 Installation & Usage

Option 1: NPM Install (For projects with bundlers)

npm install @moneybar.online/moneybar

import { MoneyBar } from '@moneybar.online/moneybar';

const moneyBar = new MoneyBar({
  actionFunction: 'generatePDF',
  appId: 'my-pdf-app',
  freeAttemptLimit: 3,
  supabase: {
    url: 'your-supabase-url',
    anonKey: 'your-anon-key'
  },
  payment: [{
    provider: 'dodo',
    productId: 'your-product-id',
    mode: 'test'
  }]
});

moneyBar.attachToButton('#action-btn', generatePDF);

function generatePDF(userContext) {
  if (userContext.isPremium) {
    alert('Premium PDF generated with all features!');
  } else {
    alert(`Basic PDF generated! ${userContext.remaining} downloads remaining`);
  }
}

Option 2: CDN (Recommended for HTML projects)

<!DOCTYPE html>
<html>
<body>
  <button id="action-btn">Try Action</button>

  <script type="module">
    import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@latest/dist/index.bundle.js';

    const moneyBar = new MoneyBar({
      actionFunction: 'myAction',
      appId: 'my-app',
      freeAttemptLimit: 3,
      supabase: {
        url: 'your-supabase-url',
        anonKey: 'your-anon-key'
      },
      payment: [{
        provider: 'dodo',
        productId: 'your-product-id',
        mode: 'test'
      }]
    });

    moneyBar.attachToButton('#action-btn', myAction);

    function myAction(userContext) {
      if (userContext.isPremium) {
        alert('Premium features unlocked!');
      } else {
        alert(`Free trial: ${userContext.remaining} uses left`);
      }
    }
  </script>
</body>
</html>

Quick Start Template

Copy moneybar-config-template.js and example-template.html from this package for a ready-to-use template.

🚀 Quick Start (2 minutes)

Files You Need:

example-template.html - Working demo with all 3 use cases
moneybar-config-template.js - Comprehensive configuration with 3 problem-focused examples

Try It Now:

# After npm install
open example-template.html

Then edit line 157 in moneybar-config-template.js to switch between use cases!

📱 The 3 Money-Blocking Problems MoneyBar Solves

Problem #1: "Forced Sign-In Before Value"

Revenue Impact: 40-60% boost

❌ What Kills Revenue: Users bounce before seeing your product works
✅ MoneyBar Solution: Value-first trials with 3 free attempts
🎯 Perfect for: PDF generators, image tools, converters
🎨 Theme: Emerald (trustworthy, fresh)
Config: VALUE_FIRST_CONFIG in template

Problem #2: "Silent Drop-Off"

Revenue Impact: 20-30% boost

❌ What Kills Revenue: Users try but don't buy - you don't know why
✅ MoneyBar Solution: Exit feedback capture at cancel moment
🎯 Perfect for: SaaS trials, B2B tools, complex products
🎨 Theme: Corporate (professional B2B)
Config: FEEDBACK_INTELLIGENCE_CONFIG in template

Problem #3: "Broken Money Flow"

Revenue Impact: 25-40% boost

❌ What Kills Revenue: Complex payments and broken sessions
✅ MoneyBar Solution: Seamless Google Auth + instant payments
🎯 Perfect for: Templates, premium features, instant upgrades
🎨 Theme: Dark (modern, premium)
Config: INSTANT_PAYMENT_CONFIG in template

🔧 How to Use

Step 1: Choose Your Use Case

Edit line 157 in moneybar-config-template.js:

// Pick one:
window.APP_CONFIG = VALUE_FIRST_CONFIG;           // PDF/Image/Converter tools
window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG; // SaaS/B2B products
window.APP_CONFIG = INSTANT_PAYMENT_CONFIG;       // Templates/Premium features

Step 2: Update Credentials (REQUIRED!)

⚠️ Before testing, you MUST replace these placeholder values or you'll get errors:

supabase: {
  url: 'https://your-project.supabase.co',     // ✅ Replace with your Supabase project URL
  anonKey: 'your-anon-key'                     // ✅ Replace with your Supabase anon key
},
payment: [{
  provider: 'dodo',                            // ✅ Payment provider
  productId: 'your-product-id',                // ✅ Replace with your DodoPayments product ID
  mode: 'test'                                 // ✅ Set to 'test' or 'live'
}]

🚨 Common Error: If you get "Cannot read properties of null (reading 'AuthClient')" error:

❌ You haven't updated the Supabase credentials above
✅ Replace ALL placeholder values with your actual credentials

Step 3: Test the Demo

Open example-template.html in your browser and try the button!

🎯 Advanced Features

User Context for Personalization

Access complete user information in your functions:

function myAction(userContext) {
  console.log({
    isPremium: userContext.isPremium,      // Boolean
    email: userContext.email,              // String
    name: userContext.name,                // String
    currentCount: userContext.currentCount, // Number
    remaining: userContext.remaining,       // Number
    isAuthenticated: userContext.isAuthenticated
  });

  // Dynamic features based on user status
  if (userContext.isPremium) {
    removeWatermark();
  } else {
    addWatermark();
  }
}

Feedback Collection Configuration

const moneyBar = new MoneyBar({
  // ... other config
  feedback: {
    form: {
      title: 'Quick Feedback',
      description: 'What stopped you from upgrading?',
      option1: 'Too expensive',
      option2: 'Need more features',
      option3: 'Just testing'
    },
    email: [
      {
        provider: 'resend',
        apiKey: 'your-resend-api-key',
        fromEmail: '[email protected]'
      }
      // Future providers can be added here:
      // {
      //   provider: 'sendgrid',
      //   apiKey: 'your-sendgrid-api-key',
      //   fromEmail: '[email protected]'
      // }
    ]
  }
});

🎨 UI Themes & Customization

MoneyBar includes 29 beautiful DaisyUI themes:

const moneyBar = new MoneyBar({
  // ... other config
  theme: {
    name: 'dark', // or 'cupcake', 'emerald', 'corporate', etc.
    primaryColor: '#059669'
  },
  titleBar: {
    title: 'My App',
    links: [
      { text: 'Home', url: '/', target: '_self' },
      { text: 'About', url: '/about', target: '_self' }
    ]
  }
});

📊 Complete Configuration Reference

Core Configuration (Required)

const moneyBar = new MoneyBar({
  // Core required config
  appId: 'my-app',                    // Unique identifier for your app
  freeAttemptLimit: 3,               // Free attempts before paywall

  // Supabase configuration (required)
  supabase: {
    url: 'https://xyz.supabase.co',   // Your Supabase project URL
    anonKey: 'your-anon-key'          // Public anon key from Supabase
  },

  // Payment configuration (required)
  payment: [{
    provider: 'dodo',                 // Payment provider
    productId: 'prod_xyz',            // DodoPayments product ID
    mode: 'test'                      // 'test' or 'live'
  }]
});

🎨 Available Themes (29 Options)

Light Themes:

light - Clean white theme
cupcake - Soft pink theme
bumblebee - Warm yellow theme
emerald - Fresh green theme
corporate - Professional blue
garden - Nature green
lofi - Minimalist gray
pastel - Soft purple theme
fantasy - Magical pink theme
wireframe - Minimal outline style
cmyk - Print-inspired colors
autumn - Warm orange theme
business - Clean corporate
acid - Bright lime theme
lemonade - Citrus yellow
winter - Cool blue theme

Dark Themes:

dark - Classic dark mode
synthwave - Retro 80s neon
retro - Vintage brown theme
cyberpunk - Futuristic neon
valentine - Deep pink theme
halloween - Orange & purple
forest - Deep forest green
aqua - Ocean blue theme
luxury - Gold & purple
dracula - Purple vampire theme
night - Deep blue dark
coffee - Rich brown theme
black - Pure dark theme

👤 User Context Properties

All user information available in your functions:

function myAction(userContext) {
  // Available properties:
  userContext.isPremium        // Boolean: Premium vs Free user
  userContext.isAuthenticated  // Boolean: Signed in status
  userContext.email           // String: User's email (if signed in)
  userContext.name            // String: User's display name (if available)
  userContext.currentCount    // Number: Actions taken so far
  userContext.remaining       // Number: Free actions remaining
  userContext.limit           // Number: Maximum free actions allowed
  userContext.user            // Object: Full Supabase user object
}

🔧 Backend Setup

Supabase Setup

Create a Supabase project
Enable Google OAuth
Set up edge functions for payment verification

Payment Integration

MoneyBar supports DodoPayments for seamless checkout:

payment: [{
  provider: 'dodo',
  productId: 'your-dodo-product-id',
  mode: 'test' // or 'live'
}]

🚀 Why MoneyBar?

For Indie Hackers:

✅ Turn trial users into paying customers
✅ Understand why users don't convert
✅ Remove friction from payment flow
✅ Focus on product, not payment infrastructure

Technical Benefits:

✅ Zero-config auto-initialization
✅ TypeScript support with full type safety
✅ User context for personalized experiences
✅ Built-in UI themes and components
✅ Server-side tracking (incognito-proof)

Revenue Benefits:

✅ 40-60% more trial conversions (value-first)
✅ 20-30% better conversion through feedback insights
✅ 25-40% higher payment completion rates

📞 Support & Community

GitHub: ravi-cloudworks/moneybar
Website: moneybar.online
Issues: GitHub Issues

🎯 Next Steps

Try the examples: Start with value-first-demo.html
Copy the config: Use minimum-config.js as template
Add your business logic: Replace the demo function with your code
Configure feedback: Set up exit feedback to understand user behavior
Launch and iterate: Use feedback data to improve conversion

MoneyBar: Because every product needs a navbar for navigation and a moneybar for monetization. 💰

📄 License

MIT - Use in any project, commercial or personal.

⭐ Star on GitHub if this helped you build better freemium apps!