Use this flow for Siftor, future Entroparc apps, and later public customer installs. The default path is one script tag; the React package is there when an app needs deeper integration.
Create a project boundary and bind the first host origin.
Copy one script tag into the host site or app layout.
Send one live feedback item from the installed host page.
Save the detected browser origin on the active project key.
Confirm the latest signal is key-bound and origin-verified.
Copyable baseline
Paste one script tag into the host site or app layout. No npm package or public env vars required.
<script async src="https://www.entrofeed.com/widget.js" data-project-key="pk_live_your_project_key" ></script>
Copy this into Codex, Cursor, Claude, or another coding agent working inside the host app repo.
Install Entrofeed feedback into this app. Preferred path: use the hosted script tag unless this app clearly needs the advanced React package. Add this once in the shared HTML head, document, root layout, or app shell: <script async src="https://www.entrofeed.com/widget.js" data-project-key="pk_live_your_project_key" ></script> If this app has a strict Content Security Policy, allow script and connect requests to https://www.entrofeed.com. Do not put server secrets in frontend code. Use the Entrofeed URL exactly as shown; browser CORS preflight requests cannot follow domain redirects. Make sure the host origin is allowed in Entrofeed: https://your-app.example. Only use the advanced React package path if the app needs typed React props, richer logged-in user context, or custom widget control. In that case install @entroparc/entrofeed-widget@latest, set NEXT_PUBLIC_ENTROFEED_URL=https://www.entrofeed.com and NEXT_PUBLIC_ENTROFEED_PROJECT_KEY=pk_live_your_project_key, then mount EntrofeedWidget once in the authenticated app layout. Run lint/build after the change, then submit one live test feedback item and confirm it appears in Entrofeed.
Submit one test feedback item, then confirm Entrofeed receives it under this project.
1. Allowed origin: https://your-app.example 2. Paste the script snippet, or deploy the advanced React package path. 3. Open the host app page where the launcher appears. 4. Submit a short test feedback message. 5. Confirm the item appears in Entrofeed /inbox with the right project and path. 6. If the browser console shows a CORS preflight redirect, confirm the host app uses the canonical Entrofeed URL shown above.
Use these when the host app needs richer user context, opt-in file attachments, or direct API control.
npm install @entroparc/entrofeed-widget@latest # or pnpm add @entroparc/entrofeed-widget@latest # Current Entrofeed widget version: 0.1.4
NEXT_PUBLIC_ENTROFEED_URL=https://www.entrofeed.com NEXT_PUBLIC_ENTROFEED_PROJECT_KEY=pk_live_your_project_key
"use client";
import { usePathname } from "next/navigation";
import { EntrofeedWidget } from "@entroparc/entrofeed-widget";
type ProductFeedbackProps = {
user?: {
id?: string;
email?: string | null;
username?: string | null;
};
};
export function ProductFeedback({ user }: ProductFeedbackProps) {
const pathname = usePathname();
return (
<EntrofeedWidget
apiBaseUrl={process.env.NEXT_PUBLIC_ENTROFEED_URL!}
projectKey={process.env.NEXT_PUBLIC_ENTROFEED_PROJECT_KEY!}
user={{
id: user?.id,
label: user?.email ?? user?.username ?? undefined,
}}
context={{ path: pathname, route: pathname }}
/>
);
}"use client";
import { usePathname } from "next/navigation";
import { EntrofeedWidget } from "@entroparc/entrofeed-widget";
type ProductFeedbackProps = {
user?: {
id?: string;
email?: string | null;
username?: string | null;
};
};
export function ProductFeedback({ user }: ProductFeedbackProps) {
const pathname = usePathname();
return (
<EntrofeedWidget
apiBaseUrl={process.env.NEXT_PUBLIC_ENTROFEED_URL!}
projectKey={process.env.NEXT_PUBLIC_ENTROFEED_PROJECT_KEY!}
user={{
id: user?.id,
label: user?.email ?? user?.username ?? undefined,
}}
context={{ path: pathname, route: pathname }}
captureFeatures={["files"]}
/>
);
}Install Entrofeed feedback into this app with opt-in file attachments.
Use this advanced React package path only because this app needs design-partner uploads or screenshot/file capture. Do not use it for a basic install; the hosted script tag is simpler for that.
Install @entroparc/entrofeed-widget@latest using this repo's package manager.
Set:
NEXT_PUBLIC_ENTROFEED_URL=https://www.entrofeed.com
NEXT_PUBLIC_ENTROFEED_PROJECT_KEY=pk_live_your_project_key
Mount EntrofeedWidget once in the authenticated app layout or product shell. Pass the current pathname as context path and route, pass logged-in user id/email when available, and enable:
captureFeatures={["files"]}
Do not put server secrets in NEXT_PUBLIC vars.
Make sure the host origin is allowed in Entrofeed: https://your-app.example.
Run lint/build after the change. Then submit one live test feedback item with one small image attachment and confirm the feedback and private attachment download work in Entrofeed.Exact allowed origins and runtime limits for this project.
Open a project to copy its real key, origins, test checklist, and agent prompt.
Check the capture surface and package contract before embedding it in another app.
Keep the app, package, and release process connected to the public repository.