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.

Lightweight by design: the core widget is ~22KB gzipped and renders entirely inside its own Shadow DOM, so its styles never leak into your app (and your CSS can't break it). Session replay (rrweb, ~119KB) is only downloaded for projects on a plan with replay enabled — if you don't use it, that code never loads.

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.

Want to preview it first? Open any project and use the live Preview route to see the widget running in a sandbox.
Still stuck? Contact support