dcm31/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 using the correct Val Town SDK methods
⚡ Easy to integrate - just 2 lines of code
🎪 Smooth animations and hover effects
✅ Robust file handling with proper create/update logic

Recent Updates

✅ Fixed file writing: Now uses the correct vt.vals.files.getContent() for reading and proper create/update logic
✅ Better error handling: Improved logging and error messages
✅ Reliable operation: Adopted working implementation from test file

How to Use in Your Project

Copy feedbackWidget.ts into your project
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);
});

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