What is the web app widget?
The Huddlekit widget is a small piece of code you add to your own website or web app. Once installed, it adds a floating button that lets your team and clients leave feedback directly on your site — even on pages that require a login or show user-specific content.
This is different from a website project, where Huddlekit loads the site for you. With a web app project, the widget runs inside your site.
See Creating your first project for help choosing between project types.
Installing the widget
After creating a web app project, you will be shown an installation page with your unique project key and a code snippet. Copy the snippet and paste it into your site just before the closing body tag.
The dashboard provides platform-specific guides for common setups including HTML, React / Next.js, Webflow, WordPress, Wix, Squarespace, Shopify, and Framer.
Then open your site. Huddlekit sends a verification check automatically and marks the widget as active once it sees it — you can also use the Check verification button on the setup page.
The widget interface
The widget appears as a floating button on your site. It stays out of the way until you need it and does not affect your site's existing design or layout.
Modes
The widget has three modes, accessible from the floating button or by keyboard shortcut:
| Mode | Shortcut | What it does |
|---|---|---|
| Browse | B | Default mode. View and navigate your site normally. Turn Show pins in browse mode on or off to reveal or hide comment pins while you browse. |
| Comment | C | Click anywhere on the page to drop a pin and leave a comment. The cursor changes to indicate you are in comment mode. |
| Inspect | I | Hover over any element to see its dimensions and styles — font, spacing, border radius, and more. No developer tools needed. |
Press F to toggle fullscreen, which hides the floating button for a clean, distraction-free view of your site. Press Escape at any time to close dialogs and step back out of the current mode.
Press M to open or close the comments sidebar, which shows all feedback left on the current page.
Leaving a comment
- Click Comment in the widget or press C.
- Click on the element or area you want to comment on.
- Type your feedback in the dialog that appears.
- Optionally set a priority level (Low, Medium, or Critical).
- Click the send button (the up arrow) to post your comment.
The comment is pinned to the element you clicked. Huddlekit captures a screenshot and records the page URL, page title, and device information automatically.
How guests leave comments
When someone visits your site and tries to leave a comment for the first time, they will be asked for their name (required) and email address (optional). Their details are saved in the browser so they do not need to re-enter them on future visits.
Guests who provide an email address can receive notifications when someone replies to their comment or mentions them. Guests without an email can still comment but will not receive notifications.
Guest identity is stored in the browser. If a guest clears their browser data or uses a private browsing window, they will be asked to introduce themselves again.
Team member access
Workspace members can sign in to the widget directly from your site. Visit your site with ?huddlekit added to the URL (e.g. yoursite.com/dashboard?huddlekit). A sign-in prompt will appear. Once signed in, your comments will show your real name and avatar from your workspace.
Keeping the widget team-only
By default the widget is visible to all visitors. If you only want workspace members to see and use it, turn off Public mode in the web app project's Visibility & Access settings. With Public mode off, regular visitors don't see the widget at all — only signed-in workspace members do, after visiting your site with ?huddlekit added to the address (once they have signed in, it appears automatically).
What gets captured with each comment
Every comment automatically records:
- The page URL and title
- The exact element clicked
- Viewport size and device information
- A screenshot of the page at the time of the comment
This context is visible to your team on the comment card, making it easier to reproduce and action feedback without needing extra information from the commenter.
Limitations
- Comments are page-specific — a comment left on
/dashboardwill not appear on/settings. The sidebar shows all comments across pages grouped by URL. - Guest identity is browser-based — clearing browser data or using incognito mode resets guest information.
- The widget only works on your registered domain — for security, the widget will not load on an address that does not match the Widget URL for your project.
