Welcome to snapThat! Last update: today

Visual feedback • Tasks • Comments • Attachments

snapThat is a lightweight bug & task tool with super fast workflows: take screenshots, annotate instantly, post as a task and discuss with the team. This doc walks you through the Public API, website plugin, SnappingTool, and key frontend features.

Note

Default API base: https://snapthat.dev/api.
Authentication via Authorization: Bearer <token>.

Quickstart

  1. Create an organization & project in snapThat.
  2. Invite users (email) or generate a token.
  3. Optional: embed snapthat.plugin.js into your website.
  4. Optional: install the SnappingTool.

Architecture

  • Frontend – single-page app (list/kanban, comments, lightbox, annotations).
  • Public API – REST endpoints for auth, to-dos, comments, attachments, invitations.
  • Website plugin – embeddable JS widget for feedback directly on web pages.
  • SnappingTool – desktop app (Windows/macOS) for screenshots & fast upload.
  • WordPress plugin – JS plugin easily integrated per user in WordPress.

Downloads

Here you can find the official SnapThat downloads for various platforms and integrations.

SnappingTool

Desktop app for screenshots & tasks – similar to Microsoft Snipping Tool, for Windows and macOS.

Windows macOS

WordPress Plugin

With the official SnapThat WordPress plugin you can embed the feedback widget directly into your WordPress site.

Download plugin

Licenses & Pricing

SnapThat is available as a flexible SaaS model. There’s a free basic account – you can upgrade your license anytime for more team members or projects.

Price overview

LicensePrice / monthDetails
User€4.99Per additional user
Project€2.99Per additional project

Billing

  • Handled via Stripe.
  • Cancel any month.
  • VAT shown on the invoice.

Public API

The public API is JSON-based. Always set the header Authorization: Bearer <token> (JWT/token). Content-Type: application/json – for uploads use multipart/form-data.

Authentication

POST /auth/login

Request (JSON):
{ "username": "demo@snapthat.dev", "password": "secret" }

Response 200:
{
  "token": "eyJhbGciOi...<snip>...",
  "user": {
    "id": 7,
    "display_name": "Demo User",
    "email": "demo@snapthat.dev",
    "org_id": 1,
    "group": "admin"
  }
}
curl -X POST https://snapthat.dev/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"demo@snapthat.dev","password":"secret"}'

Headers for subsequent requests:

Authorization: Bearer <token>
Content-Type: application/json

To-dos

Fetch list

GET /todos – optional filters via query:

GET /todos?status=open&project=Website&priority=high&tags=ui&q=button
curl -s "https://snapthat.dev/api/todos?q=overlay&status=open" \
  -H "Authorization: Bearer <token>"
Create

POST /todos

{
  "title": "Overlay covers toolbar",
  "note": "The header overlaps while scrolling.",
  "project": "Website",
  "status": "open",
  "priority": "high",
  "assigned": 12,
  "tags": ["frontend","ui","bug"]
}
curl -X POST https://snapthat.dev/api/todos \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d @todo.json

Comments & Attachments

Create comment

POST /comments

{
  "todo_id": 1234,
  "text": "Please check on iOS 17.4 – seems to occur only on mobile."
}
File upload (screenshot, etc.)

POST /attachments (multipart)

curl -X POST https://snapthat.dev/api/attachments \
  -H "Authorization: Bearer <token>" \
  -F "todo_id=1234" \
  -F "file=@./screenshot.png"

Invitations

GET /invite-info?token=... – metadata for the invite (email, expiry date).

curl "https://snapthat.dev/api/invite-info?token=abcd123" \
  -H "Authorization: Bearer <token>"

POST /accept-invite

{
  "token": "abcd123",
  "display_name": "Alex Example",
  "password": "choose-a-strong-one"
}

Users & Upload

GET /user – profile of the logged-in user.

PUT /user – update profile.

{
  "display_name": "Alex Example",
  "language": "de",
  "avatar_url": "/uploads/avatars/2025/09/01/abc.webp"
}

PUT /user/password – set new password.

{"new_password":"choose-a-strong-one"}

POST /uploadmultipart/form-data, field file. Response contains path.

Projects

GET /projects – all projects in the organization.

POST /projects

{"name":"Website Relaunch"}

PATCH /projects/{id} – update fields (e.g. name).

Checklists

POST /todos/{id}/checklist – add item.

{"text":"Proofread content"}

POST /todos/{id}/checklist/{item_id}/toggle – check/uncheck.

DELETE /todos/{id}/checklist/{item_id} – remove item.

Image versions per to-do

GET /todos/{id}/images – versions (id, version, image_path, created_at, created_by).

POST /todos/{id}/images – new version (data URL).

{"image":"data:image/png;base64,iVBORw0K..."}

POST /todos/{id}/images/{version}/restore – restore an old version.

Notifications

GET /notifications?status=unread|all&limit=50

GET /notifications/count – number of unread items.

PATCH /notifications/{id}/read{"read":true|false}

PATCH /notifications/read-all – optional older_than (ISO time).

GET/PUT /notify-settings – email/push flags per event type.

Users (Admin)

GET /users – list; filters via query (e.g. group).

POST /users – create user.

{"username":"jane","email":"jane@snapthat.dev","user_group":"editor"}

PATCH /users/{id} – role/reset.

DELETE /admin/users/{id}/remove – soft delete.

Administration

GET /admin/stats – KPIs; optional from/to.

GET /admin/trash – trash bin.

POST /admin/trash/restore – restore item.

GET/PATCH /admin/license – read/change plan/limits.

Licenses & Checkout

GET /licenses – active subscription of the organization.

snapthat.plugin.js

The website plugin shows a small button at the bottom left/right and brings login, notes, screenshots with annotation, element pins, a comments view and a to-do list directly into your page.

File: /assets/js/snapthat.plugin.js

Embedding

Simply include the script at the end of the page. You can set the most important options as convenient data-* attributes on the <script>. Alternatively, the same options can be configured globally via window.SNAPTHAT_OPTS. Only the API base URL is required.

<!-- at the end of <body> -->
<script src="//snapthat.dev/snapthat.plugin.js"
        data-api="https://snapthat.dev/api"
        data-brand="#0ea5e9"
        data-pin="#ef4444"
        data-theme="dark"
        data-pos="right"
        data-offsetx="14"
        data-offsety="14"></script>

Or via a global object:

<script>
  window.SNAPTHAT_OPTS = {
    api: "https://snapthat.dev/api",
    brand: "#0ea5e9",
    pin: "#ef4444",
    theme: "dark",          // or 'light'
    pos: "right",           // 'left' | 'right'
    offsetX: 14,
    offsetY: 14
  };
</script>
<script src="//snapthat.dev/snapthat.plugin.js"></script>
  • The plugin auto-loads missing assets (SF Pro, Font Awesome).
  • For screenshots, html2canvas is included automatically.

Options

All options can be set as data-* on the script or via window.SNAPTHAT_OPTS. Defaults: theme=dark, brand=#0066ff, pin=#ff5252, pos=right, offsetX/Y=14.

  • api – base URL of the REST API, e.g. https://<domain>/api.
  • brand – primary color of the button.
  • pin – color for pins/markers.
  • themedark or light.
  • posleft or right (button position).
  • offsetX, offsetY – distance from the edge in pixels.

Hard-lock API URL (e.g. in production):

<script>
  window.SCENARIO_TODO_API = "https://snapthat.dev/api"; // overrides local settings
  // Optionally pass through an SSO token:
  // window.SCENARIO_TODO_TOKEN = "Bearer <...>";
</script>

If window.SCENARIO_TODO_API is set, the API base is no longer editable in the login dialog. An optional SCENARIO_TODO_TOKEN can inject an existing session/SSO token directly into the plugin.

Examples & UI

Quick guide

  1. Login: via “SnapThat.dev” button – as admin you’ll have team list & avatars ready.
  2. Note & screenshot: create a screenshot (optionally annotate) and save it with a note.
  3. Pins: “Pin element” selects a DOM element; the next screenshot can automatically crop the area.
  4. Open list: shows to-dos for the current page; comments can be entered directly.

SnappingTool

The SnappingTool is a desktop app for Windows and macOS that enables screenshots, annotations and direct upload as a task or comment to SnapThat.

Installation & Updates

  • Windows installer (EXE) with auto-update
  • macOS app (DMG); to be signed & notarized in the future

After installation the tool runs as a tray icon (camera symbol). There you’ll find the menu, hotkeys, license info and quick access.

Capture & Shortcuts

  • PrintScreen (Windows) / ⌘ ⇧ 5 (macOS): full screen or selection
  • Overlay follows the mouse – selection mode for the active display
  • Optional automatic clipboard copy

Annotate & Upload

  • Tools: cursor, pen, marker, rectangle, arrow, text, emoji
  • Undo/redo, save, copy
  • Upload as a new task or as a comment on existing tasks

Configuration

Configuration exclusively via the integrated settings window – no manual file changes.

  • Save to: set storage location.
  • Copy to clipboard: copy screenshots automatically.
  • Preview timeout: duration in ms for the preview image.
  • Open Annotator on Preview Click: clicking the preview opens the editor.
  • Hotkeys: define primary and secondary combinations.

Note: Only new tasks can be created; commenting on existing tasks is not possible.

Login required to create tasks; all other features (screenshot, annotation, save, etc.) are usable without login.

SnappingTool settings
Example settings window (Windows).

macOS: open app from unknown developer

If macOS blocks the app (because it’s unsigned), proceed as follows:

  1. Move the app to the “Applications” folder.
  2. Open it → macOS shows a warning.
  3. Now open **System Settings → Privacy & Security**.
  4. Scroll to the “Security” section and click “Open Anyway”. :contentReference[oaicite:0]{index=0}
  5. Confirm with your password; the app will be saved as an exception.

Alternatively in Finder: right-click (Ctrl-click) on the app → Open → in the dialog choose Open again – the exception will be set. :contentReference[oaicite:1]{index=1}

Please switch to a signed/notarized version as soon as possible.

Screenshots

Frontend – task management

The web app is the heart of SnapThat. Here you organize tasks, screenshots, comments and projects in a clearly structured interface. It combines classic lists with a modern kanban board and is fully integrated with the plugin & SnappingTool.

Overview

  • List – sortable task overview with filters.
  • Kanban – drag & drop between columns (status or categories).
  • Filters – search, project, status, priority, tags, time range.
  • Notifications – live, multi-language and optionally via email.

Create & edit tasks

New tasks can be created via a modal form – including:

  • Project, priority & assignee
  • Title / note and detailed description
  • Page title & URL (e.g. passed automatically by the plugin)
  • Tags (multiple via comma)
  • Screenshot upload with preview

Tasks can be edited, deleted or marked as “done” at any time. There is a history for screenshots so older versions can be restored.

Comments & collaboration

  • Live comments with emoji picker and mentions (@user).
  • File attachments via drag & drop.
  • Lightbox & annotator: annotate screenshots in the browser with text, marker, shapes and emojis.
  • Under each screenshot: meta info (who & when uploaded). Clicking scrolls to the matching comment.

Kanban board

The kanban board shows tasks grouped visually – either by status or by categories. Cards can be moved via drag & drop. Optionally, descriptions or screenshots can be shown directly on the cards.

Plus button: In each column you can create a new task directly with prefilled status/category.

Notifications

Notifications appear as a badge and in a dedicated list. They support:

  • New assignments
  • Comments & mentions
  • Status changes
  • News from the operator

All texts are multilingual (i18n). Optionally, emails or push notifications can be enabled.

Admin area

Administrators have access to additional tools:

  • User management: invite, assign roles, edit avatars & language
  • Trash bin: restore deleted tasks & comments
  • Statistics: KPIs for users, projects & tasks
  • License management: adjust user & project licenses, billing via Stripe

Profile & account

  • Own profile card with avatar, role, language & email
  • Edit display name & upload avatar
  • Language settings (multilingual)
  • Change or reset password

Onboarding & projects

On first login a welcome dialog starts, guiding you to create the first project. More projects can be created or renamed later.

Screenshots

SnapThat WordPress Plugin

The official SnapThat WordPress Plugin integrates snapthat.plugin.js directly into your WordPress installation. This lets you use SnapThat on your website without manually adding code.

A free account at snapthat.dev is required. You can find more information at getsnapthat.com.

Installation

  1. In the WordPress backend click Plugins → Add New → Upload Plugin.
  2. Upload the ZIP file snapthat-wp-plugin.zip.
  3. Activate the plugin.
  4. Configuration is under Settings → SnapThat.

Configuration

The following options are available in the backend:

  • API URL: base URL of the SnapThat API.
  • Brand color: button color (color picker).
  • Pin color: color for markers (color picker).
  • Theme: light or dark.
  • Position: bottom left or right.
  • Offset X/Y: distance from the edge.
  • Only for certain users/groups: restrict who the plugin loads for.
  • Enable publicly: show the plugin to all visitors.

Usage

After activation the SnapThat button appears on the website. From there you can capture screenshots, notes, pins and tasks directly.

WP plugin configuration
Configuration page in the WP backend.
Frontend panel
Frontend with SnapThat panel.