FeedForward Widget - Universal Web Component for feedback collection. Works with any framework (React, Vue, Angular, HTML, etc.)
Universal Web Component for collecting user feedback. Works with any framework or vanilla HTML.
<!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>
import 'ff-widget/FFWidget.js';
function App() {
return (
<ff-widget
api-key="your-api-key"
context="User feedback"
product="product-123"
language="en"
/>
);
}
<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>
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';
}
npm install ff-widget
<script src="https://unpkg.com/ff-widget/FFWidget.js"></script>
Download FFWidget.js and include it in your project:
<script src="path/to/FFWidget.js"></script>
| 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 |
// 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();
<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>
<!-- After checkout -->
<ff-widget
api-key="ecommerce-key"
context="Order #12345 completed"
product="checkout"
language="en"
></ff-widget>
<!-- At end of article -->
<ff-widget
api-key="blog-key"
context="Article: 'How to use FFWidget'"
product="blog"
language="en"
></ff-widget>
// After user completes action
<ff-widget
api-key="saas-key"
context="User exported report"
product="analytics"
feature="export"
language="en"
/>
Coverage: ~96% of global users
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"
/>
// Check if Web Component is registered
console.log('Registered:', !!customElements.get('ff-widget'));
// Check if script loaded
console.log('FFWidget available:', !!window.FFWidget);
// Add to your types file or component
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'ff-widget': any;
}
}
}
MIT © FeedForward Team
Made with ❤️ by the FeedForward Team
FAQs
FeedForward Widget - Universal Web Component for feedback collection. Works with any framework (React, Vue, Angular, HTML, etc.)
We found that ff-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.