Feedbackly Widget

Lightweight feedback widget for collecting user feedback with screenshot support.

• < 5KB gzipped
• Zero dependencies (html2canvas loaded on-demand for screenshots)
• 100% TypeScript
• Works everywhere - NPM, CDN, any framework

Installation

NPM

npm install feedbackly-widget

CDN

<script>
  (function(w,d){
    w.fb=w.fb||function(){(w.fb.q=w.fb.q||[]).push(arguments)};
    var s=d.createElement('script');
    s.src='https://cdn.feedbackly.cc/widget.js';
    s.async=1;
    d.head.appendChild(s);
  })(window,document);

  fb('init', 'YOUR_API_KEY');
</script>

Usage

ES Modules

import { init } from 'feedbackly-widget'

init({
  apiKey: 'YOUR_API_KEY',
  position: 'bottom-right',
  primaryColor: '#22c55e',
  buttonText: 'Feedback',
})

CommonJS

const { init } = require('feedbackly-widget')

init({
  apiKey: 'YOUR_API_KEY',
})

React

import { useEffect } from 'react'
import { init, destroy } from 'feedbackly-widget'

function App() {
  useEffect(() => {
    init({ apiKey: 'YOUR_API_KEY' })
    return () => destroy()
  }, [])

  return <div>Your app</div>
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { init, destroy } from 'feedbackly-widget'

onMounted(() => init({ apiKey: 'YOUR_API_KEY' }))
onUnmounted(() => destroy())
</script>

Class-based usage

import { FeedbacklyWidget } from 'feedbackly-widget'

const widget = new FeedbacklyWidget({
  apiKey: 'YOUR_API_KEY',
  position: 'bottom-left',
  primaryColor: '#3b82f6',
  textColor: '#ffffff',
  buttonText: 'Send Feedback',
  showScreenshot: true,
  showBranding: false,
  onSubmit: (feedback) => {
    console.log('Feedback submitted:', feedback)
  },
  onError: (error) => {
    console.error('Feedback error:', error)
  },
})

widget.init()

// Later, to remove the widget:
widget.destroy()

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your Feedbackly API key | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Widget position | | primaryColor | string | '#22c55e' | Primary button color | | textColor | string | '#000000' | Button text color | | buttonText | string | 'Feedback' | Trigger button text | | showScreenshot | boolean | true | Enable screenshot capture | | showBranding | boolean | true | Show "Powered by Feedbackly" | | apiUrl | string | Feedbackly API | Custom API endpoint | | onSubmit | function | - | Callback on successful submit | | onError | function | - | Callback on error |

Self-hosting

You can point the widget to your own backend:

init({
  apiKey: 'YOUR_API_KEY',
  apiUrl: 'https://your-api.com/feedback',
  configUrl: 'https://your-api.com/widget/config',
})

License

MIT