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