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 you create a web app project, the Install the widget window opens with a code snippet that carries your unique project key. Copy the snippet and paste it into your site just before the closing body tag. To get back to it later, open the ... menu on the project card and choose Install code.
The same window has 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 verified once it sees it. You can also use the Check verification button in the Install the widget window.
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. It lists the comments from every page of your site, grouped by page path. Pins on the page itself only show the comments for the page you are on.
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 a guest opens the widget 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).
- With guest access off, you are sent to sign in straight away.
- With guest access on, the widget opens as it does for a guest. Hover the commenter avatars at the right end of the widget toolbar and click Team member? Sign in.
Once signed in, the widget appears without ?huddlekit, and your comments show your real name and avatar from your workspace.
Who sees the widget
Ordinary visitors to your site never see the widget. It only appears for:
- Signed-in workspace members, on any page of the site.
- Guests, when they open your site through the link from the web app's Share window, and only while Guest access to the widget is on. Once a guest has opened it this way, it stays for the rest of their browser session.
Guest access is off by default, so a new web app is team-only. To let clients or testers comment, open the ... menu on the project card, choose Share, and turn on Guest access to the widget. The same window gives you the link to send them. While guest access is on, anyone who has that link can comment, so turn it off when the review round is done.
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
- Pins are page-specific — a comment left on
/dashboardis not pinned on/settings. The sidebar still lists comments from every page, grouped by path. - 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 one you entered when you created the project. The protocol (
https://) and the full domain, including any subdomain, have to match. The path does not matter.