Embed the bug report widget in 30 seconds

Most tools that promise "easy integration" mean an SDK, a package install, an API key in your build pipeline, and an afternoon of reading docs. We wanted the widget to clear a much higher bar: a single script tag that works on any site, added in less time than it takes to read this paragraph. This post explains exactly how the embed works, how to add it on common stacks, and what happens under the hood.

The entire integration

From your dashboard, each widget has an embed snippet — one script tag containing your widget ID. You paste it into your site's HTML, ideally just before the closing body tag. That is the whole integration. When the page loads, the script injects a floating report button; clicking it opens a small modal where users enter a title and description, optionally attach a screenshot, and submit.

There is no build step, no npm package, no framework adapter, and no configuration file. The widget is plain JavaScript that runs in any page that can execute a script.

Adding it on common stacks

• Static HTML sites: paste the tag before the closing body tag in your template or in each page. Done.
• WordPress: add the tag through your theme's footer template, a code-injection plugin, or your theme settings' "footer scripts" field. No plugin development required.
• React, Next.js, Vue, and other SPAs: include the tag in your HTML template or root layout. In Next.js, the app layout is the natural home. Because the widget attaches itself to the DOM independently of your framework, it does not interfere with hydration or routing.
• Server-rendered apps (Rails, Django, Laravel, PHP): add the tag to your base layout template so it appears on every page.

Single-page applications deserve a special note: the widget keeps working across client-side route changes without re-initialization, and each report records the URL the user was actually on at submission time — not just the entry page. Navigation state is captured correctly for free.

What the script actually does

Transparency about third-party scripts matters, so here is precisely what happens when the page loads. The script fetches your widget's configuration (colors, position, enabled features) using the widget ID in the tag. It then renders a small floating button in the corner of the page. Nothing else happens until a user clicks the button.

On click, the modal opens with the report form. On submit, the report — title, description, page URL, viewport size, user agent, and any attached media — is sent to the API, saved to your dashboard, and forwarded to your configured Slack channel or Trello board. The widget does not track browsing behavior, does not read page content, and sends data only when a user explicitly submits a report.

Performance considerations

A feedback tool should never be the reason your site feels slow. The script is small, loads asynchronously, and does not block rendering. It adds no listeners beyond its own button and defers all meaningful work until the user actually opens the form. If you audit your site with Lighthouse before and after adding the widget, the difference should be negligible — and we treat it as a bug if it is not.

Testing your setup

A two-minute verification saves confusion later. After adding the tag, open your site in a regular browser window and confirm the button appears. Submit a test report with an obvious title like "TEST — please ignore." Then check all three destinations: the report should appear in your dashboard immediately, in your Slack channel within seconds if connected, and as a Trello card if that integration is on. If the button does not appear, the usual suspects are a content-security policy blocking the script domain or the tag accidentally placed inside a template that some pages do not use.

From embed to habit

The embed is intentionally the easiest part of the journey. The compounding value comes after: once reporting is a two-click action available on every page, users report issues you would never have heard about, and your team starts each fix with full context instead of an interrogation. Thirty seconds of integration, in exchange for a permanently better feedback loop, is about the best trade available in tooling.