feedbackkit-web 1.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +73 -0
- package/README.md +125 -0
- package/dist/feedbackkit.iife.js +283 -0
- package/dist/feedbackkit.iife.js.map +1 -0
- package/dist/feedbackkit.js +2075 -0
- package/dist/feedbackkit.js.map +1 -0
- package/dist/types/capture.d.ts +34 -0
- package/dist/types/environment.d.ts +23 -0
- package/dist/types/global.d.ts +25 -0
- package/dist/types/index.d.ts +90 -0
- package/dist/types/logs.d.ts +36 -0
- package/dist/types/renderer.d.ts +64 -0
- package/dist/types/submit.d.ts +42 -0
- package/dist/types/types.d.ts +149 -0
- package/dist/types/ui/editor.d.ts +60 -0
- package/dist/types/ui/icons.d.ts +15 -0
- package/dist/types/ui/styles.d.ts +6 -0
- package/dist/types/ui/widget.d.ts +48 -0
- package/package.json +63 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
Required Notice: Copyright (c) 2024-2026 Tianhao Zhao (https://github.com/tianhaoz95/feedback-kit)
|
|
2
|
+
|
|
3
|
+
# PolyForm Perimeter License 1.0.1
|
|
4
|
+
|
|
5
|
+
<https://polyformproject.org/licenses/perimeter/1.0.1>
|
|
6
|
+
|
|
7
|
+
## Acceptance
|
|
8
|
+
|
|
9
|
+
In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
|
|
10
|
+
|
|
11
|
+
## Copyright License
|
|
12
|
+
|
|
13
|
+
The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose. However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
|
|
14
|
+
|
|
15
|
+
## Distribution License
|
|
16
|
+
|
|
17
|
+
The licensor grants you an additional copyright license to distribute copies of the software. Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
|
|
18
|
+
|
|
19
|
+
## Notices
|
|
20
|
+
|
|
21
|
+
You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software. For example:
|
|
22
|
+
|
|
23
|
+
> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
|
|
24
|
+
|
|
25
|
+
## Changes and New Works License
|
|
26
|
+
|
|
27
|
+
The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
|
|
28
|
+
|
|
29
|
+
## Patent License
|
|
30
|
+
|
|
31
|
+
The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
|
|
32
|
+
|
|
33
|
+
## Noncompete
|
|
34
|
+
|
|
35
|
+
Any purpose is a permitted purpose, except for providing to others any product that competes with the software.
|
|
36
|
+
|
|
37
|
+
## Competition
|
|
38
|
+
|
|
39
|
+
If you use this software to market a product as a substitute for the functionality or value of the software, it competes with the software. A product may compete regardless how it is designed or deployed. For example, a product may compete even if it provides its functionality via any kind of interface (including services, libraries or plug-ins), even if it is ported to a different platform or programming language, and even if it is provided free of charge.
|
|
40
|
+
|
|
41
|
+
## Fair Use
|
|
42
|
+
|
|
43
|
+
You may have "fair use" rights for the software under the law. These terms do not limit them.
|
|
44
|
+
|
|
45
|
+
## No Other Rights
|
|
46
|
+
|
|
47
|
+
These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else. These terms do not imply any other licenses.
|
|
48
|
+
|
|
49
|
+
## Patent Defense
|
|
50
|
+
|
|
51
|
+
If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
|
|
52
|
+
|
|
53
|
+
## Violations
|
|
54
|
+
|
|
55
|
+
The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice. Otherwise, all your licenses end immediately.
|
|
56
|
+
|
|
57
|
+
## No Liability
|
|
58
|
+
|
|
59
|
+
***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
|
|
60
|
+
|
|
61
|
+
## Definitions
|
|
62
|
+
|
|
63
|
+
The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
|
|
64
|
+
|
|
65
|
+
A **product** can be a good or service, or a combination of them.
|
|
66
|
+
|
|
67
|
+
**You** refers to the individual or entity agreeing to these terms.
|
|
68
|
+
|
|
69
|
+
**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
|
|
70
|
+
|
|
71
|
+
**Your licenses** are all the licenses granted to you for the software under these terms.
|
|
72
|
+
|
|
73
|
+
**Use** means anything you do with the software requiring one of your licenses.
|
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# feedbackkit-web
|
|
2
|
+
|
|
3
|
+
In-app feedback for websites: capture what the user is looking at, let them
|
|
4
|
+
mark it up and describe the problem, and get a structured report — plus the
|
|
5
|
+
page URL and the console errors and failed requests that led up to it.
|
|
6
|
+
|
|
7
|
+
The browser counterpart of [FeedbackKit](https://github.com/tianhaoz95/feedback-kit)'s
|
|
8
|
+
iOS/macOS/watchOS SDK: same flow, same report shape, same optional delivery
|
|
9
|
+
to the FeedbackKit dashboard (where reports become ready-to-paste prompts for
|
|
10
|
+
a coding agent). Framework-agnostic — the UI is plain DOM in a Shadow DOM, so
|
|
11
|
+
it works with React, Vue, Svelte, server-rendered pages, or none of them.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install feedbackkit-web
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Or with no build step:
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/feedbackkit-web/dist/feedbackkit.iife.js"></script>
|
|
23
|
+
<script>
|
|
24
|
+
FeedbackKit.configure({ projectKey: "pk_..." });
|
|
25
|
+
FeedbackKit.showFloatingTriggerButton();
|
|
26
|
+
</script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### From GitHub Packages
|
|
30
|
+
|
|
31
|
+
Also published as `@tianhaoz95/feedbackkit-web` on the GitHub npm registry
|
|
32
|
+
(which requires a token with `read:packages`, even for public packages):
|
|
33
|
+
|
|
34
|
+
```ini
|
|
35
|
+
# ~/.npmrc
|
|
36
|
+
@tianhaoz95:registry=https://npm.pkg.github.com
|
|
37
|
+
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @tianhaoz95/feedbackkit-web
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
### Keep the report yourself
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
import { FeedbackKit } from "feedbackkit-web";
|
|
50
|
+
|
|
51
|
+
const report = await FeedbackKit.present(); // null if the user cancels
|
|
52
|
+
if (report) {
|
|
53
|
+
// report.text, report.screenshotAnnotated (PNG Blob), report.annotations,
|
|
54
|
+
// report.environment, report.logs … — send it wherever you like.
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Send it to the FeedbackKit dashboard
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
FeedbackKit.configure({
|
|
62
|
+
projectKey: "pk_...", // from your project's SDK setup tab
|
|
63
|
+
// endpoint: "https://<ref>.supabase.co/functions/v1/ingest-feedback", // when self-hosting
|
|
64
|
+
appVersion: "2.4.0", // optional
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
FeedbackKit.showFloatingTriggerButton(); // a "Feedback" pill, bottom-right
|
|
68
|
+
FeedbackKit.enableKeyboardShortcut(); // ⌘⇧F / Ctrl+Shift+F
|
|
69
|
+
// …or from your own button:
|
|
70
|
+
await FeedbackKit.presentAndSubmit();
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Configure from client-only code — the SDK uses `window` and `document`. In
|
|
74
|
+
Next.js, call it from a `"use client"` component's `useEffect`.
|
|
75
|
+
|
|
76
|
+
### Options
|
|
77
|
+
|
|
78
|
+
| API | What it does |
|
|
79
|
+
|---|---|
|
|
80
|
+
| `FeedbackKit.currentScreen = "Checkout"` | Screen name for reports (set on route changes). Defaults to `location.pathname`. |
|
|
81
|
+
| `FeedbackKit.theme = { primaryColorHex, secondaryColorHex }` | Brand the trigger and dialog. |
|
|
82
|
+
| `FeedbackKit.captureOptions = { mode, maxPixelRatio }` | `mode: "display"` uses the Screen Capture API (pixel-exact, asks every time) instead of DOM rendering. |
|
|
83
|
+
| `configure({ captureLogs })` | Console/network log capture — on by default; pass options (`maxEntries`, `includeVerbose`, `network`) or `false`. |
|
|
84
|
+
| `configure({ products, defaultProductKey })` | The "affected product" chips. Fetched from the dashboard when omitted. |
|
|
85
|
+
| `FeedbackKit.submit(report)` | Send a report you got from `present()`. |
|
|
86
|
+
| `FeedbackKit.captureScreenshot()` | Just the viewport PNG, no UI. |
|
|
87
|
+
| `FeedbackKit.destroy()` | Remove the trigger, dialog host, listeners and log hooks. |
|
|
88
|
+
| `drawAnnotations(ctx, annotations, size)` | The annotation renderer (a port of the Swift `AnnotationRenderer`), for redrawing stored markup. |
|
|
89
|
+
|
|
90
|
+
## What's captured
|
|
91
|
+
|
|
92
|
+
- **Screenshot** — the visible viewport at the current scroll position, including
|
|
93
|
+
sticky/fixed elements, rendered from the DOM (no permission prompt). The
|
|
94
|
+
user can turn it off per report. Cross-origin iframes, images without CORS
|
|
95
|
+
headers and WebGL canvases without `preserveDrawingBuffer` render blank —
|
|
96
|
+
use `mode: "display"` if that matters.
|
|
97
|
+
- **Annotations** — freehand, rectangle, arrow and text, movable, resizable
|
|
98
|
+
(scroll / pinch) and rotatable (Shift+scroll / twist), stored as normalized
|
|
99
|
+
`[x, y]` points exactly like the native SDKs'.
|
|
100
|
+
- **Environment** — OS, browser, viewport, pixel ratio, locale, page URL (with
|
|
101
|
+
sensitive query parameters redacted), your app version, screen name.
|
|
102
|
+
- **Logs** — recent `console.warn`/`console.error`, uncaught errors, unhandled
|
|
103
|
+
rejections, and failed or 4xx/5xx fetch/XHR requests (method, URL, status —
|
|
104
|
+
never bodies). Tokens and secrets are redacted, and the user can untick logs
|
|
105
|
+
for any report.
|
|
106
|
+
|
|
107
|
+
The project key only allows *creating* feedback. Since it's visible in your
|
|
108
|
+
page source, restrict it to your own sites in the dashboard under
|
|
109
|
+
**Settings → Allowed web origins**.
|
|
110
|
+
|
|
111
|
+
## Development
|
|
112
|
+
|
|
113
|
+
This package lives in the FeedbackKit monorepo at `web-sdk/`; the dashboard
|
|
114
|
+
(`web/`) dogfoods it straight from source.
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
npm install
|
|
118
|
+
npm test # unit tests (vitest)
|
|
119
|
+
npm run build # dist/feedbackkit.js (ESM) + dist/feedbackkit.iife.js + types
|
|
120
|
+
npm run test:e2e # full flow in real Chromium, Firefox and WebKit (Playwright)
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## License
|
|
124
|
+
|
|
125
|
+
See [LICENSE](./LICENSE).
|