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-user-email, data-wk-user-name, data-wk-user-id | strings | Identify the signed-in user. 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 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 });
The script scans for anchors once, when it loads. In React, Vue, Svelte, Next.js and similar apps, render the anchor in the feedback page component and load the script after that component mounts, for example from an effect. If the script loads before the anchor exists, nothing renders.
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, the anchor probably did not exist when the script ran; see single-page apps above.
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.