ff-widget

FFWidget - Universal Feedback Widget

Universal Web Component for collecting user feedback. Works with any framework or vanilla HTML.

✨ Features

• 🌐 Universal - Works with React, Vue, Angular, HTML, WordPress, etc.
• 🎯 Web Component - Native browser standard
• 🔄 Reactive - Auto-updates when attributes change
• 🌍 Multilanguage - English & Spanish built-in
• 🎨 Customizable - Colors, fonts, and styles
• 📱 Responsive - Mobile and desktop optimized
• 💪 Zero Dependencies - Pure vanilla JavaScript
• 🚀 Lightweight - ~15KB minified

🚀 Quick Start

HTML (Simplest)

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/ff-widget/FFWidget.js"></script>
</head>
<body>
    <ff-widget
        api-key="your-api-key"
        context="User feedback"
        product="product-123"
        language="en"
    ></ff-widget>
</body>
</html>

React

import 'ff-widget/FFWidget.js';

function App() {
  return (
    <ff-widget
      api-key="your-api-key"
      context="User feedback"
      product="product-123"
      language="en"
    />
  );
}

Vue

<template>
  <ff-widget
    :api-key="apiKey"
    :context="context"
    :product="product"
    language="en"
  />
</template>

<script>
import 'ff-widget/FFWidget.js';

export default {
  data() {
    return {
      apiKey: 'your-api-key',
      context: 'User feedback',
      product: 'product-123'
    }
  }
}
</script>

Angular

import { Component } from '@angular/core';
import 'ff-widget/FFWidget.js';

@Component({
  selector: 'app-feedback',
  template: `
    <ff-widget
      [attr.api-key]="apiKey"
      [attr.context]="context"
      [attr.product]="product"
      language="en"
    ></ff-widget>
  `
})
export class FeedbackComponent {
  apiKey = 'your-api-key';
  context = 'User feedback';
  product = 'product-123';
}

📦 Installation

NPM

npm install ff-widget

CDN

<script src="https://unpkg.com/ff-widget/FFWidget.js"></script>

Local

Download FFWidget.js and include it in your project:

<script src="path/to/FFWidget.js"></script>

🎨 Configuration

Web Component Attributes

🔧 Advanced Usage

JavaScript API (More Control)

// Create widget instance
const widget = new FFWidget({
  api_key: 'your-api-key',
  context: 'User feedback',
  product: 'product-123',
  language: 'es',
  primary_color: '#10b981'
});

// Mount widget
widget.mount('#container');

// Update configuration without destroying
widget.updateConfig({
  context: 'New context',
  language: 'en'
});

// Destroy widget
widget.destroy();

Data Attributes (HTML Static)

<div 
  data-ff-widget
  data-api-key="your-api-key"
  data-context="User feedback"
  data-product="product-123"
  data-language="es"
></div>

<script src="FFWidget.js"></script>

🎯 Use Cases

E-commerce

<!-- After checkout -->
<ff-widget
  api-key="ecommerce-key"
  context="Order #12345 completed"
  product="checkout"
  language="en"
></ff-widget>

Blog

<!-- At end of article -->
<ff-widget
  api-key="blog-key"
  context="Article: 'How to use FFWidget'"
  product="blog"
  language="en"
></ff-widget>

SaaS Application

// After user completes action
<ff-widget
  api-key="saas-key"
  context="User exported report"
  product="analytics"
  feature="export"
  language="en"
/>

📚 Documentation

• Usage Guide - Detailed usage examples
• Vanilla JS Guide - HTML/JavaScript guide
• Changelog - Version history
• Examples - Live examples

🌐 Browser Support

• ✅ Chrome 67+ (2018)
• ✅ Firefox 63+ (2018)
• ✅ Safari 13.1+ (2020)
• ✅ Edge 79+ (2020)
• ✅ Opera 64+ (2019)

Coverage: ~96% of global users

🤝 Migration from React Component

If you were using FFWidgetReact, migration is simple:

Before:

import { FFWidgetReact } from 'ff-widget';

<FFWidgetReact
  api_key="key"
  context="context"
  product="product"
  language="es"
/>

After:

import 'ff-widget/FFWidget.js';

<ff-widget
  api-key="key"
  context="context"
  product="product"
  language="es"
/>

💡 Why Web Components?

• ✅ Universal - Works everywhere
• ✅ Native - Browser standard, no framework needed
• ✅ Future-proof - Won't break with framework updates
• ✅ Lightweight - No React/Vue/Angular needed
• ✅ Simple - Less code, easier to use

🐛 Troubleshooting

Widget not appearing

// Check if Web Component is registered
console.log('Registered:', !!customElements.get('ff-widget'));

// Check if script loaded
console.log('FFWidget available:', !!window.FFWidget);

TypeScript errors in React

// Add to your types file or component
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'ff-widget': any;
    }
  }
}

📝 License

MIT © FeedForward Team

🔗 Links

• GitHub
• Issues
• NPM

🙋‍♂️ Support

• Email: support@feedforward.ar
• Documentation: https://docs.feedforward.ar
• Issues: https://github.com/feedforward/ff-widget/issues

Made with ❤️ by the FeedForward Team