charmaine
README.md

Feedback Widget Demo

This project demonstrates a reusable feedback widget library for Val Town projects.

Features

  • 🎨 Clean, minimizable UI that floats at the bottom-right
  • 📱 Mobile-responsive design
  • 💾 Automatically saves feedback to feedback.md
  • ⚡ Easy to integrate - just 2 lines of code
  • 🎪 Smooth animations and hover effects

How to Use in Your Project

  1. Copy feedbackWidget.ts into your project
  2. Import and use in your main entry point:
import { renderFeedbackWidget, handleFeedbackSubmission } from "./feedbackWidget.ts";

// Add to your HTML template
const html = `
  <body>
    <!-- Your content -->
    ${renderFeedbackWidget()}
  </body>
`;

// Add feedback route
app.post("/feedback", async (c) => {
  return await handleFeedbackSubmission(c.req.raw, import.meta.url);
});
  1. Create a feedback.md file in your project root

That's it! Users can now submit feedback through the widget.

Project Structure

  • feedbackWidget.ts - The reusable widget library
  • index.ts - Demo implementation
  • feedback.md - Where feedback gets stored
  • README.md - This file

Demo

Visit the live demo to see the widget in action: Demo Link

Customization

The widget can be easily customized by modifying the CSS in feedbackWidget.ts. Change colors, positioning, animations, and more to fit your project's design.