Moez Bouhlel @lejenome

Recently, I wanted to add a feedback form to my resume page to help my friends review it. I was using GitHub pages to host my static web site and I didn't want to host the server side of the feedback on a different server. So I was looking for a simple solution that works well with my static website. Most of the available ones were either paid or have too many unneeded features.

At the end, I decided to use my Slack team to receive feedbacks. It does not require any third-party library or any server side code. And it's very simple to implement:

  1. Create a Slack team if you don't have one.
  2. Add an Incoming Webhook URL to a channel on your team. It's a simple URL that you can send feedbacks to.
  3. Finally, add your client side implementation. This is a simple one:
1 <form id="feedback">
2     <textarea name="text" required></textarea>
3     <input type="submit" value="send feedback"></input>
4 </form>
 1 let form = document.getElementById("feedback");
 2 form.addEventListener("submit", function(e) {
 3     e.preventDefault();
 4     fetch(YOUR_WEBHOOK_URL, {
 5         method: "POST", // You should use POST method
 6         body: JSON.stringify({
 7             text: form.text.value, // the feedback message
 8             parse: "none", // tell Slack it's not a formated text
 9         });
10     });
11 });

Improvements:

You can add more entries to the send JSON. Check Slack documentation for more details. The most useful ones are username and icon_emoji.

You can set different a username and different a icon_emoji entry for every page. For example, you send this JSON from your resume page:

1 {
2     "text"       : "THE FEEDBACK MESSAGE",
3     "parse"      : "none",
4     "username"   : "resume",
5     "icon_emoji" : ":briefcase:"
6 }