FFWidget - Universal Feedback Widget


About

feedfrwd-widget-floating is an alternative version of the classic FeedForward widget, designed with enhanced features and a less intrusive floating design. This widget provides a more comprehensive feedback collection experience while maintaining a minimal footprint on your website.

$3

- 📸 Screenshot Capture: Users can capture and annotate screenshots directly within the widget, making it easier to provide visual context with their feedback
- ✉️ Email Collection: Optional email field allows users to provide their contact information for follow-up responses
- 🎨 Floating Design: Less intrusive floating button design that expands into a full feedback form, minimizing disruption to the user experience
- 🎯 Enhanced UX: Improved three-stage feedback flow with topic selection (Problem, Suggestion, Comment) for better feedback categorization

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

$3

``html






api-key="your-api-key"
context="User feedback"
product="product-123"
language="en"
>


`

$3

`tsx
import 'feedfrwd-widget-floating/FFWidget.js';

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

$3

`vue



`

$3

`typescript
import { Component } from '@angular/core';
import 'feedfrwd-widget-floating/FFWidget.js';

@Component({
selector: 'app-feedback',
template:
[attr.api-key]="apiKey"
[attr.context]="context"
[attr.product]="product"
language="en"
>

})
export class FeedbackComponent {
apiKey = 'your-api-key';
context = 'User feedback';
product = 'product-123';
}
`

📦 Installation

$3

`bash
npm install feedfrwd-widget-floating
`

$3

`html

`

$3

Download FFWidget.js and include it in your project:

`html

`

🎨 Configuration

$3

| 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') |
| position | 'down-right' \| 'down-left' \| 'up-right' \| 'up-left' \| 'custom' | ❌ | Widget position (default: 'down-right') |
| custom-style | string | ❌ | Custom CSS styles (JSON string or CSS string). Only used when position="custom" |
| primary-color | string | ❌ | Primary color (default: '#3b82f6') |
| background-color | string | ❌ | Background color (default: '#ffffff') |
| text-color | string | ❌ | Text color (default: '#1f2937') |
| font-family | string | ❌ | Font family (default: 'Inter, -apple-system, ...') |
| logo or logo-base64 | string | ❌ | Custom logo in base64 format (default: uses built-in logo) |
| api-url | string | ❌ | API endpoint URL |

🔧 Advanced Usage

$3

`javascript
// Create widget instance
const widget = new FFWidget({
api_key: 'your-api-key',
context: 'User feedback',
product: 'product-123',
language: 'es',
primary_color: '#10b981',
logo: 'data:image/png;base64,iVBORw0KGgo...' // Optional: custom logo
});

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

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

// Destroy widget
widget.destroy();
`

$3

The widget supports multiple positioning options:

#### Predefined Positions

`html

position="down-right"
...
/>


position="down-left"
...
/>


position="up-right"
...
/>


position="up-left"
...
/>
`

#### Custom Position

For advanced positioning, use position="custom" with custom-style:

Using JSON string:
`html
position="custom"
custom-style='{"top": "50%", "left": "50%", "transform": "translate(-50%, -50%)"}'
...
/>
`

Using CSS string:
`html
position="custom"
custom-style="top: 50%; left: 50%; transform: translate(-50%, -50%);"
...
/>
`

In React/TypeScript:
`tsx
const centerStyles = JSON.stringify({
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
});

position="custom"
custom-style={centerStyles}
...
/>
`

Note: If position="custom" is set without custom-style, the widget defaults to down-right position.

$3

`html



`

🎯 Use Cases

$3

`html

api-key="ecommerce-key"
context="Order #12345 completed"
product="checkout"
language="en"
>
`

$3

`html

api-key="blog-key"
context="Article: 'How to use FFWidget'"
product="blog"
language="en"
>
`

$3

`jsx
// After user completes action
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:
`tsx
import { FFWidgetReact } from 'feedfrwd-widget-floating';

api_key="key"
context="context"
product="product"
language="es"
/>
`

After:
`tsx
import 'feedfrwd-widget-floating/FFWidget.js';

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

$3

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

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

$3

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

📝 License

MIT © FeedForward Team

🔗 Links

- GitHub
- Issues
- NPM

🙋‍♂️ Support

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

---

Made with ❤️ by the FeedForward Team