Willkommen bei snapThat! Letztes Update: heute

Visual Feedback • Aufgaben • Kommentare • Anhänge

snapThat ist ein leichtgewichtiges Bug- & Aufgaben-Tool mit superschnellen Workflows: Screenshots aufnehmen, direkt annotieren, als Aufgabe posten und im Team diskutieren. Diese Doku führt dich durch Public-API, Website-Plugin, SnappingTool und die wichtigsten Frontend-Funktionen.

Hinweis

Standard-API-Basis: https://snapthat.dev/api.
Authentifizierung per Authorization: Bearer <token>.

Schnellstart

Organisation & Projekt in snapThat anlegen.
Nutzer einladen (E-Mail) oder Token generieren.
Optional: snapthat.plugin.js in deine Website einbinden.
Optional: SnappingTool installieren.

Architektur

Frontend – Single Page App (Liste/Kanban, Kommentare, Lightbox, Annotations).
Public-API – REST-Endpunkte für Auth, Todos, Kommentare, Anhänge, Einladungen.
Website-Plugin – Einbettbares JS-Widget für Feedback direkt auf Webseiten.
SnappingTool – Desktop-App (Windows/macOS) für Screenshots & schnellen Upload.
Wordpress Plugin – JS-Plugin einfach Benutzerbasiert in Wordpress einbinden.

Downloads

Hier findest du die offiziellen SnapThat Downloads für verschiedene Plattformen und Integrationen.

SnappingTool

Desktop-App für Screenshots & Aufgaben – ähnlich dem Microsoft SnippingTool, für Windows und macOS.

Windows macOS

WordPress Plugin

Mit dem offiziellen SnapThat WordPress Plugin kannst du das Feedback-Widget direkt in deine WordPress-Seite einbinden.

Plugin herunterladen

Lizenzen & Preise

SnapThat ist als flexibles SaaS-Modell verfügbar. Es gibt ein kostenloses Basiskonto – für mehr Teammitglieder oder Projekte kannst du deine Lizenz jederzeit erweitern.

Preisübersicht

Lizenz	Preis / Monat	Details
Benutzer	4,99 €	Pro zusätzlichem Benutzer
Projekt	2,99 €	Pro zusätzlichem Projekt

Abrechnung

Abwicklung via Stripe.
Monatlich kündbar.
Mehrwertsteuer wird auf der Rechnung ausgewiesen.

Public-API

Die Public-API ist JSON-basiert. Setze immer den Header Authorization: Bearer <token> (JWT/Token). Content-Type: application/json – bei Uploads multipart/form-data.

Authentifizierung

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"}'

Header für Folge-Requests:

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

Todos

Liste abrufen

GET /todos – Filter optional 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>"

Anlegen

POST /todos

{
  "title": "Overlay deckt Toolbar",
  "note": "Beim Scrollen überlappt der Header.",
  "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

Kommentare & Anhänge

Kommentar anlegen

POST /comments

{
  "todo_id": 1234,
  "text": "Bitte Prüfen auf iOS 17.4 – scheint nur mobil aufzutreten."
}

Dateiupload (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"

Einladungen

GET /invite-info?token=... – Metadaten zur Einladung (E-Mail, Ablaufdatum).

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"
}

Benutzer & Upload

GET /user – Profil des eingeloggten Nutzers.

PUT /user – Profil aktualisieren.

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

PUT /user/password – Neues Passwort setzen.

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

POST /upload – multipart/form-data, Feld file. Antwort enthält path.

Projekte

GET /projects – Alle Projekte der Organisation.

POST /projects

{"name":"Website Relaunch"}

PATCH /projects/{id} – Felder aktualisieren (z. B. Name).

Checklisten

POST /todos/{id}/checklist – Eintrag hinzufügen.

{"text":"Texte gegenlesen"}

POST /todos/{id}/checklist/{item_id}/toggle – abhaken/reaktivieren.

DELETE /todos/{id}/checklist/{item_id} – Eintrag entfernen.

Bild-Versionen je Todo

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

POST /todos/{id}/images – Neue Version (Data-URL).

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

POST /todos/{id}/images/{version}/restore – Alte Version wiederherstellen.

Benachrichtigungen

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

GET /notifications/count – Anzahl ungelesen.

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

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

GET/PUT /notify-settings – E-Mail-/Push-Flags je Ereignistyp.

Benutzer (Admin)

GET /users – Liste; Filter via Query (z. B. Gruppe).

POST /users – Benutzer anlegen.

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

PATCH /users/{id} – Rolle/Reset.

DELETE /admin/users/{id}/remove – Soft-Delete.

Administration

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

GET /admin/trash – Papierkorb.

POST /admin/trash/restore – Element wiederherstellen.

GET/PATCH /admin/license – Plan/Limits lesen/ändern.

Lizenzen & Checkout

GET /licenses – Aktives Abo der Organisation.

snapthat.plugin.js

Das Website-Plugin blende einen kleinen Button unten links/rechts ein und bringt Login, Notizen, Screenshots mit Annotation, Element-Pins, Kommentaransicht und eine To-do-Liste direkt in deine Seite.

Datei: /assets/js/snapthat.plugin.js

Einbindung

Einfach das Script am Ende der Seite einbinden. Die wichtigsten Optionen kannst du bequem als data-*-Attribute am <script> setzen. Alternativ lassen sich dieselben Optionen global via window.SNAPTHAT_OPTS konfigurieren. Erforderlich ist nur die API-Basis-URL.

<!-- am Ende des <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>

Oder via globalem Objekt:

<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>

Das Plugin lädt fehlende Assets (SF Pro, Font Awesome) selbst nach.
Für Screenshots wird html2canvas automatisch eingebunden.

Optionen

Alle Optionen können als data-* am Script oder per window.SNAPTHAT_OPTS gesetzt werden. Standardwerte: theme=dark, brand=#0066ff, pin=#ff5252, pos=right, offsetX/Y=14./p>

api – Basis-URL der REST-API, z. B. https://<domain>/api.
brand – Primärfarbe des Buttons.
pin – Farbe für Pins/Markierungen.
theme – dark oder light.
pos – left oder right (Position des Buttons).
offsetX, offsetY – Abstand vom Rand in Pixeln.

API-URL fest „locken“ (z. B. in Produktion):

<script>
  window.SCENARIO_TODO_API = "https://snapthat.dev/api"; // überschreibt lokale Einstellungen
  // Optional SSO-Token durchreichen:
  // window.SCENARIO_TODO_TOKEN = "Bearer <...>";
</script>

Wenn window.SCENARIO_TODO_API gesetzt ist, wird die API-Basis im Login-Dialog nicht mehr editierbar. Ein optionales SCENARIO_TODO_TOKEN kann ein vorhandenes Session-/SSO‑Token direkt ins Plugin injizieren.

Beispiele & UI

Kurzanleitung

Login: per Button „SnapThat.dev“ – als Admin stehen Team-Liste & Avatare bereit.
Notiz & Screenshot: Screenshot erstellen (optional annotieren) und mit Notiz speichern.
Pins: „Element pinnen“ wählt ein DOM-Element; der nächste Screenshot kann automatisch den Bereich ausschneiden.
Liste öffnen: zeigt To-dos zur aktuellen Seite; Kommentare können direkt eingetragen werden.

SnappingTool

Das SnappingTool ist eine Desktop-App für Windows und macOS, die Screenshots, Annotationen und direkten Upload als Aufgabe oder Kommentar zu SnapThat ermöglicht.

Installation & Updates

Windows-Installer (EXE) mit Auto-Update
macOS-App (DMG); zukünftig signiert & notarisiert

Nach Installation läuft das Tool als Tray-Icon (Kamera-Symbol). Dort findest du Menü, Hotkeys, Lizenzinfo und Schnellzugriff.

Aufnahme & Shortcuts

PrintScreen (Windows) / ⌘ ⇧ 5 (macOS): Vollbild oder Auswahl
Overlay folgt der Maus – Auswahlmodus für aktives Display
Optionale automatische Zwischenablage-Kopie

Annotieren & Upload

Werkzeuge: Cursor, Stift, Marker, Rechteck, Pfeil, Text, Emoji
Undo/Redo, Speichern, Kopieren
Upload als neue Aufgabe oder als Kommentar zu bestehenden Tasks

Konfiguration

Konfiguration ausschließlich über das integrierte Einstellungsfenster – keine manuelle Dateiänderung.

Speichern unter: Festlegung des Speicherortes.
In Zwischenablage kopieren: Automatisches Kopieren der Screenshots.
Vorschau-Timeout: Zeitdauer in ms für Vorschaubild.
Open Annotator on Preview Click: Klick auf Vorschau öffnet Editor.
Hotkeys: Primär- und Sekundär-Kombination definierbar.

Hinweis: Nur neue Aufgaben können erstellt werden; Kommentare an bestehenden Aufgaben sind nicht möglich.

Login erforderlich für Aufgabenerstellung; alle anderen Funktionen (Screenshot, Annotation, Speichern etc.) nutzbar ohne Login.

SnappingTool Einstellungen — Beispielfenster der Einstellungen (Windows).

macOS: App von unbekanntem Entwickler öffnen

Wenn macOS die App blockiert (da unsigniert), geht wie folgt vor:

Versetze die App in den Ordner „Programme“.
Öffne sie → macOS zeigt Warnung.
Öffne jetzt **Systemeinstellungen → Datenschutz & Sicherheit**.
Scrolle zu „Sicherheit“-Abschnitt und klicke „Dennoch öffnen“. :contentReference[oaicite:0]{index=0}
Bestätige mit deinem Passwort, die App wird als Ausnahme gespeichert.

Alternativ im Finder: Rechtsklick (Ctrl-Klick) auf App → Öffnen → im Dialog nochmals Öffnen auswählen – Ausnahme wird gesetzt.

Bitte so bald wie möglich auf eine signierte/nationalisierte Version wechseln.

Screenshots

Frontend – Aufgabenverwaltung

Die Web-App ist das Herzstück von SnapThat. Hier organisierst du Aufgaben, Screenshots, Kommentare und Projekte in einer klar strukturierten Oberfläche. Sie kombiniert klassische Listen mit einem modernen Kanban-Board und ist voll integriert mit Plugin & SnappingTool.

Überblick

Liste – sortierbare Aufgabenübersicht mit Filtern.
Kanban – Drag-&-Drop zwischen Spalten (Status oder Kategorien).
Filter – Suche, Projektwahl, Status, Priorität, Tags, Zeitraum.
Benachrichtigungen – live, mehrsprachig und optional per E-Mail.

Aufgaben anlegen & bearbeiten

Neue Aufgaben lassen sich über ein modales Formular anlegen – inklusive:

Projekt, Priorität & Zuständigkeit
Titel / Notiz und ausführliche Beschreibung
Seiten-Titel & URL (z. B. vom Plugin automatisch übertragen)
Tags (mehrere per Komma)
Screenshot-Upload mit Vorschau

Aufgaben können jederzeit bearbeitet, gelöscht oder als „erledigt“ markiert werden. Für Screenshots gibt es eine Historie, sodass ältere Versionen wiederhergestellt werden können.

Kommentare & Zusammenarbeit

Live-Kommentare mit Emoji-Picker und Erwähnungen (@Nutzer).
Dateianhänge per Drag & Drop.
Lightbox & Annotator: Screenshots direkt im Browser mit Text, Marker, Formen und Emojis versehen.
Unter jedem Screenshot: Meta-Infos (wer & wann hochgeladen). Klick scrollt zum passenden Kommentar.

Kanban-Board

Das Kanban-Board zeigt Aufgaben visuell gruppiert – entweder nach Status oder nach Kategorien. Karten können per Drag & Drop verschoben werden. Optional lassen sich Beschreibungen oder Screenshots direkt in den Karten einblenden.

Plus-Button: In jeder Spalte kann direkt eine neue Aufgabe mit vorausgefülltem Status/Kategorie erstellt werden.

Benachrichtigungen

Benachrichtigungen erscheinen als Badge und in einer eigenen Liste. Sie unterstützen:

Neue Zuweisungen
Kommentare & Erwähnungen
Statusänderungen
News vom Betreiber

Alle Texte sind mehrsprachig (i18n). Optional können E-Mails oder Push-Nachrichten aktiviert werden.

Admin-Bereich

Administratoren haben Zugriff auf zusätzliche Werkzeuge:

Benutzerverwaltung: Einladen, Rollen zuweisen, Avatare & Sprache bearbeiten
Mülleimer: Wiederherstellen gelöschter Aufgaben & Kommentare
Statistiken: Kennzahlen zu Nutzern, Projekten & Aufgaben
Lizenzverwaltung: Anpassung von Nutzer- & Projektlizenzen, Abrechnung via Stripe

Profil & Account

Eigene Profilkarte mit Avatar, Rolle, Sprache & E-Mail
Bearbeiten von Anzeige-Namen & Avatar-Upload
Spracheinstellungen (mehrsprachig)
Passwort ändern oder zurücksetzen

Onboarding & Projekte

Beim ersten Login startet ein Willkommens-Dialog, der zur Anlage des ersten Projekts führt. Weitere Projekte lassen sich später einfach anlegen oder umbenennen.

Screenshots

SnapThat WordPress Plugin

Das offizielle SnapThat WordPress Plugin integriert das snapthat.plugin.js direkt in deine WordPress-Installation. Damit kannst du SnapThat ohne manuelles Code-Einfügen auf deiner Website nutzen.

Ein kostenfreier Account bei snapthat.dev ist erforderlich. Weitere Informationen findest du auf getsnapthat.com.

Installation

Im WordPress-Backend auf Plugins → Installieren → Plugin hochladen klicken.
Die ZIP-Datei snapthat-wp-plugin.zip hochladen.
Das Plugin aktivieren.
Die Konfiguration erfolgt unter Einstellungen → SnapThat.

Konfiguration

Im Backend stehen dir folgende Optionen zur Verfügung:

API-URL: Basis-URL der SnapThat API.
Brand-Farbe: Button-Farbe (Color-Picker).
Pin-Farbe: Farbe für Markierungen (Color-Picker).
Theme: Hell oder Dunkel.
Position: Links oder Rechts unten.
Offset X/Y: Abstand vom Rand.
Nur für bestimmte Nutzer/Gruppen: Eingrenzung, für wen das Plugin geladen wird.
Öffentlich aktivieren: Plugin für alle Besucher anzeigen.

Nutzung

Nach der Aktivierung erscheint auf der Website der SnapThat-Button. Darüber können Screenshots, Notizen, Pins und Aufgaben direkt erfasst werden.

WP Plugin Konfiguration — Konfigurationsseite im WP-Backend.

Frontend-Panel — Frontend mit SnapThat-Panel.