feedfrwd-widget-floating

v1.3.0

Published

8 days ago

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

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.

Key Differences from the Classic Widget

📸 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

HTML (Simplest)

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

React

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

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

Vue

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

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

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

Angular

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

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

📦 Installation

NPM

npm install feedfrwd-widget-floating

CDN

<script src="https://unpkg.com/feedfrwd-widget-floating/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') | | 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

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',
  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();

Position Configuration

The widget supports multiple positioning options:

Predefined Positions

<!-- Bottom-right (default) -->
<feedfrwd-widget-floating
  position="down-right"
  ...
/>

<!-- Bottom-left -->
<feedfrwd-widget-floating
  position="down-left"
  ...
/>

<!-- Top-right (expands downward) -->
<feedfrwd-widget-floating
  position="up-right"
  ...
/>

<!-- Top-left (expands downward) -->
<feedfrwd-widget-floating
  position="up-left"
  ...
/>

Custom Position

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

Using JSON string:

<feedfrwd-widget-floating
  position="custom"
  custom-style='{"top": "50%", "left": "50%", "transform": "translate(-50%, -50%)"}'
  ...
/>

Using CSS string:

<feedfrwd-widget-floating
  position="custom"
  custom-style="top: 50%; left: 50%; transform: translate(-50%, -50%);"
  ...
/>

In React/TypeScript:

const centerStyles = JSON.stringify({
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)'
});

<feedfrwd-widget-floating
  position="custom"
  custom-style={centerStyles}
  ...
/>

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

Data Attributes (HTML Static)

<div 
  data-feedfrwd-widget-floating
  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 -->
<feedfrwd-widget-floating
  api-key="ecommerce-key"
  context="Order #12345 completed"
  product="checkout"
  language="en"
></feedfrwd-widget-floating>

Blog

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

SaaS Application

// After user completes action
<feedfrwd-widget-floating
  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 'feedfrwd-widget-floating';

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

After:

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

<feedfrwd-widget-floating
  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('feedfrwd-widget-floating'));

// 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 {
      'feedfrwd-widget-floating': any;
    }
  }
}

📝 License

🔗 Links

🙋‍♂️ Support

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

Made with ❤️ by the FeedForward Team