Skip to main content

​
Install

npm install @feedbackfun/js

​
Basic setup

Initialize the widget once in your root App.vue: 
<!-- src/App.vue -->
<script setup>
import { onMounted } from 'vue';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';

onMounted(() => {
  new FeedbackfunWidget('YOUR_API_KEY');
});
</script>

<template>
  <RouterView />
</template>

​
With user identification

If your app has authentication, sync the current user with the widget: 
<!-- src/App.vue -->
<script setup>
import { onMounted, watch } from 'vue';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';
import { useAuthStore } from './stores/auth'; // your Pinia store

const auth = useAuthStore();

onMounted(() => {
  new FeedbackfunWidget('YOUR_API_KEY');
});

watch(
  () => auth.user,
  (user) => {
    if (user) {
      window.feedbackfun?.setUserInfo({
        id: user.id,
        email: user.email,
        name: user.name,
      });
    } else {
      window.feedbackfun?.clearUserInfo();
    }
  },
  { immediate: true }
);
</script>

<template>
  <RouterView />
</template>

​
Composable

Extract widget logic into a reusable composable: 
// src/composables/useFeedbackFun.ts
import { onMounted, watch, type Ref } from 'vue';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';

interface User {
  id: string;
  email?: string;
  name?: string;
}

export function useFeedbackFun(userRef: Ref<User | null>) {
  onMounted(() => {
    new FeedbackfunWidget('YOUR_API_KEY');
  });

  watch(
    userRef,
    (user) => {
      if (user) {
        window.feedbackfun?.setUserInfo({ id: user.id, email: user.email, name: user.name });
      } else {
        window.feedbackfun?.clearUserInfo();
      }
    },
    { immediate: true }
  );
}
Use it in App.vue: 
<script setup>
import { computed } from 'vue';
import { useAuthStore } from './stores/auth';
import { useFeedbackFun } from './composables/useFeedbackFun';

const auth = useAuthStore();
const user = computed(() => auth.user);

useFeedbackFun(user);
</script>

<template>
  <RouterView />
</template>

​
TypeScript

Add the global type declaration for window.feedbackfun: 
// src/types/feedbackfun.d.ts
interface Window {
  feedbackfun?: {
    setPrimaryColor(color: string): void;
    setPrimaryForeground(color: string): void;
    setUserInfo(user: { id: string; email?: string; name?: string; [key: string]: any }): void;
    clearUserInfo(): void;
  };
}