DropComments SDK

1. Add your app in DropComments, under Apps: its name, the addresses it runs at (https, or http on localhost and .test while building), and the projects its feedback goes into. You get its key and each project’s id.

   Add your app

2. Keep the key on your server, in its environment or secrets:

   DROPCOMMENTS_KEY=dc_app_…

   Copy

   Never in a page, in code that reaches the browser, or in a commit. DropComments refuses it from a browser.

3. Add a token endpoint. For whoever is signed in, it asks DropComments for a token and returns its JSON as it is. With nobody signed in, answer 401 and nothing shows.

   // GET /api/feedback-token
   export async function GET(request) {
     const user = await getSignedInUser(request); // your own sign-in
     if (!user) return new Response(null, {status: 401});
   
     const res = await fetch("https://dropcomments.com/api/app/token", {
       method: "POST",
       headers: {
         authorization: `Bearer ${process.env.DROPCOMMENTS_KEY}`,
         "content-type": "application/json",
       },
       body: JSON.stringify({
         project: "YOUR_PROJECT_ID",
         user: {id: user.id, name: user.name},
         team: user.isStaff, // true: pin comments on the app. false: the short form
       }),
     });
     return new Response(res.body, {status: res.status, headers: {"content-type": "application/json"}});
   }

   Copy

   Written as a Next.js route handler; it’s the same in a Worker, Deno or Bun. In Express, send back the same status and JSON.

4. Load the script in every page, before </body>:

   <script src="https://dropcomments.com/live.js" data-token-url="/api/feedback-token"></script>

   Copy

   It draws no button of its own, so nothing shows yet.

5. Add your own Feedback button, hidden until DropComments.ready says a token came, opening the panel for your team and the short form for everyone else:

   <button id="feedback" hidden>Feedback</button>
   
   const button = document.getElementById("feedback");
   if (await DropComments.ready) {
     button.hidden = false;
     button.addEventListener("click", () => DropComments.open());
   }

   Copy

   Put it wherever it fits your app: a header, a menu, a settings screen. The panel, the form and the pins are the script’s.

6. If your pages send a Content-Security-Policy, allow DropComments:

   script-src https://dropcomments.com;
   connect-src https://dropcomments.com wss://dropcomments.com;

   Copy

Or let your coding agent do it. Adding your app shows a brief with your key and project ids already in; paste it to the agent building your app and it adds the endpoint, the script and the button.