Embed the roadmap, board and changelog

Put a board on your own page. It inherits your font and uses your workspace theme.

Call init() once at your app root first. The board reuses that session, so a user you identify() is recognised in the board too. The drawing code loads the first time a board appears, so pages without one pay nothing.

The dashboard (Roadmap & Changelog > Publish) and the MCP server generate the exact code for your framework, with your key filled in.

Plain HTML

<script src="https://app.justonecx.com/sdk/justonecx-sdk.global.js"
        data-public-key="pk_your_workspace_key"
        data-api-url="https://api.justonecx.com"></script>

<justonecx-roadmap></justonecx-roadmap>
<justonecx-ideas></justonecx-ideas>
<justonecx-changelog></justonecx-changelog>

React, Next.js and others

import { useEffect, useRef } from "react";
import { mountRoadmap } from "@justonecx/sdk";

export function RoadmapBoard() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!ref.current) return;
    const handle = mountRoadmap(ref.current);
    return () => handle.destroy(); // StrictMode mounts twice; destroy() makes that safe
  }, []);
  return <div ref={ref} />;
}

In Next.js add "use client" at the top. In Vue, Svelte, Angular, Solid, Astro, Lit and the rest the pattern is the same: call mountRoadmap, mountIdeas or mountChangelog after mount and destroy() on unmount.

Routing

routing	Behaviour
"query" (default)	The open idea lives in ?idea=slug. Works on any page with no server setup.
"path"	Uses real paths such as /roadmap/add-zapier-integration. Set basePath and add a catch-all route so a shared link reaches the same page.
"none"	Keeps the state in memory only.

mountRoadmap(element, { routing: "path", basePath: "/roadmap" });

On a static host, rewrite /roadmap/* to your roadmap page. The dashboard generates the rule for nginx, Netlify, Vercel and Cloudflare.

Handle

mount* returns { destroy(), navigate(slug | null), on(event, callback) }. Events: vote, submit, comment, react, navigate.

Content Security Policy

The board loads a second script, justonecx-boards.global.js, from the same place as the SDK. If you use a strict CSP, allow that origin in script-src, or set boardsUrl in init.

CMS and site builders

WordPress, Webflow and Shopify: paste the HTML snippet from the dashboard into a custom code block.