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 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.
Once installed, the dashboard will automatically detect that the widget is active on your site.
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. Click the comments icon to show or hide comment pins on the page. |
| 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 and shows the comments sidebar for a focused review view. 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 Submit.
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 be able to see and use it, you can enable private mode in the web app project settings. In private mode, the widget is completely hidden for regular visitors — only signed-in team members can see it.
Customising the widget
The widget can be configured to match your site. In the project settings or via the script tag attributes you can adjust:
- Position — choose where the floating button appears (bottom-left, bottom-right, bottom-center, and more).
- Primary colour — set a hex colour to match your brand.
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 domains that do not match the URL set in your project settings.
