Websparks Badge

🎉 Auto-injecting footer badge for Websparks-built software

A lightweight npm package that automatically adds a "Built with Websparks" badge to your web application's footer.

✨ Features

• 🚀 Works with any framework - React, Vue, Angular, vanilla JS
• 🎨 Beautiful design - Modern gradient badge with hover effects
• 📱 Responsive - Looks great on all devices
• 🔗 Interactive - Clickable badge that links to websparks.ai
• 🎯 Smart positioning - Automatically placed in bottom-right corner
• 🛡️ Non-intrusive - Won't interfere with your existing styles

📦 Installation & Usage

Step 1: Install

npm install websparks-badge

Step 2: Import (Required)

Add this line to your main JavaScript file:

For React/Modern frameworks:

import 'websparks-badge';

For Node.js/CommonJS:

require('websparks-badge');

For vanilla HTML:

<script src="node_modules/websparks-badge/auto-inject.js"></script>

That's it! The badge will automatically appear on your website.

🎯 Framework Examples

React (App.js or index.js)

import React from 'react';
import 'websparks-badge'; // Add this line

function App() {
  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

export default App;

Vue (main.js)

import { createApp } from 'vue';
import App from './App.vue';
import 'websparks-badge'; // Add this line

createApp(App).mount('#app');

Angular (main.ts)

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import 'websparks-badge'; // Add this line

platformBrowserDynamic().bootstrapModule(AppModule);

Next.js (_app.js)

import 'websparks-badge'; // Add this line

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

🎨 Badge Preview

The badge features:

• Websparks branding with shield icon
• Modern gradient background (purple to blue)
• Smooth hover animations
• Professional typography
• Fixed position in bottom-right corner
• Links to websparks.ai when clicked

🔧 Manual Control (Optional)

// Show badge manually
window.WebsparksBadge.show();

// Hide badge
window.WebsparksBadge.hide();

🌟 Perfect for

• Portfolio websites
• Client projects
• Web applications
• Static sites
• Any project built with Websparks

📄 License

MIT License - feel free to use in any project!

Built with ❤️ by Websparks