Setup

Paid Feature

This feature is only available in paid plans. Learn More

Team Collaboration is configured entirely through unlayer.init(). The Comments button appears in the action bar only when all of the requirements below are met.

---

Requirements

Requirement	How
Plan with Team Collaboration	Your project's plan must include the collaboration entitlement. See pricing.
Feature flag	Pass features: { collaboration: true } — the feature is off by default.
Project ID	Pass your projectId so threads are scoped to your project.
Design ID	Pass a designId that is stable and unique per design. Threads are attached to it — without it, the feature stays hidden.
User identity	Pass a user with a stable id. Users can browse threads anonymously, but creating comments requires an identified user.

---

Example

unlayer.init({
  id: 'editor',
  projectId: 1234,
  designId: 'design-5678', // your unique, stable ID for this design
  user: {
    id: 76,
    name: 'Jane Doe',
    email: 'jane.doe@acme.com',
    avatar: 'https://your-app.com/avatars/jane.png',
    signature: 'e0bdb1f5cc...', // recommended: HMAC identity verification
  },
  features: {
    collaboration: true,
  },
});

Once the builder session starts, open threads for the design load automatically and the Comments button shows a badge with the open-thread count.

---

Configuration reference

designId

Threads are stored against the designId, not the design content. Use the same identifier every time you load that design — typically your database's primary key for it. If the designId changes between sessions, previous comments will not appear.

user

The user object identifies the comment author:

Property	Required	Description
id	Yes	A stable, unique identifier for the user. Used for thread ownership — users can only edit or delete their own comments.
name	Recommended	Displayed next to each comment.
email	No	The user's email address.
avatar	No	Image URL shown beside comments. When omitted, initials from name are shown instead.
signature	Recommended	HMAC signature of the user id, generated on your server.

See End-User Identification for details on the user object and how to generate the signature for identity verification.

Storing data in your own backend

Threads and comments are stored in Unlayer's cloud database by default. To keep them in your own database instead — whether for data ownership, residency, or compliance — register providers and callbacks; the builder then uses your storage in place of the cloud. It works the same whether you use Unlayer's cloud or run on-premise.

In an on-premise setup, Unlayer's cloud is not used at all, so a custom backend becomes mandatory: the Comments button stays hidden until you register a collaborationThreads provider. See Custom Backend.

---

Troubleshooting

The Comments button does not appear when any requirement is missing. Check, in order:

1. features.collaboration is true.
2. Your plan includes Team Collaboration.
3. designId is set.
4. On-premise: the collaborationThreads provider is registered.