better feedback channel

modules/feedback.js

 
 
 
-/** open mail client of user with prewritten message and stats */
+/** feedback now opens a Google Form prefilled with our parameters */
 export function submitFeedback(query, bestAnswers, feedback) {
 
-  /** temporary mail adress, adjust if needed */
-  const feedbackAdress = 'huepfen-richtlinie.7r@icloud.com';
-  const timestamp = new Date().toISOString();
-  let subject = '';
-  let message = '';
+  const url = 'https://docs.google.com/forms/d/e/1FAIpQLScv6hLxUZN42pZYkW28FL3WkXZbL_dzdGo0sE-LdeJbIzTi2g/viewform?usp=pp_url';
 
   const bestAnswersAsString = Object.entries(bestAnswers)
-  .map(([question, token]) => `> Question: ${question} \n > Answer: ${token}\n`)
-  .join("\n\n");
-
-
-  if (feedback === 'good') {
-    subject = 'Positive Feedback: FAQ Search Feature';
-    message = `Hello,
-    \nI used your FAQ search feature and was pleased with the result. 
-    \nI also have some additional suggestions: ...
-    \nDetails below:
-    \nYou asked: ${query}
-    \nMost fitting responses:\n\n${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp}
-    \nKeep it up!
-    \nBest regards`;
-
-  } else if (feedback === 'bad') {
-    subject = 'Negative Feedback: FAQ Search Feature';
-    message = `Hello,
-    \nI tried used FAQ search feature, and unfortunately, I was not satisfied with this result. 
-    \nI also have some additional suggestions: ...
-    \nDetails below:
-    \nYou asked: ${query}
-    \nMost fitting responses: ${bestAnswersAsString}\nFeedback: ${feedback}\nTimestamp: ${timestamp}
-    \nI hope this feedback lets you improve the experience.
-    \nBest regards`;
-  }
+    .map(([question, token]) => `> Question: ${question}\n> Answer: ${token}`)
+    .join('\n\n');
 
+  const encodedQuery = encodeURIComponent(query);
+  const encodedBestAnswers = encodeURIComponent(bestAnswersAsString);
 
-  const newSubject = encodeURIComponent(subject);
-  const body = encodeURIComponent(message);
-  const mailtoLink = `mailto:${feedbackAdress}?subject=${newSubject}&body=${body}`;
+  const formFeedback = `entry.293085603=${feedback}`;
+  const formQuery = `entry.430302024=${encodedQuery}`;
+  const formAnswer = `entry.1738087812=${encodedBestAnswers}`;
 
-  window.location.href = mailtoLink;
+  const newUrl = `${url}&${formFeedback}&${formQuery}&${formAnswer}`;
+  window.open(newUrl, '_blank');
 }
 
-

modules/ui.js

@@ -99,14 +99,14 @@ export function drawFeedbackButtons(query, bestTokens) {
   plusButton.innerHTML = '<i class="fa-solid fa-thumbs-up"></i>';
   plusButton.className = 'feedback-button thumbs-up';
   plusButton.onclick = function () {
-    submitFeedback(query, bestTokens, 'good');
+    submitFeedback(query, bestTokens, 'Yes');
   };
 
   const minusButton = document.createElement('button');
   minusButton.innerHTML = '<i class="fa-solid fa-thumbs-down"></i>';
   minusButton.className = 'feedback-button thumbs-down';
   minusButton.onclick = function () {
-    submitFeedback(query, bestTokens, 'bad');
+    submitFeedback(query, bestTokens, 'No');
   };
 
   feedbackContainer.appendChild(plusButton);

styles.css

@@ -4,7 +4,7 @@
 
         #chatbox {
             position: sticky;
-            max-height: 900px;
+            max-height: 1200px;
             overflow: hidden;
             display: flex;
             flex-direction: column;
@@ -29,7 +29,7 @@
             left: 10px;
             padding: 10px;
             display: flex;
-            max-height: 300px;
+            max-height: 500px;
             flex-direction: column;
             overflow-x: hidden;
             z-index: -3;
@@ -89,7 +89,8 @@
             color: white;
             margin-left: 40px;
             margin: 10px 2;
-            max-width: 60%;
+            max-width: 75%;
+            font-size: 18px;
             word-wrap: break-word;
             cursor: default;
             opacity: 0;
@@ -129,6 +130,7 @@
             margin-left: 10px;
             margin: 10px 2;
             max-width: 60%;
+            font-size: 17px;
             word-wrap: break-word;
             text-align: middle;
             z-index: 100;