Managing the visibility of the Vercel Toolbar

When the toolbar is enabled, you'll be able to view it on any preview or enabled environment on the bottom-right corner of your screen. By default, we display the toolbar in a shrunken state, with three icons:

The third icon is dynamic and depends on your deployment setup:

To display the toolbar in full, hover over the toolbar:

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 Vercel Toolbar.
4. Under each environment (Preview and Production), select either On or Off from the dropdown to determine the visibility of the Vercel Toolbar for that environment.
5. You can optionally choose to allow the setting to be overridden at the project level.

To disable the toolbar project-wide:

1. From your dashboard, select the project you want to enable or disable Vercel Toolbar for.
2. Navigate to Settings tab.
3. In the General section, find Vercel Toolbar.
4. Under each environment (Preview and Production), select either an option from the dropdown to determine the visibility of Vercel Toolbar for that environment. The options are:
   • Default: Respect team-level visibility settings.
   • On: Enable the toolbar for the environment.
   • Off: Disable the toolbar for the environment.

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 toolbar 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 the toolbar for an individual branch, add the following to the environment variables for the desired preview branch:

VERCEL_PREVIEW_FEEDBACK_ENABLED=1

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

VERCEL_PREVIEW_FEEDBACK_ENABLED=0

To use the toolbar with preview deployments that have custom alias domains, you must opt into the toolbar 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