How-to
3 min read

Managing the Vercel Toolbar

Learn how to enable or disable the Vercel Toolbar for your team, project, and session.
Table of Contents

Vercel Toolbar is available on all plans

To disable the toolbar by default for all projects in your team:

  1. Navigate to your Vercel dashboard and make sure that you have selected your team from the scope selector
  2. From your dashboard, select the Settings tab
  3. In the General section, find Comments
  4. Choose either On or Off from the dropdown
  5. You can optionally choose to allow the setting to be overridden at the project level
The dashboard setting to enable or disable comments at the account level.
The dashboard setting to enable or disable comments at the account level.

To disable the toolbar project-wide:

  1. From your dashboard, select the project you want to enable or disable the Toolbar for
  2. Navigate to Settings tab
  3. In the General section, find Comments
  4. Choose either Default (to respect team-level visibility settings) or Disabled (to disable the toolbar project-wide)
The dashboard setting to enable or disable comments in a project.
The dashboard setting to enable or disable comments in a project.

To disable the toolbar, you can do the following:

  1. Ensure you are signed in to the Vercel Toolbar
  2. From the toolbar, select the menu item (☰)
  3. From the list, select Disable for Session or Hide Toolbar.

This action will hide the toolbar in the current browser tab. To show the comments again, open a new browser session.

You can also show or hide the toolbar by using ⌘ + . on MacOS (Ctrl + . on Windows).

You can use the x-vercel-skip-toolbar header to prevent interference with automated end-to-end tests:

  1. Add the x-vercel-skip-toolbar header to the request sent to the preview deployment URL
  2. Optionally, you can assign the value 1 to the header. However, presence of the header itself triggers Vercel to disable the toolbar

You can use Vercel's preview environment variables to manage the toolbar for specific branches or environments

To enable comments for an individual branch, add the following to the environment variables for the desired preview branch:

.env
VERCEL_PREVIEW_FEEDBACK_ENABLED=1

To disable comment for an individual branch, set the above environment variable's value to 0:

.env
VERCEL_PREVIEW_FEEDBACK_ENABLED=0

To use the toolbar with preview deployments that have custom alias domains, you must opt into comments explicitly in your project settings on the dashboard.

If you have a Content Security Policy (CSP) configured, you may need to adjust the CSP to enable access to the Vercel Toolbar or Comments.

You can make the following adjustments to the Content-Security-Policy response header:

  • Add the following to script-src (Most commonly used):
      script-src https://vercel.live
  • Add the following to connect-src:
      connect-src https://vercel.live wss://ws-us3.pusher.com
  • Add the following to img-src:
      img-src https://vercel.live https://vercel.com data: blob:
  • Add the following to frame-src:
      frame-src https://vercel.live
  • Add the following to style-src:
      style-src https://vercel.live 'unsafe-inline'
  • Add the following to font-src:
      font-src https://vercel.live https://assets.vercel.com
Last updated on July 20, 2024