feedback-annotation

Agentation plus a Send All n Feedbacks tab on the right edge of the page. Testers annotate any page with Agentation; the tab collects the notes from every page into one report and shares it by Copy, Download, WhatsApp, Telegram or Email. Every note carries a session ID, such as a Jira ticket, so the feedback can be grouped.

For internal dev and staging sites only. Don't ship the tag to production.

Demo: https://ets-tech.github.io/feedback-annotation/

Use

Add one tag to the page. It must be type="module".

<script type="module" src="https://cdn.jsdelivr.net/gh/ets-tech/feedback-annotation@1/feedback-annotation.js?app=MyApp"></script>

@1 gets every 1.x release automatically and never a breaking 2.0.

For the minified file, ask for feedback-annotation.min.js instead; jsDelivr minifies it on the fly, and the parameters work the same:

<script type="module" src="https://cdn.jsdelivr.net/gh/ets-tech/feedback-annotation@1/feedback-annotation.min.js?app=MyApp"></script>

Parameters

Add them to the script URL.

Parameter	Effect	Default
app	Name in the report header, the email subject and Agentation's app name	TestApp
hide	Comma list of drawer items to remove: whatsapp, telegram, email, download. Copy and Clear all always show.	nothing hidden
hide_all_feedback_button	true removes the tab, drawer, session ID and download; Agentation's own toolbar stays	false
hide_new_session_auto_popup	true skips the session ID popup on the first note and generates an ID instead; change it any time from Session in the drawer	false
post_url	Adds Post to server to the drawer, which POSTs every note as JSON to this URL. URL-encode it.	not set
post_token	Sent as Authorization: Bearer <token> with each post	not set
post_label	Label of the post button in the drawer and the Clear all dialog	Post to server

<!-- Email and Copy only -->
<script type="module" src="https://cdn.jsdelivr.net/gh/ets-tech/feedback-annotation@1/feedback-annotation.js?app=MyApp&hide=whatsapp,telegram"></script>

<!-- Agentation only, no tab -->
<script type="module" src="https://cdn.jsdelivr.net/gh/ets-tech/feedback-annotation@1/feedback-annotation.js?app=MyApp&hide_all_feedback_button=true"></script>

Session ID

When the first note is added, a popup asks for a session ID: a Jira ticket, a GitHub issue, or anything else that groups this round of feedback. Left blank, or closed with Escape, it becomes <app>- plus 8 random hex characters, e.g. MyApp-e8c79f40.

• One ID covers every note in the browser. Change it from Session at the top of the drawer and every note, old and new, takes the new one.
• It is shown in the report's Environment block, names the downloaded file (PROJ-123.md) and is posted as sessionId.
• Clear all removes it, so the next note asks again.

Report

Copy, Download (a .md file) and the share channels all send the same Markdown:

I added 3 feedbacks on staging.example.com. Fix each one, then verify it in the running app:

**App:** MyApp

**Environment:**
- Session ID: PROJ-123
- Public IP: 203.0.113.7
- Viewport: 1440×900
…

The public IP is looked up from api.ipify.org once per page load, when the tab first appears. If that fails (offline, or blocked by an ad-blocker or firewall) the line reads Unavailable.

Download

Download in the drawer saves the report as a Markdown file named after the session ID, e.g. PROJ-123.md, or MyApp-e8c79f40.md for a generated one. Characters that can't go in a filename become _, so #42 saves as 42.md. Hand the file to a developer, attach it to the ticket, or give it to an AI coding agent: its first line tells the agent to fix and verify each note.

Remove the button with hide=download.

Post to server

<script type="module" src="https://cdn.jsdelivr.net/gh/ets-tech/feedback-annotation@1/feedback-annotation.js?app=MyApp&post_url=https%3A%2F%2Fapi.example.com%2Ffeedback&post_token=abc123"></script>

Post to server sends one POST with a JSON array: every note on every page, plus the notes deleted since the last successful post. Notes stay in the browser after posting, so posting again re-sends them.

[
  {
    "hash": "3b7aad47…",
    "deleted": false,
    "app": "MyApp",
    "deviceId": "e8c79f40-0b4e-4847-b5b7-f09ef45e5732",
    "sessionId": "PROJ-123",
    "publicIp": "203.0.113.7",
    "origin": "https://staging.example.com",
    "url": "https://staging.example.com/orders?date=2026-10-01#tab=2",
    "path": "/orders",
    "query": "?date=2026-10-01",
    "fragment": "#tab=2",
    "userAgent": "Mozilla/5.0 …",
    "viewport": "1440×900",
    "devicePixelRatio": 2,
    "sentAt": "2026-10-26T10:00:00.000Z",
    "agentation": {
      "id": "1793012632233",
      "comment": "Make the heading bigger",
      "element": "h1",
      "elementPath": "body > h1",
      "timestamp": 1793012632233,
      "…": "the other Agentation fields below"
    }
  },
  { "hash": "9c1e…", "deleted": true, "app": "MyApp", "deviceId": "e8c79f40-…", "sessionId": "PROJ-123", "deletedAt": "2026-10-26T09:58:12.000Z", "agentation": { "id": "1793000000000" } }
]

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗