Framework guide

Comments for React

Install @bootstrapware/comments, import the stylesheet, and render <Comments /> with user and scope. Bootstrapware does not authenticate end users.

Install

pnpm add @bootstrapware/comments

Import @bootstrapware/comments/styles.css once near the feature. The component uses hooks, so it belongs in a client boundary.

Local

import { Comments, createLocalAdapter } from "@bootstrapware/comments";
import "@bootstrapware/comments/styles.css";

<Comments
  user={{ id: session.user.id, name: session.user.name, avatarUrl: session.user.image }}
  scope={{ tenantKey: workspace.id, resourceType: "task", resourceId: task.id }}
  adapter={createLocalAdapter({ storageKey: "demo-comments" })}
  searchMentionCandidates={async ({ query }) =>
    members.filter((member) => member.name.toLowerCase().includes(query.toLowerCase())).slice(0, 20)
  }
  resolveUsers={async ({ ids }) => members.filter((member) => ids.includes(member.id))}
/>

members is your own list for this resource. Cap it at 20. Local storage is not a production access check.

Hosted

<Comments
  appId="cma_demo"
  publishableKey={process.env.NEXT_PUBLIC_BSW_COMMENTS_PUBLISHABLE_KEY}
  user={{ id: session.user.id, name: session.user.name }}
  scope={{ tenantKey: "acme", resourceType: "task", resourceId: "task_1842" }}
  authorToken={authorTokenFromYourServer}
  renewAuthorToken={renewFromYourServer}
  searchMentionCandidates={searchPeople}
  resolveUsers={resolvePeople}
/>

Replace cma_demo with the cma_ id from get_comment_install_snippet. The publishable env value comes from ensure_comment_test_publishable. authorTokenFromYourServer is the string your server route returned. Optional apiBaseUrl defaults to https://comments.bootstrapware.co.

BYO

Pass createByoAdapter(customerAdapter) as adapter. Discussion text stays on your API. Keep the mention callbacks on the host. Contract: adapter.

Pitfalls

Passing viewerId as a widget prop. The prop is user.
Treating user.id or the permissions prop as authorization.
Minting authorToken in the browser.
Forgetting the stylesheet.
Putting bsw_live_sec_ or bsw_test_sec_ in client code.