Qatchup Feedback Widget

A lightweight, customizable feedback widget built with SolidJS that integrates seamlessly with websites to collect user feedback. The widget appears as a button in the lower right corner of the site and, when clicked, displays a feedback submission window above the button.

Demo

Try the widget in action: https://drewling.github.io/qatchup-widget/demo.html

Features

• Multiple feedback form types (general feedback, star ratings, bug reports, feature requests)
• Customizable form fields (text, email, textarea, file uploads, ratings)
• Shadow DOM encapsulation for style isolation
• Responsive design that works across devices
• Lightweight implementation with minimal dependencies
• Easy integration via CDN or NPM

Installation

Via NPM

npm install @drewling/qatchup-widget

Via CDN

No installation required, simply use the script tag with the CDN URL.

Usage

NPM Module

import { Widget, QatchupService } from '@drewling/qatchup-widget'

// Initialize with your Qatchup app ID
const widget = new Widget(new QatchupService('your-app-id'))

// Initialize the widget to fetch settings
await widget.init()

// Create a container for the widget
const container = document.createElement('div')
document.body.appendChild(container)

// Render the widget
widget.render({ container })

// When no longer needed
// widget.destroy()

// You can also remove the container if it's no longer needed
// container.remove()

CDN Script

<script type="module">
  import { Widget, QatchupService } from 'https://cdn.qatchup.com/qatchup.js'

  // QatchupService uses the app ID as a parameter
  const widget = new Widget(new QatchupService('your-app-id'))

  // Initialize the widget to fetch settings from the backend
  widget
    .init()
    .then(() => {
      // Inserts an empty div at the end of the body
      // Alternatively, you can specify another container
      const container = document.createElement('div')
      document.body.appendChild(container)

      // Renders our application inside the Shadow DOM container
      widget.render({ container })

      // Once the widget is no longer needed, we can clean it up
      // widget.destroy()

      // You can also remove the container if it's no longer needed
      // container.remove()
    })
    .catch(e => console.error(e))
</script>

API Reference

Widget Class

The main class for initializing and managing the feedback widget.

// Create a new instance with the service
const widget = new Widget(service)

// Initialize the widget to fetch settings
await widget.init()

// Render the widget in a container
widget.render({ container })

// Destroy the widget when no longer needed
widget.destroy()

QatchupService

Service class for handling API communication.

// Initialize with your app ID
const service = new QatchupService('your-app-id')

For Testing/Development

A MockService is available in the testing directory to simulate backend interactions:

import { Widget } from '@drewling/qatchup-widget'
import { MockService } from '/path/to/MockService.ts'

const widget = new Widget(new MockService())

Development

Requirements

• Node.js v22.x

Local Setup

# Clone the repository
git clone https://github.com/drewling/qatchup-widget.git
cd qatchup-widget

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run check

# Build for production
npm run build

# Preview production build
npm run preview

Technologies

• SolidJS - UI framework
• Vanilla Extract - CSS-in-TS styling
• Vite - Build tool and development server
• TypeScript - Type-safe JavaScript

Browser Support

The widget supports all modern browsers with ES module support.