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;",[133],"3d386768-5cf8-11f0-82ea-0224a6c84d84","feedbackWidget.ts","e8c5ba83-c188-41f9-b453-d7cda8c86e9d",["D",1752088169643],"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}",[140],"2be8ab5a-5d0f-11f0-8a80-0224a6c84d84","feedback.md","2ca2a34f-91ca-47ce-bf98-f9178e97da9b",["D",1752098019094],5,"# Feedback\n\nThis file will collect user feedback submitted through the feedback widget.\n\n---",[146],"3d385d2c-5cf8-11f0-82ea-0224a6c84d84","README.md","cf6c4f82-9dcf-4076-b915-05e627fb3752",["D",1752088169643],"# 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.",[153],"pulls","branches","forks","envVars",{"_165":134,"_167":41},"connections",{"_165":41,"_166":41},"count","unfilledCount","emptyCount",{"_18":152,"_20":153,"_116":154,"_118":-5,"_119":67,"_120":134,"_122":37,"_22":186,"_64":41,"_125":98,"_127":156,"_129":26,"_130":-5,"_174":187,"_87":188},{"_18":145,"_20":146,"_116":147,"_118":-5,"_119":67,"_120":65,"_122":37,"_22":183,"_64":149,"_125":98,"_127":150,"_129":26,"_130":-5,"_174":184,"_87":185},{"_18":139,"_20":140,"_116":141,"_118":-5,"_119":67,"_120":134,"_122":37,"_22":180,"_64":41,"_125":126,"_127":143,"_129":26,"_130":-5,"_174":181,"_87":182},{"_18":132,"_20":133,"_116":35,"_118":-5,"_119":67,"_120":134,"_122":37,"_22":177,"_64":41,"_125":136,"_127":137,"_129":26,"_130":-5,"_174":178,"_87":179},{"_18":114,"_20":115,"_116":117,"_118":-5,"_119":67,"_120":121,"_122":37,"_22":173,"_64":124,"_125":126,"_127":128,"_129":26,"_130":-5,"_174":175,"_87":176},["D",1752097487658],"children",[],[115],["D",1752088169643],[],[133],["D",1752088169643],[],[140],["D",1752098019094],[],[146],["D",1752088169643],[],[153],["D",1752088169643],{"_16":17,"_85":81},{"_16":17,"_79":-5,"_80":81,"_32":33,"_82":83,"_84":26},{"_64":65,"_20":66,"_18":67,"_68":19,"_69":-5,"_70":-5,"_71":72,"_73":74,"_75":76,"_77":21,"_78":17},"ctx",{"_57":-5,"_106":226,"_227":228,"_229":230,"_231":26,"_232":26,"_233":26,"_234":37,"_235":-5,"_236":-7,"_237":-7,"_238":41,"_239":26,"_240":26,"_241":-5,"_242":26,"_243":26,"_244":26,"_245":-5},"ENV",{"_197":198,"_199":200,"_201":66,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225},"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

Search