← Back to Home

Frequently Asked Questions

Account Registration & Login
  • •You can sign in with Google or GitHub OAuth. No email/password registration is required.
  • •You can log in with both a Google account and a GitHub account linked to the same email address (accounts are automatically linked).
Creating a Project
  • •Click the "New Project" button on the dashboard to create a project.
  • •Set a project name and a URL-friendly slug. The slug is used as the project identifier.
Embedding the Widget
  • •Copy the embed code shown on your project's settings page.
  • •Add the copied '<script>' tag to the end of your site''s '<body>'.
  • •The data-api-key attribute contains your project's unique API key. Do not modify this value.
  • •Add the origin of the site where the widget is installed (e.g., https://example.com) to "Allowed Origins" in the settings page. This is used for CORS control.
Setting Up GitHub Integration
  • •Click the "Install GitHub App" button in the "GitHub Integration" section of your project settings.
  • •You'll be redirected to GitHub. Install the Bugoon App and grant access to the repositories where you want Issues created.
  • •After installation, you'll be redirected back to the dashboard. Enter the target repository name in owner/repo format (e.g., myorg/my-app) in the "Repository" field and save.
  • •In the "GitHub Labels" section, you can customize the labels applied to auto-created Issues. Leave empty to skip a label.
  • •Once configured, bug reports will automatically create GitHub Issues. No token expiration to worry about.
Inviting Members
  • •Project owners can invite members by entering their email address in the "Members" section of the settings page.
  • •If the invited user already has a Bugoon account, they can join immediately. If not registered, they will automatically join the project on their next login.
  • •Owners can change project settings, delete the project, and manage members. Members can view bug reports and update their status.
Security
  • •API keys are uniquely generated for each project. You can view them in the settings page, but do not share them with third parties.
  • •GitHub integration uses the GitHub App method. No user tokens are stored on the server. GitHub App credentials are securely managed on the server side.
  • •Widget requests are only accepted from domains registered in "Allowed Origins" (CORS control). Requests from unauthorized origins are blocked.
Screenshot Methods
  • •In "Auto (Recommended)" mode, if the Bugoon Chrome extension is installed, screenshots are captured pixel-perfectly via the extension. Otherwise, it falls back to DOM rendering (html-to-image).
  • •In "Screen Sharing" mode, the browser's Screen Capture API is used. A dialog prompts you to select a screen, but it accurately captures CORS images, iframes, Canvas/WebGL, and other elements that DOM rendering cannot handle.
  • •You can select the screenshot method in the embed code section of the project settings page. It is controlled by the data-capture attribute on the script tag.
  • •"Auto" works well for most sites, but try "Screen Sharing" mode for sites with many external images or embedded content.
Chrome Extension
  • •Install the Bugoon Screenshot extension for pixel-perfect screenshots captured via the browser''s native API.
  • •The widget works without the extension using DOM rendering (html-to-image). The extension is an optional upgrade for screenshot quality.
  • •Install from the Chrome Web Store: https://chromewebstore.google.com/detail/gbfcojmjpgijmdpccdmppnbagflgjphl
  • •The extension only uses activeTab and host_permissions. It does not collect or transmit any data. Screenshots are passed directly to the widget within the browser.
CSP (Content Security Policy) Configuration
  • •If your site uses a CSP header, you need to add the following directives for the Bugoon widget to work correctly.
  • •script-src: Add the widget origin (e.g., https://bugoon.com ) to allow loading the widget JS.
  • •connect-src: Add the widget origin (for the bug report API) and https://firebasestorage.googleapis.com (for screenshot uploads).
  • •style-src: Add 'unsafe-inline'. The widget uses inline styles inside Shadow DOM, which does not affect the parent site's DOM.
  • •The 'AI Setup Prompt' in the project settings page includes CSP instructions, so you can pass it to Claude Code or Cursor to handle the full setup including CSP automatically.
GitHub Label Configuration
  • •You can customize the labels applied to auto-created GitHub Issues in the "GitHub Labels" section of your project settings.
  • •"common" is the label applied to all Issues. The default is "bug".
  • •"severity:critical", "severity:major", "severity:minor", and "severity:trivial" — the label matching the severity selected by the reporter in the widget is applied to the Issue.
  • •"console_errors" is applied to reports containing console errors, and "network_errors" is applied to reports containing network errors.
  • •Leave a label field empty to skip that label on Issues. Use this to disable labels you don't need.
  • •Labels must be pre-created in your GitHub repository. If a specified label doesn't exist in the repository, it may not be applied when the Issue is created.
Slack Integration
  • •You can set up Slack notifications from the "Slack Integration" section in your project settings. Choose either Webhook mode or Bot mode.
  • •Webhook mode requires only pasting a Slack Incoming Webhook URL. You'll receive a notification each time a bug report is created.
  • •Bot mode installs a Slack App via OAuth. In addition to bug report creation notifications, you'll also get threaded replies for status changes and GitHub Issue creation.
  • •To get a Webhook URL: Go to your Slack workspace's "Settings & Administration" > "Manage Apps", enable Incoming Webhooks, select the target channel, and copy the URL.
  • •In Bot mode, notifications are sent as threaded messages, so updates related to a single bug report are grouped together, keeping your channel organized.
  • •You can disconnect the integration at any time using the "Disconnect" button in the settings page. Disconnecting stops notifications but does not affect existing bug report data.
Notion Integration
  • •You can set up Notion sync from the "Notion Integration" section in your project settings. Choose either OAuth mode or Token mode.
  • •In OAuth mode, click "Connect to Notion" to be redirected to Notion's authorization page. After authorization, you'll see a list of accessible databases — select the one to sync with.
  • •In Token mode, manually enter a Notion Internal Integration Token and database ID. Create an integration in Notion under "Settings & members" > "Connections" to obtain the token.
  • •For Token mode, connect the integration to the target database via the database's "..." menu > "Connections". The database ID is the 32-character alphanumeric string in the database page URL.
  • •Once configured, a page is automatically added to your Notion database when a bug report is created. Bugoon auto-detects the database's property structure and only syncs data to matching properties. Supported property names and types are: Title (title type, auto-detected), Status (status or select type), Severity (select type), Page URL/URL (url type), Dashboard Link/Bugoon (url type), Browser (rich_text type), OS (rich_text type). Properties that don't exist in the database are simply skipped, so it works with a minimum of just a title property.
  • •When you change a bug report's status in the dashboard, the corresponding Notion page's Status property is automatically updated.
  • •You can disconnect the integration at any time using the "Disconnect" button in the settings page. Disconnecting stops auto-sync but does not affect existing bug report data or Notion pages.
MCP Server (AI Integration)
  • •The MCP server lets AI coding tools like Claude Code and Cursor access your bug information directly. You can list bugs, view details, and update statuses without leaving your editor.
  • •The npm package is @rubyjobs-jp/bugoon-mcp-server. It runs via npx, so no manual installation is needed.
  • •Setup: (1) Copy the secret key from the project settings page. (2) Add the MCP server configuration to your IDE's config file.
  • •For Claude Code: Add the following to .claude/settings.json. Set BUGOON_SECRET_KEY to the secret key you copied.
    {
  "mcpServers": {
    "bugoon": {
      "command": "npx",
      "args": ["-y", "@rubyjobs-jp/bugoon-mcp-server"],
      "env": {
        "BUGOON_SECRET_KEY": "YOUR_SECRET_KEY",
        "BUGOON_API_URL": "https://bugoon.com"
      }
    }
  }
}
  • •For Cursor: Add the following to .cursor/mcp.json.
    {
  "mcpServers": {
    "bugoon": {
      "command": "npx",
      "args": ["-y", "@rubyjobs-jp/bugoon-mcp-server"],
      "env": {
        "BUGOON_SECRET_KEY": "YOUR_SECRET_KEY",
        "BUGOON_API_URL": "https://bugoon.com"
      }
    }
  }
}
  • •Available features: List bug reports, get bug report details, update statuses, get project info, and more. AI can understand the bug context and use it for fixing.
  • •Usage examples: You can instruct the AI agent like this:
    # Get triage bugs, check them in the browser,
# and update confirmed ones to open status

# Get open bugs, fix them one by one,
# and update each to resolved when done

# Show me the details of bug report #42

# List all critical bugs
  • •Supported tools: Works with any tool that supports MCP (Model Context Protocol), including Claude Code, Cursor, and other MCP-compatible editors and tools.