How to add a feedback box to your Vue.js app (and get notified on Slack)

Ali Yar Khan — Fri, 11 Oct 2024 16:41:54 +0000

Collecting feedback from users is crucial for improving your app. One way to gather valuable feedback is by integrating a feedback form directly into your Vue.js app and automating notifications via Slack. In this article, I will guide you through the steps to build a feedback box using Vue.js and set up Slack notifications for each feedback submission.

Prerequisites

Basic knowledge of Vue.js
A working Vue.js app
Slack workspace with access to the Slack API
Node.js installed on your system

Step 1: Create the Feedback Form Component

First, create a simple feedback form component in your Vue.js app. You can name it FeedbackForm.vue and place it inside your components folder.

<template>
  <div class="feedback-box">
    <h2>Give Us Your Feedback</h2>
    <form @submit.prevent="submitFeedback">
      <div class="form-group">
        <label for="feedback">Your Feedback:</label>
        <textarea v-model="feedback" id="feedback" rows="4" required></textarea>
      </div>
      <div class="form-group">
        <label for="email">Your Email (optional):</label>
        <input type="email" v-model="email" id="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedback: '',
      email: '',
      message: '',
    };
  },
  methods: {
    async submitFeedback() {
      try {
        const response = await fetch('http://localhost:3000/feedback', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            feedback: this.feedback,
            email: this.email,
          }),
        });

        if (response.ok) {
          this.message = 'Thank you for your feedback!';
          this.feedback = '';
          this.email = '';
        } else {
          this.message = 'Something went wrong. Please try again later.';
        }
      } catch (error) {
        this.message = 'Error submitting feedback. Please try again.';
      }
    },
  },
};
</script>

<style scoped>
.feedback-box {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}
.form-group {
  margin-bottom: 15px;
}
button {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
</style>

Step 2: Set Up a Backend API to Handle Feedback

Next, we need a simple backend to process the feedback and send a notification to Slack. We'll use Node.js and Express to handle this. Start by creating a new file called server.js.

npm init -y
npm install express axios

Now, create a file named server.js and add the following code:

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

app.use(express.json());

app.post('/feedback', async (req, res) => {
  const { feedback, email } = req.body;

  if (!feedback) {
    return res.status(400).json({ error: 'Feedback is required' });
  }

  const message = `New feedback received:\nFeedback: ${feedback}\nEmail: ${email || 'No email provided'}`;

  try {
    // Send notification to Slack
    await axios.post('https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK', {
      text: message,
    });

    res.status(200).json({ message: 'Feedback sent successfully' });
  } catch (error) {
    res.status(500).json({ error: 'Error sending feedback to Slack' });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Step 3: Set Up a Slack Webhook

To send feedback notifications to Slack, we need to configure an incoming webhook.

Go to the Slack API page and sign in to your workspace.
Create a new Incoming Webhook in a specific channel.
Copy the generated webhook URL and replace YOUR/SLACK/WEBHOOK in the above code with it.

Step 4: Run the Backend

Now that your backend is ready, you can start the server by running:

node server.js

Your server will now listen for feedback submissions on http://localhost:3000/feedback.

Step 5: Connect Frontend with Backend

Now, your Vue.js frontend will be able to send the feedback form data to the backend. Once the form is submitted, the feedback will be forwarded to Slack, and you’ll get a notification in your selected Slack channel.

Step 6: Customize and Deploy

You can further customize the feedback form with more fields or validations as needed. Once you’re satisfied with your feedback box, you can deploy both your Vue.js app and the backend using services like Vercel, Netlify, or Heroku.

Conclusion

By adding a feedback box to your Vue.js app and configuring Slack notifications, you make it easy for users to share their thoughts while keeping track of feedback in real-time. This setup is highly customizable and can be extended with more features, such as saving feedback to a database or adding email notifications.

DEV Community: Ali Yar Khan