ff-widget

v3.2.6

Published

25 days ago

FeedForward Widget - Universal Web Component for feedback collection. Works with any framework (React, Vue, Angular, HTML, etc.)

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

| 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 |

🔧 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

🔗 Links

🙋‍♂️ Support

Email: [email protected]
Documentation: https://docs.feedforward.ar
Issues: https://github.com/feedforward/ff-widget/issues

Made with ❤️ by the FeedForward Team