1. Install the @vercel/toolbar package and link your projectInstall the package in your project using the following command: pnpm yarn npm bun

   

   pnpm i @vercel/toolbarThen link your local project to your Vercel project with the vercel link command using Vercel CLI.

   

   vercel link [path-to-directory]
2. Add the toolbar to your projectBefore using the Vercel Toolbar in a production deployment Vercel recommends conditionally injecting the toolbar. Otherwise, all visitors will be prompted to log in when visiting your site.The following example demonstrates code that will show the Vercel Toolbar to a team member on a production deployment.

   Next.js (/app)

   TypeScript

   

   'use client';

   import { VercelToolbar } from'@vercel/toolbar/next';

   functionuseIsEmployee() {

   // Replace this stub with your auth library hook

   returnfalse;

   }

   exportfunctionStaffToolbar() {

   constisEmployee=useIsEmployee();

   return isEmployee ? :null;

   }

   Next.js (/app)

   TypeScript

   

   import { Suspense,type ReactNode } from'react';

   import { StaffToolbar } from'../components/staff-toolbar';

   exportdefaultfunctionRootLayout({ children }: { children:ReactNode }) {

   return (

   {children}
   ); }
3. Managing notifications and integrations for Comments on productionUnlike comments on preview deployments, alerts for new comments won't be sent to a specific user by default. Vercel recommends linking your project to Slack with the integration, or directly mentioning someone when starting a new comment thread in production to ensure new comments are seen.

1. Navigate to your Vercel dashboard and make sure that you have selected your team from the team switcher. To manage the toolbar at the project level, ensure that you have selected the project.
2. From your dashboard, open Settings in the sidebar.
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. Once set at the team level, you can optionally choose to allow the setting to be overridden at the project level.

Disabling the toolbar

If you have noticed that the toolbar is showing up for team members on your production sites, you can disable it at either the team or project level:

1. Navigate to your Vercel dashboard and make sure that you have selected your team from the team switcher. To manage the toolbar at the project level, ensure that you have selected the project.
2. From your dashboard, open Settings in the sidebar.
3. In the General section, find Vercel Toolbar.
4. Under Production select Off from the dropdown.

Acessing the toolbar using the Vercel dashboard

You can send team members and users a production deployment with the Vercel Toolbar included from the dashboard. To do so:

1. From your dashboard, go to your project and open Projects in the sidebar. Alternatively, you can also use the deployment overview page.
2. Click the dropdown on the Visit button and select Visit with Toolbar. This will take you to your production deployment with the toolbar showing and active.

This will not show for users who have the browser extension installed, as the extension will already show the toolbar whenever you visit your production deployment unless it is disabled in team or project settings.

Accessing the toolbar using the Browser extension

Provided the Vercel toolbar is enabled for your project, any team member can use the Vercel Toolbar in your production environment by installing the Vercel Browser Extension. The extension allows you to access the toolbar on any website hosted on Vercel that your team(s) own: