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

Muhideen Mujeeb Adeoye — Wed, 09 Oct 2024 04:08:17 +0000

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:

Set up a Formbricks account
Create and customize a survey
Integrate Formbricks into your Vue.js app
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.

I built a platform to check service uptime and availability

Muhideen Mujeeb Adeoye — Wed, 06 Dec 2023 14:05:51 +0000

So I got bored and think of what I can build to easy my workflow and here we are, Statussync.dev

Why Statussync

As a developer most of our workflow depends on one service or the other, take Github as example you either use Github as VCS or as a service you build a web app on the challenge now is that any time some part of GH service is down e.g API, Copilot, Pull request, Issues etc there is no way of you know that happened in order to know you either have to go to X (Twitter) and see the trending topics or go to GH status page to keep track of what's wrong.

Let's imagine you have more than one service you used in your web-app e.g Github/GH API, Stripe, Cloudflare, Discord API, Telegram API, Digitalocean etc keeping up with all of these services become a job on it own but what if we can streamline the whole process so that you can do all in a single dashboard.

Statussync, a web platform that aggregates all third-party service uptime and incident reports into a single dashboard notifies you when a service is down and aids in the documentation of past incidents. With custom service and monitoring (Coming soon) you will be able to add your own service which user can subscribe to.

Here I explained how Statussync works in detail

Tech Stack

Remix
Prisma
TailwindCSS
Supabase
Lemonsqueezy
Digialocean App platform

Launching soon on Product Hunt https://www.producthunt.com/products/statussync

More update coming soon after successful launch on PH, wish me best of luck.

Statussync.dev

DEV Community: Muhideen Mujeeb Adeoye