# Feedback widget for VuePress

> For the complete documentation index, see [llms.txt](/llms.txt)

> PushFeedback collects user feedback directly from your website. This guide covers installation in a VuePress project.

PushFeedback collects user feedback directly from your website. This guide covers installation in a VuePress project.

## Prerequisites

Before you begin, you need:

- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
- A VuePress site and Node.js installed.

## Installation

### Floating button

![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png)

1. Install PushFeedback:

    ```console
    npm install pushfeedback
    ```

    :::info
    If you're using yarn as your package manager, run `yarn add pushfeedback` instead of the npm command above.
    :::

1. Create a client app enhancement file. In your `.vuepress` directory, create a file named `enhanceApp.js` (or `clientAppEnhance.js` for VuePress 2.x):

    **For VuePress 1.x** (`.vuepress/enhanceApp.js`):

    ```js

    export default ({ Vue, options, router, siteData }) => { if (typeof window !== 'undefined') { import('pushfeedback/loader').then(module => { module.defineCustomElements(window);});}};
    ```

    **For VuePress 2.x** (`.vuepress/client.js`):

    ```js

    export default defineClientConfig({ async enhance({ app, router, siteData }) { if (typeof window !== 'undefined') { const { defineCustomElements } = await import('pushfeedback/loader');
                defineCustomElements(window);}},});
    ```

1. Create a global component to display the feedback button. Create a file `.vuepress/components/FeedbackButton.vue`:

    ```vue
    <template>
        <feedback-button 
            project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">
            Feedback
        </feedback-button>
    </template>

    <script>
    export default { name: 'FeedbackButton'};
    </script>
    ```

    Replace `<YOUR_PROJECT_ID>` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project).

1. Add the component to your theme's layout or to individual pages. For a global approach, modify your theme's `Layout.vue` file or create a custom layout:

    ```vue
    <template>
        
            <Content />
            <FeedbackButton />
        
    </template>

    <script>

    export default { components: { FeedbackButton}};
    </script>
    ```

1. Start your VuePress project by running `npm run dev` or `yarn dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site.

### Inline button

![Example page with an inline Feedback button](./images/inline-button-preview.png)

Install `pushfeedback` if it is not already in your project:

```console
npm install pushfeedback
```

Create `.vuepress/components/InlineFeedback.vue` with the stylesheet, loader, and widget:

```vue
<script setup>

onMounted(async () => { const { defineCustomElements } = await import('pushfeedback/loader');
  defineCustomElements(window);});
</script>

<template>
  <feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark">Feedback</feedback-button>
</template>
```

Render `InlineFeedback` where you want it in the page content.

### Embedded form

![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png)

Install `pushfeedback` if it is not already in your project:

```console
npm install pushfeedback
```

Create `.vuepress/components/EmbeddedFeedback.vue` with the stylesheet, loader, and widget:

```vue
<script setup>

onMounted(async () => { const { defineCustomElements } = await import('pushfeedback/loader');
  defineCustomElements(window);});
</script>

<template>
  <feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>
</template>
```

Render `EmbeddedFeedback` where you want it in the page content.

### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons}

![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png)

Install `pushfeedback` if it is not already in your project:

```console
npm install pushfeedback
```

Create `.vuepress/components/FeedbackThumbs.vue` with the stylesheet, loader, and widget:

```vue
<script setup>

onMounted(async () => { const { defineCustomElements } = await import('pushfeedback/loader');
  defineCustomElements(window);});
</script>

<template>
  
    Was this helpful?
    
    <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true">
      Helpful
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" /></svg>
    </feedback-button>
    <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true">
      Not helpful
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" /></svg>
    </feedback-button>
    
  
</template>
```

Render `FeedbackThumbs` after the article content.

## Next steps

Choose what to do next:

- [Customization](/category/customization) — Adjust the widget's layout, styles, and text.
- [Integrations](/category/integrations) — Forward feedback to Slack, email, Jira, and more.