Feedback widget for VitePress

Add PushFeedback to your VitePress site.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• A VitePress site and Node.js installed.

Examples use @latest. Replace it with a version number to pin a release.

Configure custom elements

Merge this into .vitepress/config.mjs:

import { defineConfig } from 'vitepress';

export default defineConfig({
  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 .vitepress/theme/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>

Use it in .vitepress/theme/index.js:

import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import FeedbackWidget from './FeedbackWidget.vue';

export default {
  extends: DefaultTheme,
  Layout: () =>
    h(DefaultTheme.Layout, null, {
      'layout-bottom': () => h(FeedbackWidget),
    }),
};

Inline button

npm install pushfeedback@latest

Create .vitepress/theme/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>

Use it in .vitepress/theme/index.js:

import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import InlineFeedback from './InlineFeedback.vue';

export default {
  extends: DefaultTheme,
  Layout: () =>
    h(DefaultTheme.Layout, null, {
      'doc-after': () => h(InlineFeedback),
    }),
};

Embedded form

npm install pushfeedback@latest

Create .vitepress/theme/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>

Use it in .vitepress/theme/index.js:

import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import EmbeddedFeedback from './EmbeddedFeedback.vue';

export default {
  extends: DefaultTheme,
  Layout: () =>
    h(DefaultTheme.Layout, null, {
      'doc-after': () => h(EmbeddedFeedback),
    }),
};

Like and dislike buttons

npm install pushfeedback@latest

Create .vitepress/theme/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>

Use it in .vitepress/theme/index.js:

import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import FeedbackThumbs from './FeedbackThumbs.vue';

export default {
  extends: DefaultTheme,
  Layout: () =>
    h(DefaultTheme.Layout, null, {
      'doc-after': () => h(FeedbackThumbs),
    }),
};

Each button opens the form with its rating selected. The visitor still clicks Send to submit.

Verify the installation

Run npm run docs:build, then npm run docs:preview. Open the site, send a test message, and confirm it appears in your PushFeedback project. Check allowed URLs if submission fails.

Next steps

See Layout, Styles, and Text for widget options.