Feedback widget for Vue.js

PushFeedback collects user feedback directly from your website. This guide covers installation in a Vue.js project using NPM.

Prerequisites

Before you begin, you need:

• A PushFeedback account. If you don't have one, sign up for free.
• A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the Quickstart guide.
• A Vue.js project and Node.js installed.

Installation

1. Install PushFeedback:

   npm install pushfeedback

2. Open your main Vue component or the desired Vue component where you want the feedback widget to appear. Then, incorporate the PushFeedback styles and scripts:

   <script>
   // Incorporate PushFeedback styles
   import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
   
   // Initialize the PushFeedback widget
   import 'pushfeedback/dist/pushfeedback/pushfeedback.esm.js';
   </script>

3. In the template section of your Vue component, add the following snippet:

   <template>
       <!-- Rest of your component's template -->
   
       <feedback-button 
           project="<YOUR_PROJECT_ID>" 
           button-position="bottom-right" 
           modal-position="bottom-right" 
           button-style="dark">
           Feedback
       </feedback-button>
   </template>

   Replace <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard.

4. After making these changes, navigate back to your Vue.js project root and run:

   npm run serve

   Open the website in a web browser to verify that the feedback button appears and works correctly.

Next steps

Choose what to do next:

• Customization — Adjust the widget's layout, styles, and text.
• Integrations — Forward feedback to Slack, email, Jira, and more.