Made in Builder.io

Upcoming webinar with Figma: Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Tip: While in beta, commenting is available on all free and paid plans.

With the Comments feature in Builder, you can share ideas with teammates and collaborate right in your Builder project. You can start threads, add to threads, and delete threads and comments. You can comment on the page as a whole or on a specific block.

This article describes commenting permissions, the different kinds comments, and shows you how to view, edit, and delete comments.

You can find the Comments tab by clicking the chat bubble icon next to the Data tab. Here's how the Comments tab looks before any comments have been added:

All user roles can comment in Builder. Organization Administrators can delete any comment or thread while comment authors can delete only their own comments and threads.

Organization Administrators can edit any comments as well, and the comment's author can edit their own comments.

More information about Builder permissions can be found in Roles and Permissions.

A notification bell icon at the top of the Visual Editor indicates that there are comments when accompanied by a blue dot.

To open the Comments tab, click the chat bubble icon next to the Data tab button.

Alternatively, open the Layers tab, which displays a chat icon next to any layer that has a comment on it.

If you have configured your editor in three columns, the Comments tab will be available from the right side of the editor, as illustrated in the following image.

In addition, you can display the Comments by clicking the Notifications icon to open the fly-out menu. This menu only displays if there are comments. If there are no comments, the notification bell icon is grayed out and inactive. Page-level comments are at the top of the Comments fly-out menu with block-level comments listed below.

The following image shows a blue dot on the Notifications bell icon, indicating that there are comments, and a list of comments in the fly-out menu.

It also shows the Layers tab, which you can always check for comments.

When you click on a comment in the Layers tab, the page scrolls to and highlights the block associated with the comment.

You can tag other users in your comments by typing the @ symbol and selecting their name from the dropdown list that opens. The tagged user is notified by email when you save a comment that tags them.

Here's a typical email notification to anyone tagged in a comment:

To add a comment that applies to an entire page, take the following steps:

  1. Click away from any block so that no blocks are selected.
  2. On the Comments tab, add your comment and click the Add Comment button or press Enter.

To add comments in Builder, take the following steps:

  1. Click on a block to select it. This associates your comment with that particular block.
  2. In the Comments tab, type your comment and press Enter or click the Add Comment button.

When you click the Add Comment button, you start a thread if there are no other comments. If there are comments, you add your comment to the existing thread. The following image shows the beginning of a thread.

This screenshot shows the Reply text field and button. To reply, type your comments into the text field and click the Add Reply button to respond to the thread.

Clicking the ellipsis opens an Edit/Delete menu. To edit your comment, select Edit from the menu.

Make your edits and click the Save button.

If you selected Delete from the fly-out menu, a Delete Comment dialog opens asking you to confirm that you want to permanently delete the comment. To do so, click the red Delete button.

To delete a thread, click the ellipsis in the thread and select Delete thread from the menu that opens. Only an Organization Administrator or the thread's original poster can delete a thread.

Sharing ideas asynchronously with comments can help your team work more efficiently. For more ideas on collaborating, check out Working with Versions, which shows you how to make different versions of a page.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy