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

TL;DR

This guide walks you through adding a feedback box to your Vue.js app using Formbricks, an open-source survey platform. You'll learn how to:

1. Set up a Formbricks account
2. Create and customize a survey
3. Integrate Formbricks into your Vue.js app
4. Connect Slack to receive instant notifications when users submit feedback

By the end, you'll have a powerful feedback system that helps you understand your customers' needs and respond quickly to their input.

What is formbricks

Formbricks is a privacy-first XM Suite built on the largest open source survey platform worldwide. Gather feedback on websites, apps and everywhere else to understand what your customers need.

Setup formbricks account for free

To get started with formbricks, you need to create an account. You can do this by self host formbricks or continue with formbricks cloud by visiting the "Sign Up" page.

Create a survey

To create a survey, find from the list of available templates or create a new survey from scratch.

Craft your survey question and add options to the question. Formbricks provide you an option to select different types of questions like multiple choice, rating, text, and many more.

Formbricks allows you to customize your survey from card design, to form styling, question styling and many more.

After customizing your survey, you can set the survey setting like survey type, survey trigger, survey type, and many more. Survey type is basically how you intent to collect survey whether as an embedded into web app or standalone survey (link survey).

Survey can be triggered based on user action like on page load, on exit intent, on click, on scroll, on time delay, and many more. With Formbricks action you can define how you want your survey to be triggered.

Formbricks provide you with an option to set response options like response limit, schedule survey and many more.

Connect your website to formbrick

To connect your web app to formbrick after create a survey, click the connect button and this will take you to a setup page where you can copy the code snippet and paste it in your Vue.js app using your favourite package manager.

Copy the code snippet and paste it in your main.ts file, then reload your app and you should see the feedback box in your app.

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import formbricks from "@formbricks/js/website";

if (typeof window !== "undefined") {
  formbricks.init({
    environmentId: "<ENVIRONMENT_ID>",
    apiHost: "<FORMBRICKS_API_HOST>",
  });
}

createApp(App).mount("#app");

In case you are self hosting formbricks, apiHost will be the url of your formbricks instance.

Connect slack to formbricks

When your customer submit a survey, you get notified through email but in order to get notify on slack, you need to connect slack to formbrick using formbrick integration.

Click on the connect button and this will take you to a slack setup page, then click connect to slack.

After connecting slack to formbrick, go back to formbrick slack setup page where you get to link slack channel to formbrick.

Select the slack channel, formbrick survey, question to be included in the message, and additional settings. Then click on link channel.

Voila, you are done, now when a user submit a survey, you get notify on slack.

Conclusion

So far, you have learned how to:

• Create a survey
• Connect your Vue.JS app to formbrick
• Connect slack to formbrick using formbricks integration
• Link slack channel to formbrick survey

And don't forget to star formbricks on github.