Comments

Comments on a Preview Deployment of the Vercel homepage.

Comments allow Teams and invited participants to give direct feedback on Preview Deployments. Comments can be added to any part of the UI, opening discussion threads that can be linked to Slack threads.

Pull request owners, comment creators, and participators in comment threads will receive email notifications alerting them to new activity. Sharing can be enabled so people outside of your Team who have access to the Preview Deployment will be able to leave feedback as well.

When changes are pushed to a PR, and a new Preview Deployment has been generated, a popup modal in the bottom-right corner will prompt you to refresh your view.

The popup modal that alerts you when you are viewing an outdated Preview Deployment. Select the Refresh button to refresh your view.

Comments are visible over your project's UI at the Preview Deployment URL.

When you open a Preview Deployment with comments enabled, there will be a toolbar near the bottom of your browser that will prompt you to log into your Vercel account to leave a comment. You can drag this toolbar anywhere.

The comments toolbar in a Preview Deployment.

After successfully logging in, the toolbar will display buttons for:

• Leaving a comment
• Checking the Inbox to see all comments in the Preview Deployment
• Sharing the Preview Deployment URL
• Opening the options menu

Comments on each page are represented by the author's Vercel profile picture, allowing you to see at a glance which Team members and participants have left feedback.

Participants who are online will appear in the menu bar. Offline participants will appear in the toolbar with grey profile pictures.

To enable comments, navigate to your project dashboard in Vercel. In your project's Settings tab, select On in the dropdown menu under the Comments section.

The dashboard setting to enable comments in a project.

You can also enable or disable comments with environment variables.

To allow comments from people outside your Team, enable sharing within the Preview Deployment you want to share.

To toggle sharing, select the Share icon in the comments toolbar. In the popup modal that appears, toggle the switch next to Team Members. The text should change to Anyone with the link.

This will enable anyone you share the link with to provide feedback after logging in. You can then copy the share URL provided, which is the same as the Preview Deployment URL, to allow external participants to offer feedback.

The Sharing popup modal.

If sharing is not enabled, only people within your Vercel Team will be able to log in and comment.

People you share a Preview Deployment with will not be automatically added to your Vercel Team.

If you want to log into comments on a Preview Deployment that doesn't have comments sharing enabled, you can request access. To do so, you must be part of the organization that owns the project in the git provider the project is hosted on.

If you are part of the Vercel Team that owns the project in Vercel, you will be able to log in without requesting access. Check which teams you're on here.

Read our docs on requesting access, and ensure you've joined our suggested teams.

You must be logged in to create a comment.

You can press c to enable the comment placement cursor. Alternatively, select the speech bubble button in the comments toolbar. You can then select a location to place your comment with your cursor.

You can use @ to mention Team members and alert them to your comment. For example, you might want to request Jennifer's input by writing "Hey @Jennifer, how do you feel about this?"

A comment using the @ symbol to mention someone.

You can add emojis by entering : (the colon symbol) into your comment input box, then entering the name of the emoji. For example, add a smile by entering :smile:. As you enter the name of the emoji you want, suggestions will be offered in a popup modal above the input box. You can select one of the suggestions with your cursor.

Emojis appearing after the : symbol is used.

You can add screenshots to your comments with Vercel's chrome extension. Access the chrome extension in the preferences menu.

Every new comment placed on a page begins a thread. The comment author, PR owner, and anyone mentioned or participating in the conversation will see the thread listed in their Inbox. The Inbox can be opened by selecting the button in the comments menu bar. A small red badge will indicate how many new notifications there are, if any have been added since you last checked.

You can move the Inbox to the left or right side of the screen by selecting the top of the Inbox modal and dragging it.

By default, activity within a comment thread triggers an email notification for all participants in the thread. PR owners will also receive an email notification for all new comment threads that are created.

To disable notifications, select the options button with the ellipses (three dots) icon to open the options menu. Select Preferences to open the preferences modal. Choose either All, Replies & Mentions, or Never under the Notifications section.

To check notifications within a Preview Deployment, select the Inbox button on the comments menu bar.

Sometimes, issues appear on a webpage for certain browsers and devices, but not for others. It's also possible for users to leave comments on a preview while viewing an outdated deployment.

To get around this issue, you can hover your cursor over a comment's timestamp to view information about the commenter's browsing session when they made the comment. When a person leaves a comment on a preview, the following information about their session is viewable:

• Browser and browser version
• Window dimensions in pixels
• Device pixel ratio
• Which deployment they were viewing

A comment's browsing session information.

You can resolve comments by selecting the ☐ Resolve checkbox that appears under each thread or comment. You can access this checkbox by selecting a comment wherever it appears on the page, or by selecting the thread associated with the comment in the Inbox.

Participants in a thread will receive an email notification when that thread is resolved.

To see more comment options, select the menu bar button with the ellipses (three dots). This button opens the options menu.

The options menu.

When logged in, the options menu will include:

• Pull request information: View the PR that generated the Preview Deployment you're currently viewing
• View Project: Open your project's Vercel dashboard page
• Hide Interface: Hide the comments interface, including the menu bar, Inbox, and all comments. Refresh the page or use ⌘ + . (ctrl + . on Windows) to re-enable. You can use the same keyboard shortcut to activate this setting
• Disable for Session: Hide the comments interface in the active browser tab. This is useful when you don't want comments to appear during a browsing session. You can open the Preview URL in a new browser tab to re-enable the comments interface. Refreshing the page will not re-enable comments
• Give Feedback: Send feedback to Vercel about the comments feature
• Add Slack Integration: Connect a slack channel to comments on the Preview Deployment you're viewing. Learn more about Vercel's Slack beta app.
• Preferences: Customize when you get notifications and more
• Logout: Log out of comments in the Preview Deployment you're viewing. This will not navigate you away from the Preview Deployment or hide the comments menu bar

When logged out, you will only have the Disable for Session, Give Feedback, and Log In options.

When logged into comments, you'll find a Preferences button in the options menu. In this menu, you can update three settings:

• Notifications: Set when you'll get email notifications for comments activity in the Preview Deployment you're viewing
• Theme: Select your color theme
• Chrome Extension: Add Vercel's extension to your browser so you can easily attach screenshots to your comments
• Reset Onboarding: See tooltips above the comments toolbar that will walk you through what each button on the bar does

Comments are available for projects using any Git provider. Popular providers such as BitBucket and GitLab are supported automatically, and all other providers are supported using the Vercel CLI. For the best experience, we recommend using GitHub.

Pull requests (PRs) with Preview Deployments enabled receive generated PR messages from Vercel bot. These PR messages contain the Preview Deployment URL.

By using GitHub with comments enabled, Vercel bot's generated PR comment will also display an Add your feedback URL, which lets people visit the Preview Deployment URL and automatically log in. Vercel bot's comment also tracks how many comments have been resolved.

Vercel will also add a non-blocking check to PRs with comments enabled. This check reminds the author of any unresolved comments.

A message from Vercel bot in a GitHub PR.

Seamlessly continue conversations in both the Preview Deployment and connected Slack channels with our Vercel Slack Beta app.

Using this app to connect PRs to Slack channels will cause new comments to create corresponding Slack threads. These threads will be synced between both the Preview Deployment and Slack so that the entire discussion can be viewed and responded to on either platform.

Your custom Slack emojis will also be on Preview Deployments that have been integrated with one of your Slack channels. You can search for them by typing : (the colon symbol), then inputting the name of the emoji.

Custom emojis appearing after the : symbol is used.

To get started, check out our Vercel Slack Beta app in the Vercel Integrations Marketplace. You can select the Add Integration button from within the Marketplace, then select which Team and project the integration should be scoped to.

On the integration configuration page, select Per Project so that notifications are scoped to one project. Enable comments under Preview Events. Finally, select Add Integration near the bottom of the form to integrate comment threads from your selected project to your selected Slack channel.

The Vercel Slack Beta integration UI.

When new comments are created on a PR, the Vercel Slack Beta app will announce it in a post in the subscribed Slack channels. The Slack post will include a link to the newly-created comment thread, as well as a preview of the text of the first comment in the thread. A ✅ Resolve button near the bottom of the Slack post will allow you to resolve the comment thread without viewing it.

The Vercel Slack Beta app announcing a new thread in a Slack channel.

When a thread is resolved, the Vercel Slack Beta app will announce it in a post in the subscribed Slack channels. A 🎉 Reopen button near the bottom of the Slack post will allow you to reopen the comment thread to continue the discussion.

The Vercel Slack Beta app announcing that a user has resolved a thread in a Preview Deployment.

Replies within the linked Slack thread will also exist in the comment thread on the Preview Deployment. Likewise, new replies in the comment thread will appear in the linked Slack thread. Edits to any messages in the Preview Deployment or in Slack will be reflected on both platforms.

A Slack thread linked to a comment thread on a Preview Deployment.

Using the project settings menu is not the only way to enable or disable comments. This section teaches you how to toggle comments on or off for branches, enable them project-wide with environment variables, and more.

Enabling comments project-wide opens a new communication channel that could disrupt your current feedback and iteration workflow. Enabling or disabling comments on specific branches allows you to take advantage of comments while controlling when this new style of collaboration is possible.

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

VERCEL_PREVIEW_FEEDBACK_ENABLED=1

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

VERCEL_PREVIEW_FEEDBACK_ENABLED=0

You can enable or disable comments project-wide with project environment variables. Navigate to your project's environment variables in your Vercel dashboard and add the VERCEL_PREVIEW_FEEDBACK_ENABLED variable.

Set to value 1 if you want it enabled, or 0 if you want it disabled.

Environment variables in a Vercel project's dashboard settings.

Our comments feature is designed to make iteration and development easier, so we've set it to automatically get out of your way when necessary. If your Preview Deployment is being tested in Google Lighthouse, or is visited by a bot or headless browser, the comments UI will not be injected into the DOM.

To manually opt out of comments while visiting a Preview Deployment, you can:

• Select the Hide Interface or Disable for Session options in the comments menu toolbar. Doing so will hide the comments interface in the active browser tab. Opening the Preview Deployment in a new tab will restore the comments interface

• To avoid interference with things like automated end-to-end tests, add the x-vercel-skip-toolbar header to the request sent to the Preview Deployment URL. You can set the value to 1, but the value will not be read; sending this header at all will cause the comments toolbar to be disabled

Comments are not currently supported on main or master branches. To use comments, you must open a pull request on a branch in your favorite Git provider.