Install
npm install @feedbackfun/js
Basic setup
Initialize the widget once in your rootApp.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 }
);
}
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 forwindow.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;
};
}