Feedback Widget Demo

\n 🎯 Focus: This version ONLY writes to feedback.md using the Val Town SDK. Submit feedback below and check the file!\n

\n\n

🧪 Test the Widget

Click the blue \"💬 Feedback\" button in the bottom-right corner and submit feedback.

\n\n

🔑 Environment Variables

This widget automatically detects and uses your Val Town API token.

valtown (primary, built-in)
VAL_TOWN_API_KEY2 (fallback, if you set it)

\n\n ${renderFeedbackWidget()}\n \n \n `;\n\n return c.html(html);\n});\n\n// Handle feedback submissions by calling the function from the other file\napp.post(\"/feedback\", async (c) => {\n console.log(\"=== FEEDBACK ROUTE HIT ===\");\n try {\n // UPDATED: Pass the import.meta.url to the handler\n const result = await handleFeedbackSubmission(c.req.raw, import.meta.url);\n console.log(\"Handler result status:\", result.status);\n return result;\n } catch (error) {\n console.error(\"Route error:\", error);\n return c.json({\n error: 'Route Error',\n message: error.message\n }, 500);\n }\n});\n\n// Catch-all for any other route\napp.all(\"*\", (c) => {\n return c.text(`Not found: ${c.req.path}`, 404);\n});\n\nexport default app.fetch;",[140],"39103326-5d0e-11f0-8faf-0224a6c84d84","feedbackWidget.ts","f3e16555-00f0-4749-acde-75740f34c566",["D",1752097611588],"import ValTown from \"npm:@valtown/sdk\";\n\n// renderFeedbackWidget() function is unchanged and remains here...\nexport function renderFeedbackWidget(): string {\n return `\n \n\n \n\n \n `;\n}\n\n/**\n * REWRITTEN to use the explicit vt.vals.files.create method\n */\nexport async function handleFeedbackSubmission(request: Request, valUrl: string): Promise {\n try {\n // Step 1: Initialize the Val Town client\n const token = Deno.env.get(\"VALTOWN_API_KEY2\") || Deno.env.get(\"valtown\");\n if (!token) {\n throw new Error(\"Server configuration error: API token is missing.\");\n }\n const vt = new ValTown({ bearerToken: token });\n\n // Step 2: Find the ID of the current val\n const valName = valUrl.match(/dcm31--([\\w-]+)\\.web\\.val\\.run/)?.[1];\n if (!valName) {\n // Fallback for local dev or different URL structures\n const pathParts = new URL(valUrl).pathname.split(\"/\");\n const valNameFromPath = pathParts[pathParts.length - 1];\n if (!valNameFromPath) throw new Error(\"Could not determine val name from URL.\");\n }\n\n const { data: vals } = await vt.me.vals.list();\n const currentVal = vals.find(v => v.name === valName || v.name === \"feedback_widget_demo\");\n\n if (!currentVal) {\n throw new Error(`Could not find a val named '${valName}' or 'feedback_widget_demo'.`);\n }\n const valId = currentVal.id;\n\n // Step 3: Parse feedback from the request\n const { feedback } = await request.json();\n if (!feedback || typeof feedback !== \"string\") {\n return new Response(JSON.stringify({ error: \"Invalid feedback content\" }), { status: 400 });\n }\n\n // Step 4: Read the existing feedback.md file (using fs.read is fine for this)\n let currentContent = \"\";\n const feedbackFilePath = \"feedback.md\";\n try {\n currentContent = await vt.fs.read(feedbackFilePath);\n } catch (error) {\n if (error.message.includes(\"404\")) {\n console.log(\"feedback.md not found, creating a new one.\");\n currentContent = \"# Feedback\\n\\n---\\n\\n\";\n } else {\n throw error; // Re-throw other errors\n }\n }\n\n // Step 5: Format and append the new entry\n const timestamp = new Date().toISOString();\n const userAgent = request.headers.get(\"user-agent\") || \"Unknown\";\n const newEntry = `**${timestamp}**\\n\\n${feedback.trim()}\\n\\n*User Agent: ${userAgent}*\\n\\n---\\n\\n`;\n const updatedContent = currentContent + newEntry;\n\n // Step 6: Write the file using the explicit `create` method\n await vt.vals.files.create(valId, {\n path: feedbackFilePath,\n type: \"file\",\n content: updatedContent,\n });\n\n // Step 7: Return a success response\n return new Response(\n JSON.stringify({\n success: true,\n message: \"Feedback saved!\",\n }),\n {\n status: 200,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"💥 Feedback submission failed:\", error, error.stack);\n return new Response(\n JSON.stringify({\n error: `Failed to save feedback: ${error.message}`,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n}",[146],"391031a0-5d0e-11f0-8faf-0224a6c84d84","feedback.md","70369e8b-f6e1-4f22-b37c-b585dd90307f",["D",1752097611588],"# Feedback\n\nThis file will collect user feedback submitted through the feedback widget.\n\n---\n\n",[152],"39102bd8-5d0e-11f0-8faf-0224a6c84d84","README.md","1c10bfee-9c77-44d3-831e-19efce43675a",["D",1752097611588],"# Feedback Widget Demo\n\nThis project demonstrates a reusable feedback widget library for Val Town projects.\n\n## Features\n\n- 🎨 Clean, minimizable UI that floats at the bottom-right\n- 📱 Mobile-responsive design \n- 💾 Automatically saves feedback to feedback.md\n- ⚡ Easy to integrate - just 2 lines of code\n- 🎪 Smooth animations and hover effects\n\n## How to Use in Your Project\n\n1. Copy `feedbackWidget.ts` into your project\n2. Import and use in your main entry point:\n\n```typescript\nimport { renderFeedbackWidget, handleFeedbackSubmission } from \"./feedbackWidget.ts\";\n\n// Add to your HTML template\nconst html = `\n \n \n ${renderFeedbackWidget()}\n \n`;\n\n// Add feedback route\napp.post(\"/feedback\", async (c) => {\n return await handleFeedbackSubmission(c.req.raw, import.meta.url);\n});\n```\n\n3. Create a `feedback.md` file in your project root\n\nThat's it! Users can now submit feedback through the widget.\n\n## Project Structure\n\n- `feedbackWidget.ts` - The reusable widget library\n- `index.ts` - Demo implementation \n- `feedback.md` - Where feedback gets stored\n- `README.md` - This file\n\n## Demo\n\nVisit the live demo to see the widget in action: [Demo Link](https://dcm31--6ed59f4e5b9411f09f2bf69ea79377d9.web.val.run)\n\n## Customization\n\nThe widget can be easily customized by modifying the CSS in `feedbackWidget.ts`. Change colors, positioning, animations, and more to fit your project's design.",[158],"pulls","forks","envVars",{"_169":131,"_171":131},"connections",{"_169":55,"_170":55},"count","unfilledCount","emptyCount",{"_20":157,"_13":158,"_124":159,"_126":-5,"_127":21,"_128":131,"_129":51,"_22":190,"_29":55,"_132":106,"_134":161,"_136":40,"_137":-5,"_178":191,"_94":192},{"_20":151,"_13":152,"_124":153,"_126":-5,"_127":21,"_128":131,"_129":51,"_22":187,"_29":55,"_132":106,"_134":155,"_136":40,"_137":-5,"_178":188,"_94":189},{"_20":145,"_13":146,"_124":147,"_126":-5,"_127":21,"_128":131,"_129":51,"_22":184,"_29":55,"_132":133,"_134":149,"_136":40,"_137":-5,"_178":185,"_94":186},{"_20":139,"_13":140,"_124":49,"_126":-5,"_127":21,"_128":131,"_129":51,"_22":181,"_29":55,"_132":142,"_134":143,"_136":40,"_137":-5,"_178":182,"_94":183},{"_20":122,"_13":123,"_124":125,"_126":-5,"_127":21,"_128":30,"_129":51,"_22":177,"_29":131,"_132":133,"_134":135,"_136":40,"_137":-5,"_178":179,"_94":180},["D",1752097660286],"children",[],[123],["D",1752097611588],[],[140],["D",1752097611588],[],[146],["D",1752097611588],[],[152],["D",1752097611588],[],[158],["D",1752097611588],{"_11":12,"_92":88},{"_11":12,"_86":-5,"_87":88,"_46":47,"_89":90,"_91":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_33":-5,"_78":79,"_80":81,"_82":83,"_84":14,"_85":12},"ctx",{"_71":-5,"_114":230,"_231":232,"_233":234,"_235":40,"_236":40,"_237":40,"_238":51,"_239":-5,"_240":-7,"_241":-7,"_242":55,"_243":40,"_244":40,"_245":-5,"_246":40,"_247":40,"_248":40,"_249":-5},"ENV",{"_201":202,"_203":204,"_205":26,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

📝 Feedback Widget Demo

🧪 Test the Widget

🔑 Environment Variables

Branches1

Branches
1