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;",[],[192],{"_103":200,"_95":201,"_156":202,"_158":-5,"_159":137,"_160":136,"_162":163,"_105":203,"_100":161,"_165":186,"_167":204,"_169":22,"_170":-5,"_171":205,"_98":206},"560aed04-5d0e-11f0-866c-0224a6c84d84","new-file-6114.tsx","102609ea-425c-4fdc-95ee-cb336b36e8b8",["D",1752097660286],"// Pinning the SDK version to match the working example\nimport ValTown from \"npm:@valtown/sdk\";\n\nconst main = async () => {\n try {\n console.log(\"▶️ Starting combined Read & Write test...\");\n\n // 1. Authenticate\n const token = Deno.env.get(\"VALTOWN_API_KEY2\");\n if (!token) {\n console.error(\"❌ Error: VALTOWN_API_KEY2 is not set.\");\n return;\n }\n const vt = new ValTown({ bearerToken: token });\n console.log(\"✅ SDK Initialized.\");\n\n // 2. Find the project ID using the method we know works\n const { data: vals } = await vt.me.vals.list();\n const projectVal = vals.find((v) => v.name === \"feedback_widget_demo\");\n if (!projectVal) {\n console.error(\"❌ Error: Could not find val 'feedback_widget_demo'.\");\n return;\n }\n const valId = projectVal.id;\n console.log(`✅ Found project ID: ${valId}`);\n\n // 3. READ the file using the method from Steve's example\n const feedbackFilePath = \"feedback.md\";\n let currentContent = \"\";\n let fileExists = false;\n try {\n console.log(\n `📖 Reading '${feedbackFilePath}' using vt.projects.files.getContent...`,\n );\n const response = await vt.projects.files.getContent(valId, {\n path: feedbackFilePath,\n });\n currentContent = await response.text();\n fileExists = true;\n console.log(\"✅ Read successful.\");\n } catch (error) {\n if (error.message.includes(\"404\")) {\n console.log(\"📝 File not found, will create it.\");\n currentContent = \"# Feedback\\n\\n---\\n\\n\";\n fileExists = false;\n } else {\n throw error; // Let the main catch block handle other errors\n }\n }\n\n // 4. APPEND the new content\n const newEntry = `Append successful at ${\n new Date().toISOString()\n }.\\n\\n---\\n\\n`;\n const updatedContent = currentContent + newEntry;\n console.log(\"✅ Content prepared for writing.\");\n\n // 5. WRITE the file using the create/update logic from our tests\n if (fileExists) {\n console.log(\n \"🔄 File exists. Attempting to UPDATE using vt.vals.files.update...\",\n );\n await vt.vals.files.update(valId, {\n path: feedbackFilePath,\n content: updatedContent,\n });\n console.log(\"✅ Success! File updated.\");\n } else {\n console.log(\n \"📝 File does not exist. Attempting to CREATE using vt.vals.files.create...\",\n );\n await vt.vals.files.create(valId, {\n path: feedbackFilePath,\n type: \"file\",\n content: updatedContent,\n });\n console.log(\"✅ Success! File created.\");\n }\n } catch (error) {\n console.error(\"❌ An error occurred:\", error.message);\n console.error(error.stack);\n }\n};\n\n// Run the main function\nmain();",[],[201],"files",[153,174,181,190,199],"counts",{"_211":32,"_212":161,"_213":32,"_214":161},"pulls","branches","forks","envVars","contents",[],{"_103":175,"_95":99,"_156":176,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":218,"_100":32,"_165":166,"_167":178,"_169":22,"_170":-5,"_98":219},["D",1752097611588],[99],"upstreamProject",{"_103":145,"_95":222,"_111":223,"_112":-5,"_109":110,"_23":224},"feedback_widget_demo","Demo of reusable feedback widget library",{"_93":225,"_129":226},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","upstreamBranch",{"_103":140,"_105":229,"_230":231,"_95":43,"_138":145,"_100":232,"_139":-5,"_141":-5,"_233":234,"_107":-5,"_150":22,"_109":110,"_149":225,"_16":147,"_148":222},["D",1751935284859],"updatedAt",["D",1752103308678],49,"lockfileKey","1752107958387-esm.town_v_dcm31_feedback_widget_demo@49-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":241,"_151":246,"_207":262,"_166":263,"_215":265,"_266":267,"_270":22,"_271":-5,"_272":161,"_273":274,"_275":276},{"_103":104,"_95":96,"_105":242,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":243,"_131":244,"_134":245,"_150":22},["D",1752097611588],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[247,250,253,256,259],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":164,"_100":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":248,"_98":249},[],[155],{"_103":175,"_95":99,"_156":176,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":177,"_100":32,"_165":166,"_167":178,"_169":22,"_170":-5,"_171":251,"_98":252},[],[99],{"_103":182,"_95":183,"_156":184,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":185,"_100":32,"_165":186,"_167":187,"_169":22,"_170":-5,"_171":254,"_98":255},[],[183],{"_103":191,"_95":192,"_156":193,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":194,"_100":32,"_165":195,"_167":196,"_169":22,"_170":-5,"_171":257,"_98":258},[],[192],{"_103":200,"_95":201,"_156":202,"_158":-5,"_159":137,"_160":136,"_162":163,"_105":203,"_100":161,"_165":186,"_167":204,"_169":22,"_170":-5,"_171":260,"_98":261},[],[201],[247,250,253,256,259],{"_103":175,"_95":99,"_156":176,"_158":-5,"_159":137,"_160":161,"_162":163,"_105":218,"_100":32,"_165":166,"_167":178,"_169":22,"_170":-5,"_98":264},[99],[],"upstream",{"_103":140,"_105":268,"_230":269,"_95":43,"_138":145,"_100":232,"_139":-5,"_141":-5,"_233":234,"_107":-5,"_150":22,"_109":110,"_149":225,"_16":147,"_148":222},["D",1751935284859],["D",1752103308678],"showCompareCallout","pull","ahead","behind",8,"templates",[],"actionData","errors"]

📝 Feedback Widget Demo

🧪 Test the Widget

🔑 Environment Variables