How-to
3 min read

Add the Vercel Toolbar to your production environment

Learn how to add the Vercel Toolbar to your production environment to enable commenting and collaboration.
Table of Contents

To enable the toolbar in your production environment, you can add it using the Vercel Chrome Extension, the command menu, or the @vercel/toolbar package.

You can add the Vercel Toolbar to your production environment using the Vercel Chrome Extension. The extension allows you to access the toolbar on any website hosted on Vercel.

To add the Vercel Toolbar to your production environment:

  1. Install the Vercel Chrome Extension from the Chrome Web Store
  2. Ensure that you are logged in to your Vercel account on vercel.com. You must be signed in for the extension to know which domains you own
  3. Ensure that you have deployed to production. Older deployments do not support injection through the browser extension

To enable the toolbar on production environments from the command menu:

  1. Open a preview deployment of your project
  2. Select the menu icon in the toolbar
  3. Scroll down to Enable Vercel Toolbar in Production and select it
  4. Choose the domain you want to enable the toolbar on

To add the Vercel Toolbar to your development or production environments, follow the steps below:

  1. Install the package using the following command:

    pnpm
    yarn
    npm
    pnpm i @vercel/toolbar

    Then link your local project to your Vercel project with the vercel link command using Vercel CLI.

    terminal
    vercel link [path-to-directory]
  2. Before 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 on a production deployment.

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    components/staff-toolbar.tsx
    'use client';
    import { VercelToolbar } from '@vercel/toolbar/next';
    import { useIsEmployee } from 'lib/auth'; // Your auth library
     
    export function StaffToolbar() {
      const isEmployee = useIsEmployee();
      return isEmployee ? <VercelToolbar /> : null;
    }
    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/layout.tsx
    import { Suspense } from 'react';
    import { StaffToolbar } from '@components/staff-toolbar';
     
    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
            {children}
            <Suspense>
              <StaffToolbar />
            </Suspense>
          </body>
        </html>
      );
    }
  3. Unlike 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

Last updated on June 20, 2024