v2.3.0

issue-reporter

Drop a feedback button on any web page. Reports become GitHub issues. No backend required. No database. No API keys beyond a GitHub token scoped to issues.

GitHub CDN

Live Demo

Click the button below to walk through the wizard. After you submit, you'll see the exact GitHub issue title, labels, and Markdown body the widget would create — no real issue is filed.

demo.example.com

Your app, with issue-reporter installed

Imagine this panel is any page on your site. The widget sits in the corner until a user needs it.

This is what would be filed on GitHub

Issue title

Labels

Rendered Markdown body

Raw JSON payload (what POSTs to your backend in endpoint mode)

Features

Dark Theme

Sleek dark UI with backdrop blur

Multi-Step Wizard

Type, Details, Review flow

Element Inspector

Click to capture DOM elements

Console Error Capture

Automatic error collection

API Call Capture

Automatic request logging

Severity Levels

Low / Medium / High / Critical

Zero Dependencies

Single file, no build step

Direct GitHub API

Or use your own backend

Quick Start — Pure HTML (no backend)

Add two lines to your page. The widget calls the GitHub API directly.

HTML

<script src="https://cdn.jsdelivr.net/gh/rayketcham-lab/issue-reporter@main/issue-reporter.js"></script>
<script>
  IssueReporter.init({
    github: {
      repo: "your-org/your-repo",
      token: "github_pat_xxxx"
    },
    projectName: "My App"
  });
</script>

That's it. A floating "Report Issue" button appears. Click it, fill out the form, GitHub issue created.

Creating the token

Go to github.com/settings/tokens?type=beta (fine-grained tokens)
Repository access: select only the repo you want issues in
Permissions: Issues → Read and write (nothing else)
Copy the token into your init() call

This token can only create issues on that one repo. It can't read your code, push commits, or access anything else.

Token visibility tradeoff: The widget puts your GitHub token in page source. For internal tools, staging, or personal projects, that's fine — the worst anyone can do is create spam issues you can delete. For public-facing sites, use a dedicated triage repo and accept that anyone can spam issues up to the PAT's hourly budget.

GitHub Enterprise & Multi-Flavor Support

The widget works with any GitHub-compatible instance. Pass apiUrl in the github config to target on-prem or alternative deployments:

HTML

<script src="https://cdn.jsdelivr.net/gh/rayketcham-lab/issue-reporter@main/issue-reporter.js"></script>
<script>
  IssueReporter.init({
    github: {
      repo: "YOUR-ORG/YOUR-REPO",
      token: "github_pat_xxxxx",
      apiUrl: "https://your-ghes-host/api/v3"  // GitHub Enterprise Server (on-prem)
    },
    projectName: "Your App Name"
  });
</script>

Flavor	`apiUrl` value
GitHub.com (default)	Omit — defaults to `https://api.github.com`
GitHub Enterprise Server (on-prem)	`https://<hostname>/api/v3`
GitHub Enterprise Cloud (GHEC)	Omit — same as github.com, org-scoped via token
GitHub AE	`https://<hostname>/api/v3`

Token notes

Token requirements are the same across all flavors — scope to repo (or fine-grained Issues read/write) at minimum
On GHES / GitHub AE, generate the PAT from that instance, not github.com
Fine-grained tokens are supported on GHES 3.10+ and github.com

Widget Options

HTML

<script src="https://cdn.jsdelivr.net/gh/rayketcham-lab/issue-reporter@main/issue-reporter.js"></script>
<script>
  IssueReporter.init({
    github: {
      repo: "owner/repo",
      token: "github_pat_xxxx",
      apiUrl: "https://ghes.example.com/api/v3"  // optional — for GHES/GitHub AE
    },

    // --- Optional ---
    projectName: "My App",
    position: "bottom-right",             // or "bottom-left"
    buttonText: "Report Issue",
    issueTypes: [
      { id: "bug",             label: "Bug Report" },
      { id: "data_issue",      label: "Data Issue" },
      { id: "ui_bug",          label: "UI / Display Bug" },
      { id: "broken_link",     label: "Broken Link" },
      { id: "feature_request", label: "Feature Request" },
      { id: "performance",     label: "Performance" },
      { id: "other",           label: "Other" }
    ]
  });
</script>

Programmatic control

JavaScript

IssueReporter.open();    // Open the modal
IssueReporter.close();   // Close the modal
IssueReporter.destroy(); // Remove the widget entirely

Self-hosting the JS

Bash

curl -O https://raw.githubusercontent.com/rayketcham-lab/issue-reporter/v2.3.0/issue-reporter.js

No build step. No dependencies. One file.

How It Works

Browser widget --> GitHub API directly --> GitHub Issues or Browser widget --> GitHub Enterprise API (on-prem, via apiUrl) --> Issues

License

Apache-2.0