Feedback widget for Vue.js
Add PushFeedback to your Vue.js site.
Prerequisites
- A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace
<YOUR_PROJECT_ID>in the examples. - A Vue.js project and Node.js installed.
Examples use @latest. Replace it with a version number to pin a release.
Configure custom elements
For Vue 3 with Vite, merge this into vite.config.js:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('feedback-'),
},
},
}),
],
});
The examples load the widget runtime from jsDelivr and import the installed stylesheet. For a local runtime, see self-hosted assets.
Installation
Floating button
npm install pushfeedback@latest
Create src/components/FeedbackWidget.vue:
<script setup>
import { onMounted } from 'vue';
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
onMounted(() => {
if (document.querySelector('script[data-pushfeedback]')) return;
const script = document.createElement('script');
script.type = 'module';
script.src =
'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
script.dataset.pushfeedback = '';
document.head.appendChild(script);
});
</script>
<template>
<feedback-button
project="<YOUR_PROJECT_ID>"
button-position="bottom-right"
modal-position="sidebar-right"
button-style="dark"
>Feedback</feedback-button
>
</template>
Import FeedbackWidget into your page component and add <FeedbackWidget /> inside the app layout.
Inline button
npm install pushfeedback@latest
Create src/components/InlineFeedback.vue:
<script setup>
import { onMounted } from 'vue';
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
onMounted(() => {
if (document.querySelector('script[data-pushfeedback]')) return;
const script = document.createElement('script');
script.type = 'module';
script.src =
'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
script.dataset.pushfeedback = '';
document.head.appendChild(script);
});
</script>
<template>
<feedback-button
project="<YOUR_PROJECT_ID>"
button-position="default"
modal-position="center"
button-style="dark"
screenshot-positioning="true"
>Feedback</feedback-button
>
</template>
Import InlineFeedback into your page component and add <InlineFeedback /> after the content.
Embedded form
npm install pushfeedback@latest
Create src/components/EmbeddedFeedback.vue:
<script setup>
import { onMounted } from 'vue';
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
onMounted(() => {
if (document.querySelector('script[data-pushfeedback]')) return;
const script = document.createElement('script');
script.type = 'module';
script.src =
'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
script.dataset.pushfeedback = '';
document.head.appendChild(script);
});
</script>
<template>
<feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>
</template>
Import EmbeddedFeedback into your page component and add <EmbeddedFeedback /> after the content.
Like and dislike buttons
npm install pushfeedback@latest
Create src/components/FeedbackThumbs.vue:
<script setup>
import { onMounted } from 'vue';
import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
onMounted(() => {
if (document.querySelector('script[data-pushfeedback]')) return;
const script = document.createElement('script');
script.type = 'module';
script.src =
'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js';
script.dataset.pushfeedback = '';
document.head.appendChild(script);
});
</script>
<template>
<div>
<p>Was this helpful?</p>
<div class="pushfeedback-thumbs-row">
<feedback-button
project="<YOUR_PROJECT_ID>"
rating="1"
button-position="default"
modal-position="center"
button-style="default"
custom-font="true"
screenshot-positioning="true"
hide-icon="true"
>
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M7 10v12" />
<path
d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z"
/>
</svg>
<span class="pushfeedback-thumb-label">Helpful</span>
</feedback-button>
<feedback-button
project="<YOUR_PROJECT_ID>"
rating="0"
button-position="default"
modal-position="center"
button-style="default"
custom-font="true"
screenshot-positioning="true"
hide-icon="true"
>
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M17 14V2" />
<path
d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z"
/>
</svg>
<span class="pushfeedback-thumb-label">Not helpful</span>
</feedback-button>
</div>
</div>
</template>
Import FeedbackThumbs into your page component and add <FeedbackThumbs /> after the content.
Each button opens the form with its rating selected. The visitor still clicks Send to submit.
Verify the installation
Run npm run build, then npm run preview for a Vite app. Open the site, send a test message, and confirm it appears in your PushFeedback project. Check allowed URLs if submission fails.