Getting started
Tugboat is a floating feedback button you embed in your web app. Testers tap it to send screenshots, screen recordings, voice notes and text — with technical context attached automatically. Here's the 2-minute setup. These docs are AI-friendly — you can hand the setup to your favorite AI assistant with one copy-paste.
Install with AI
Using Cursor, Copilot, Claude or ChatGPT? Copy this prompt, paste it into your AI assistant, and it'll wire Tugboat into your app for you.
Install the Tugboat feedback widget into my web app.
1. Add this script tag right before </body> (works with any framework — React, Vue, Angular, Svelte, Next.js or plain HTML; no npm install needed):
<script src="https://tugboatapp.com/widget.js" data-project-key="pk_your_key"></script>
Replace pk_your_key with my project key from the Tugboat dashboard (Projects → Settings).
Optional configuration:
- Keyboard shortcut: add data-hotkey="mod+shift+k" to the script tag (mod = Ctrl on Windows/Linux, ⌘ on Mac). Use data-hotkey="none" to disable.
- Manual trigger (no floating button): set the project to "manual" mode in Settings, then call Tugboat.open() from my own button/menu item.
- Audience targeting (for changelog & roadmap posts): identify the signed-in user with
Tugboat.identify({ plan: "pro", role: "admin", segments: ["beta"] });
or set window.tugboatUser = { plan, role, segments } before the script loads.
- Privacy: session replays already mask all inputs and auto-redact emails/phones/card numbers. Mark any sensitive region in my markup with data-tugboat-block (never recorded) or data-tugboat-mask (text masked).
Result: a floating "Feedback" button appears. Testers can send screenshots (with annotation), screen recordings with voice, voice notes and text — each with console/network logs, environment metadata and a session replay attached automatically.Our docs are also machine-readable at /llms.txt and /llms-full.txt — point your AI agent straight at them.
1. Create a project
In your dashboard, go to Projects → New project. Each project gets a unique project_key (looks like pk_…). Use one project per app or client deployment.
2. Embed the widget
Drop this one line before your closing </body> tag:
<script src="https://tugboatapp.com/widget.js"
data-project-key="pk_your_key"></script>It works with React, Vue, Angular, Svelte and plain HTML — any web app, plus mobile web & PWAs. No npm install required.
3. Collect feedback
A draggable tug appears bottom-right. Testers click it, pick a capture type, and their feedback sails straight to your dashboard, tagged by project. They can also press Ctrl/⌘ Shift K to open it instantly — see Keyboard shortcut.