DEV Community

Cover image for How to add a feedback box to your Vue.js app (and get notified on Slack)
Muhideen Mujeeb Adeoye
Muhideen Mujeeb Adeoye

Posted on

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

Create a survey

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

Craft survey question

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.

Customize your survey card design

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

Survey type

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 trigger

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.

Response Options

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

Connect your website to formbrick

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.

Connect your website to formbrick

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");
Enter fullscreen mode Exit fullscreen mode

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

Website connect successful to formbricks

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.

Connect slack to formbrick

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

Formbrick slack setup page

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

Formbrick slack setup page

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

Link slack channel to formbrick survey

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

Voila

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.

Top comments (0)