Skip to content

Floating roadmap widget and embeddable board #26

Description

@mukto90

Problem

The roadmap only lives on one page. Visitors have to know where it is. Product teams want it reachable from anywhere in the site (and from other sites such as the main marketing site or app docs) without rebuilding it.

Proposal

1. Floating launcher widget

  • Optional floating button ("Roadmap" / "Feedback", position bottom-right/left, color from the accent setting).
  • Click opens a slide-in panel or modal with the board (compact list layout) loaded lazily.
  • Visibility rules: all pages / selected pages / hide on specific pages / logged-in only. Respect prefers-reduced-motion.
  • Enabled from the Settings page; zero front-end cost when off.

2. Embeddable board for other sites

  • Public endpoint /?niroroadmap_embed=1&product=ID rendering a minimal, theme-neutral page for <iframe> use, with auto-resize through postMessage.
  • Copy-paste embed snippet generator in admin (iframe and a one-line <script> that injects the iframe).
  • Allowed-origins setting (controls Content-Security-Policy: frame-ancestors) so owners decide who can embed.
  • Votes made in an embed must go through the same server-side de-duplication.

3. Shortcode/block polish

  • [niroroadmap_button] shortcode and Roadmap link block that open the popup/panel from any button.

Acceptance criteria

  • Widget button appears only where visibility rules allow and does not break page layout or accessibility (focusable, labelled, ESC closes, focus returns to trigger).
  • Panel content loads on first open only.
  • Embed URL renders without theme header/footer, adjusts height automatically, and honours the allowed-origins setting.
  • Embed works inside a cross-origin iframe (cookies: SameSite=None; Secure needed for vote cookie, documented).
  • Admin shows a working copy-paste snippet.
  • Widget/embed styles are isolated (scoped CSS, no theme bleed).
  • No console errors on pages without the board.

Notes

  • X-Frame-Options must not block our own embed route but should stay on for the rest of the site.
  • Consider an loading="lazy" iframe.

Priority rationale

Low. Growth feature; valuable after the core feedback loop is solid.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

featureSomething we want to add

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions