Install

One script tag. It renders in a shadow root, reserves its space and updates whenever you change an item. Replace <slug> with your roadmap’s slug.

Script tag

Put the container where the roadmap should appear, then the script anywhere after it.

HTML

<div id="furyroadmap"></div>
<script async src="https://furyroadmap.fun/embed.js" data-roadmap="<slug>"></script>

Script tag attributes
Attribute	What it does
data-roadmapDefault: required	Your roadmap slug.
data-targetDefault: #furyroadmap	CSS selector of the element to render into.
data-layoutDefault: theme layout	columns, list or timeline. Overrides the theme.
data-themeDefault: theme mode	light, dark or auto. Overrides the theme.

React / Next.js

Load the script from an effect so it runs after hydration. Mounting is idempotent, so Strict Mode is fine.

React

// components/RoadmapEmbed.tsx
"use client";

import { useEffect } from "react";

export function RoadmapEmbed() {
  useEffect(() => {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://furyroadmap.fun/embed.js";
    script.dataset.roadmap = "<slug>";
    script.dataset.target = "#furyroadmap";
    document.body.appendChild(script);
    return () => script.remove();
  }, []);

  return <div id="furyroadmap" />;
}

Iframe

When you cannot run third-party scripts. The page accepts ?layout= and ?theme= with the same values as the attributes above.

HTML

<iframe src="https://furyroadmap.fun/embed/<slug>?layout=columns&theme=auto" title="Roadmap" style="width:100%;border:0;min-height:480px" loading="lazy"></iframe>

The page posts its height to the parent. This listener keeps the frame sized to its content:

HTML

<script>
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://furyroadmap.fun' || !event.data || event.data.type !== 'furyroadmap:height' || event.data.slug !== '<slug>') return;
    const frame = document.querySelector('iframe[src*="/embed/<slug>"]');
    if (frame) frame.style.height = event.data.height + 'px';
  });
</script>

API

Public, read-only, CORS enabled. Cached with public, max-age=0, s-maxage=60, stale-while-revalidate=86400. descriptionHtml is sanitized markdown; everything else is plain text.

HTTP

GET https://furyroadmap.fun/api/v1/public/roadmaps/furyroadmap

{
  "slug": "furyroadmap",
  "name": "FuryRoadMap",
  "tagline": "What we're building, in the open.",
  "theme": { "mode": "light", "layout": "columns", "colors": { "primary": "#3052AE", ... }, ... },
  "badge": true,
  "columns": [
    { "status": "planned", "label": "Planned", "items": [
      { "id": "…", "title": "Public API", "descriptionHtml": "<p>Read-only, v1.</p>",
        "target": "Q1", "tags": ["api"], "shippedAt": null }
    ]},
    { "status": "in_progress", "label": "In progress", "items": [] },
    { "status": "shipped", "label": "Shipped", "items": [] }
  ],
  "updatedAt": "2026-10-07T09:12:00.000Z"
}

With a coding assistant

Your dashboard’s Install page has this prompt with your slug filled in. Paste it into Claude Code, Codex or Cursor in your site’s repo, or into the Lovable or Bolt chat. It installs the roadmap in your site’s own layout.

Prompt

Add our public product roadmap to this site using FuryRoadMap.

Context: FuryRoadMap serves our roadmap as an embeddable widget. Our roadmap slug is "<slug>".
Docs: https://furyroadmap.fun/docs/install (also available at https://furyroadmap.fun/llms.txt).

Do this:
1. Detect the framework and routing of this project (plain HTML, Next.js, React, Vue, Astro, SvelteKit, Webflow export, etc.).
2. Add a "Roadmap" section to the main landing page, placed after the features/benefits section and before pricing or the footer. Match the existing section spacing, max-width, heading style and background. Heading text: "Roadmap". Optional one-line subheading: "What we're building, in the open."
3. Inside that section, add:
   <div id="furyroadmap"></div>
   <script async src="https://furyroadmap.fun/embed.js" data-roadmap="<slug>"></script>
   In React/Next.js, load the script in a client component with useEffect (or next/script with strategy="afterInteractive") and render the div; do not server-render the widget's content.
4. If the site has a navigation bar, add a "Roadmap" link that scrolls to the section (anchor #roadmap on the section).
5. Do not change anything else. Do not add CSS targeting the widget: it styles itself inside a shadow root.
6. Run the site locally and verify the roadmap renders. If the container is constrained narrower than ~720px, it will stack vertically; that's expected.
7. Summarize what you changed and which files you touched.