Public portal and widget setup

The portal is a shareable full-page experience. The widget is a floating button that opens a feedback panel on your existing site. Both use the selected project and send feedback to your dashboard. KyroFeedback is hosted at the fixed domain feedback.kyrocms.com; projects use a slug in the portal path and do not get a custom KyroFeedback domain.

Option A: Share the hosted portal

1. In your dashboard, choose the project in the sidebar.
2. Open Public Portal.
3. Select Open public portal to preview it.
4. Copy the shown URL and link to it from your product, help center, or customer email.

The public URL is:

https://feedback.kyrocms.com/p/YOUR-PROJECT-SLUG

Customers can open feedback details at /p/YOUR-PROJECT-SLUG/FEEDBACK_ID. They can submit feedback, comment, and vote according to the project permissions described below. Visitors can create/sign in to an account from the portal if they need to participate while anonymous actions are disabled. This public portal account UI is separate from the developer dashboard UI.

The hosted page uses the project’s widget title, welcome message, button label, and brand color. It also displays the project name, description, and website URL when configured.

Option B: Install the floating widget

Create a publishable key

Open API Keys and choose Create publishable key. Give it a recognizable name such as Production website. Copy the key from the creation panel or later from its row in the key list. KyroFeedback stores a hash for authentication and an encrypted copy so authorized project members can copy active keys again.

Publishable keys begin with pk_live_. They identify the project for browser integrations. Secret keys begin with sk_live_ and must never appear in the widget snippet.

Customize the experience

Open Widget and set:

• Panel title — heading at the top of the widget.
• Welcome message — short text above the submission action.
• Button label — accessible label and hover title for the icon launcher.
• Brand color — six-digit hex color used for the launcher and primary actions.
• Side spacing and bottom spacing — distance in pixels from the selected screen edges.
• Widget position — bottom right or bottom left for the generated embed.

Select Save experience. The experience is stored on the project and fetched by the widget when it opens. The preview shows the current settings. Use Save origin setting to apply the cross-origin option.

Add the embed to your website

In the same Widget page, enter the full publishable key, choose a position, and copy the generated snippet. Add it before the closing </body> tag on the pages where the widget should appear:

<script
  src="https://feedback.kyrocms.com/widget.js"
  data-project-key="pk_live_REPLACE_WITH_YOUR_KEY"
  data-position="bottom-right"
></script>

For the bottom-left position, use data-position="bottom-left". The widget is a plain JavaScript file and does not require React, Next.js, or another frontend framework on the customer website. It isolates its styles from the host page.

The widget opens a branded submission form with loading, error, and success states. It does not show the feedback list; customers can follow Visit feedback board to browse, vote, and discuss requests on the hosted portal. It calls the versioned /api/v1 endpoints and isolates its styles from the host page.

Test the installation

1. Load the real website page where you added the script.
2. Open the chat icon and confirm the title, message, and color match the dashboard settings. Use the feedback board link to browse existing requests.
3. Submit a test item with a clear title such as Widget installation test.
4. Return to KyroFeedback → Feedback and confirm the item appears under the same project.
5. Open the item and try a vote and comment if those actions are enabled.
6. Delete the test item from the dashboard when you are done.

Option C: Build your own customer experience

Use the publishable API to design your own form, feedback board, or in-product flow while keeping KyroFeedback as the feedback system of record. Start with the API guide. The public API is project-scoped by its key, and writes follow the project's anonymous feedback, comments, and voting settings.

Restrict keys to your website

By default, a project's public key is usable from any website when its Allowed Domains list is empty. To restrict browser requests:

1. Open Settings → Security.
2. Add the allowed website host, for example app.example.com.
3. Add each production host that loads the widget or calls the public API.
4. Add a local host such as localhost:3000 when you need local development.

On Dashboard → Widget, Allow this widget from any origin bypasses the Allowed Domains list. Leave it off to enforce the list when you have added domains.

The allowlist compares the request origin host (including a nonstandard port). When Allow this widget from any origin is off, only listed hosts can send browser requests; with an empty list, browser requests are rejected. When it is on, the list is bypassed, including for opaque null origins such as pages opened directly with file://. Non-browser server-to-server requests without an Origin header are not domain-restricted; protect server-side credentials and use the appropriate API key.

Customer participation settings

Open Settings → Security to configure:

• Allow anonymous feedback — signed-out visitors may submit feedback. Signed-in visitors can submit either way.
• Allow anonymous comments — signed-out visitors may comment or reply. Signed-in account holders can comment when this is off.
• Allow anonymous voting — signed-out visitors may vote. Signed-in account holders can vote when this is off.

Anonymous visitors may enter a display name where the form offers one. Their browser receives an anonymous identity cookie so votes and comment ownership can be associated with that browser. Clearing cookies or switching browsers creates a different anonymous identity.

Common embed mistakes

• Widget stays invisible: confirm the script is present on the rendered page, the URL points to the correct KyroFeedback host, and the browser console has no Content Security Policy block.
• Invalid API key: paste the full pk_live_ value, not the visible prefix. If the raw key is gone, rotate it and replace the snippet.
• Origin not allowed: add the exact host (and port, if present) under Settings → Security.
• Submission denied: check the anonymous feedback permission. Browser widget submissions use publishable-key permissions.
• Widget still shows old text: save settings, then reload the website. The widget fetches configuration when it opens.