@apportus/open-loop-widget

Frontend-only OpenLoop adapter for Pindrop.js.

This package contains no Express server, CLI, Azure client, local storage backend, or ALTCHA server code. It only builds Pindrop adapter options and browser context.

If the package is built with OPENLOOP_DEFAULT_API_BASE_URL=https://feedback.example.com, that backend URL is baked into the published frontend package as the default target. Runtime config.apiBaseUrl still overrides it.

CDN Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pindrop.js/dist/style.css">
<script type="module">
  import { Pindrop } from "https://esm.sh/pindrop.js";
  import { initOpenLoopFeedback } from "https://unpkg.com/@apportus/[email protected]/dist/browser.js";

  initOpenLoopFeedback(Pindrop, {
    config: {
      projectSlug: "my-project",
      featureSlug: "main",
      apiBaseUrl: "https://apportus-open-loop.graymoss-d8ea9c9e.switzerlandnorth.azurecontainerapps.io"
    },
    pindropOptions: {
      theme: "auto"
    },
    liveSync: {
      pollIntervalMs: 5000,
      watchNavigation: true,
    },
  });
</script>

npm Usage

import { Pindrop } from "pindrop.js";
import "pindrop.js/dist/style.css";
import { initOpenLoopFeedback } from "@apportus/open-loop-widget";

initOpenLoopFeedback(Pindrop, {
  config: {
    projectSlug: "website",
    apiBaseUrl: "https://feedback.example.com",
  },
});

apiBaseUrl is optional. If you omit it, the package falls back to the OPENLOOP_DEFAULT_API_BASE_URL baked in during build.

When you use initOpenLoopFeedback, the wrapper also:

• polls the backend every 15 seconds by default to pick up comments from other users on the same page scope
• reloads comments automatically after SPA route changes driven by pushState, replaceState, or browser history navigation

You can override that behavior with:

initOpenLoopFeedback(Pindrop, {
  config: {
    projectSlug: "website",
  },
  liveSync: {
    pollIntervalMs: 5000,
    watchNavigation: true,
  },
});

For embedded third-party sites, the OpenLoop backend must allow the site origin via OPENLOOP_CORS_ALLOWED_ORIGINS.

Publish

Publish this package from the repo root like this:

npm run build:frontend
cd packages/frontend
npm login --registry=https://registry.npmjs.org/
npm publish --cache ../.npm-cache-publish

Notes:

• use npm run build:frontend, not npm build:frontend
• npm login is only needed if you are not already authenticated against npmjs with the correct account
• --cache ../.npm-cache-publish keeps the publish independent from a broken global npm cache
• publishing requires access to the @apportus npm scope
• after publish, verify the package page: @apportus/open-loop-widget on npm