<!--
Sitemap:
- [What is Vocs](/guide/what-is-vocs): Learn what Vocs provides for documentation sites
- [Getting Started](/guide/getting-started): Install Vocs and create your first documentation site
- [Writing Docs with AI](/guide/writing-docs-with-ai): Use an AI agent to create and maintain Vocs documentation
- [Project Structure](/guide/structure): Overview of the structure of a Vocs project
- [Markdown Extensions](/guide/markdown-extensions): Features and syntax of Markdown in Vocs
- [Code & Syntax Highlighting](/guide/syntax-highlighting): Rich markup and annotations for code
- [Code Snippets](/guide/code-snippets): Include and reuse code in Markdown
- [Markdown Snippets](/guide/markdown-snippets): Include other Markdown files in MDX
- [Asset Handling](/guide/asset-handling): Manage images, fonts, icons, and other docs assets
- [Frontmatter](/guide/frontmatter): Configure page metadata, layouts, search, and UI visibility
- [Using React in Markdown](/guide/react): Compose MDX pages with React components
- [Twoslash](/guide/twoslash): Add type-aware annotations to code examples
- [Sidebar & Top Navigation](/guide/navigation): Keep docs navigation synced with routes
- [Theming](/guide/theming): Customize colors, typography, spacing, logos, and code themes
- [Tailwind CSS](/guide/tailwind): Use Tailwind utilities in Vocs pages and components
- [Layouts](/guide/layouts): Choose and customize page shells for your docs
- [Dynamic OG Images](/guide/dynamic-og-images): Generate social preview images from page metadata
- [Feedback](/guide/feedback): Collect page-level feedback from readers
- [Changelog Generation](/guide/changelog-generation): Fetch release notes and render a changelog page
- [MCP Server](/guide/mcp-server): Expose your docs and source code to AI assistants
- [AI Support](/guide/ai-support): Make your documentation easier for AI assistants to read
- [Site Configuration](/reference/site-config): Reference for options accepted by defineConfig
- [Components](/reference/components): Reference for the public React components exported from Vocs
- [Hooks](/reference/hooks): Reference for the React hooks exported from Vocs
- [Changelog](/guide/changelog): Release history for Vocs
-->

# Feedback \[Collect page-level feedback from readers]

Vocs includes a built-in feedback widget that displays "Was this helpful?" below the page outline on desktop and in the footer on mobile. When users submit feedback, Vocs sends it to your configured adapter, such as Slack.

:::code-group

<div data-title="Preview">
  <FeedbackWidget />
</div>

:::

## Setup

Enable feedback by adding a feedback adapter to your config:

```ts twoslash [vocs.config.ts]
import { defineConfig, Feedback } from 'vocs/config'

export default defineConfig({
  feedback: Feedback.slack(),
})
```

## Slack Adapter

The Slack adapter sends feedback to a Slack channel via an [incoming webhook](https://api.slack.com/messaging/webhooks).

### Creating a Slack App

1. Go to [api.slack.com/apps](https://api.slack.com/apps) and click **Create New App**
2. Choose **From scratch**
3. Name your app and select your workspace
4. In the sidebar, go to **Incoming Webhooks**
5. Toggle **Activate Incoming Webhooks** to On
6. Click **Add New Webhook to Workspace**
7. Select the channel where feedback should be posted
8. Copy the webhook URL

### Configuration

Set the webhook URL as an environment variable:

```bash
SLACK_FEEDBACK_WEBHOOK=https://hooks.slack.com/services/...
```

The Slack adapter reads from `SLACK_FEEDBACK_WEBHOOK` by default. You can also pass it explicitly:

```ts twoslash [vocs.config.ts]
import { defineConfig, Feedback } from 'vocs/config'

export default defineConfig({
  feedback: Feedback.slack({
    webhookUrl: process.env.MY_CUSTOM_WEBHOOK,
  }),
})
```

### Feedback Format

When a user submits feedback, Slack receives a formatted message with:

* **Sentiment**: Positive (👍) or negative (👎)
* **Page URL**: The page where feedback was submitted
* **Category**: What the user liked or what went wrong
* **Message**: Optional free-form message from the user

## Custom Adapter

Create a custom adapter for other destinations:

```ts [vocs.config.ts]
import { defineConfig, Feedback } from 'vocs/config'

export default defineConfig({
  feedback: Feedback.from({
    type: 'custom',
    async submit(data) {
      // data.helpful: boolean
      // data.category?: string
      // data.message?: string
      // data.pageUrl: string
      // data.timestamp: string (ISO format)
      
      await fetch('https://your-api.com/feedback', {
        method: 'POST',
        body: JSON.stringify(data),
      })
    },
  }),
})
```

## Disabling Feedback

To disable the feedback widget globally, omit the `feedback` option from your config or set it to `undefined`.

To disable the feedback widget on a specific page, use the `showFeedback` frontmatter option:

```mdx
---
showFeedback: false
---

# Page Title

This page won't show the feedback widget.
```
