One anchor element and one script tag render your feedback board inline on any web page. No npm package, no build step, no iframe. The board lives in its own Shadow DOM, so your CSS and its CSS never touch.
Requirements: a page where you can add HTML, including a script tag. Works in plain HTML, any framework, and site builders with a custom HTML block.
Put the anchor where the board should render, and the script tag anywhere after it. The script only needs to be on the page that shows the board.
1 <div data-wk-anchor data-wk-project-key="your-project-key"></div>
2 <script async src="https://www.wishkit.io/sdk/wishkit-web.js"></script>
The script URL is stable and shared by every customer. Updates reach your page without a deploy on your side.
All options are attributes on the anchor element.
| Attribute | Values | What it does |
|---|---|---|
data-wk-project-key | your key | Required. Identifies the project whose board to render. |
data-wk-badges | on | Shows status badges (Planned, In Progress, Completed) on requests. |
data-wk-comments | on | Lets users read and write comments in a request's detail view. |
data-wk-theme | light, dark, auto | Color scheme. Auto follows the visitor's system setting. Default is light. |
data-wk-watermark | off | Hides the "Powered by WishKit" line. Takes effect on paid plans. |
data-wk-email | off | Hides the optional email field on the submit form. Shown by default, so people can be told when their request ships. Hidden automatically when you already identify the user. |
data-wk-user-email, data-wk-user-name, data-wk-user-id | strings | Identify the signed-in user. See below. |
WishKit.render() | function | Not an attribute. Forces a scan for anchors, for frameworks that render outside the normal DOM flow. See below. |
Visitors vote anonymously by default and their votes stay consistent across visits. If your product knows who they are, pass it along and the dashboard shows real identities. Two ways:
Attributes on the anchor, rendered with the signed-in user's data:
1 <div data-wk-anchor data-wk-project-key="your-project-key"
2 data-wk-user-email="jane@example.com"
3 data-wk-user-name="Jane"
4 data-wk-user-id="user_8AHD1IL03ACIP"></div>
JavaScript, once the script has loaded, which suits sign-in after the page rendered. The payment value is per month in dollars (15 means $15) and lets the dashboard sort requests by revenue.
1 WishKit.identify({
2 email: "jane@example.com",
3 name: "Jane",
4 customID: "user_8AHD1IL03ACIP",
5 paymentPerMonth: 15
6 });
Nothing special to do. In React, Vue, Svelte, Next.js and similar apps, render the anchor wherever the feedback page lives and load the script however you like. The SDK watches the page, so an anchor added later by a client-side route mounts on its own, and routing away and back works without leaving anything behind.
If a framework renders outside the normal DOM flow and the board does not appear, call WishKit.render() after mounting to force a scan. It is safe to call as often as you like, because an anchor that already holds a board is skipped.
Give the board its own page, such as /feedback or /feature-requests, and link it from the main navigation or the footer with the label "Feedback" or "Feature Requests". The board is inline rather than a floating launcher, so it gets a URL you can link from emails and release notes, and it does not sit on top of your product on every page. The reasoning is in feedback widget vs inline board.
Open the browser console. A missing key logs [WishKit] Anchor is missing data-wk-project-key. If there is no message, check that the anchor carries the data-wk-anchor attribute, then call WishKit.render() from the console to confirm the anchor is reachable.
It should not, because it renders inside a Shadow DOM. If the page forces styles onto the host element itself, check for rules targeting [data-wk-anchor] or its parent.
Set data-wk-theme="dark" explicitly, or auto to follow the visitor's system setting. The default is light.