FeedForward Widget - Universal Web Component for feedback collection. Works with any framework (React, Vue, Angular, HTML, etc.)
npm install ff-widget
Universal Web Component for collecting user feedback. Works with any framework or vanilla HTML.
- 🌐 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
``html`
context="User feedback"
product="product-123"
language="en"
>
`tsx
import 'ff-widget/FFWidget.js';
function App() {
return (
context="User feedback"
product="product-123"
language="en"
/>
);
}
`
`vue
:context="context"
:product="product"
language="en"
/>
`
`typescript
import { Component } from '@angular/core';
import 'ff-widget/FFWidget.js';
@Component({
selector: 'app-feedback',
template:
[attr.context]="context"
[attr.product]="product"
language="en"
>
})
export class FeedbackComponent {
apiKey = 'your-api-key';
context = 'User feedback';
product = 'product-123';
}
`bash`
npm install ff-widget
`html`
Download FFWidget.js and include it in your project:
`html`
| Attribute | Type | Required | Description |
|-----------|------|----------|-------------|
| api-key | string | ✅ | API key for authentication |context
| | string | ✅ | Context describing the feedback |product
| | string | ✅ | Product ID |feature
| | string | ❌ | Feature ID (optional) |language
| | 'en' \| 'es' | ❌ | Language (default: 'en') |primary-color
| | string | ❌ | Primary color (default: '#3b82f6') |background-color
| | string | ❌ | Background color (default: '#ffffff') |text-color
| | string | ❌ | Text color (default: '#1f2937') |api-url
| | string | ❌ | API endpoint URL |
`javascript
// 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();
`
`html
data-ff-widget
data-api-key="your-api-key"
data-context="User feedback"
data-product="product-123"
data-language="es"
>
`
`html`
context="Order #12345 completed"
product="checkout"
language="en"
>
`html`
context="Article: 'How to use FFWidget'"
product="blog"
language="en"
>
`jsx`
// After user completes action
context="User exported report"
product="analytics"
feature="export"
language="en"
/>
- Usage Guide - Detailed usage examples
- Vanilla JS Guide - HTML/JavaScript guide
- Changelog - Version history
- Examples - Live examples
- ✅ Chrome 67+ (2018)
- ✅ Firefox 63+ (2018)
- ✅ Safari 13.1+ (2020)
- ✅ Edge 79+ (2020)
- ✅ Opera 64+ (2019)
Coverage: ~96% of global users
If you were using FFWidgetReact, migration is simple:
Before:
`tsx
import { FFWidgetReact } from 'ff-widget';
context="context"
product="product"
language="es"
/>
`
After:
`tsx
import 'ff-widget/FFWidget.js';
context="context"
product="product"
language="es"
/>
`
- ✅ 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
`javascript
// Check if Web Component is registered
console.log('Registered:', !!customElements.get('ff-widget'));
// Check if script loaded
console.log('FFWidget available:', !!window.FFWidget);
`
`typescript``
// Add to your types file or component
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'ff-widget': any;
}
}
}
MIT © FeedForward Team
- Email: support@feedforward.ar
- Documentation: https://docs.feedforward.ar
- Issues: https://github.com/feedforward/ff-widget/issues
---
Made with ❤️ by the FeedForward Team