Embed a roadmap with the Web Component

Mount a published Hubbo roadmap into any element on your page using the embed script or the hubbo-roadmap custom element.

A published roadmap can be shown on your own page in three ways: a standalone Hubbo URL, an iframe, or the hubbo-roadmap Web Component. The admin app generates ready-made snippets in the roadmap editor under Share & embed.

Public and read-only

Roadmaps are public boards that anyone with the link can read. Visitors cannot vote on items. There is no voting feature.

Prerequisites

The roadmap must be published. Draft and archived roadmaps are not served.
You need the account key and the roadmap ID. Both are shown in the Share & embed panel.

Mount with the embed script

Add a container and a script tag that carries three parameters: key, roadmap and mount.

<div id="product-roadmap"></div>
<script src="https://api.hubbo.io/embed?key=ACCOUNT_KEY&roadmap=ROADMAP_ID&mount=%23product-roadmap" id="hubbo-embed-script" async type="module" crossorigin="use-credentials"></script>

mount is a CSS selector, URL-encoded. %23product-roadmap is #product-roadmap. If the selector does not match any element, the script logs a warning in the Console and nothing is mounted. If you omit mount, the board is appended to document.body.

Modes: inline and iframe

mode	What happens
inline (default)	The board is rendered inside the custom element using a Shadow DOM, styled with the roadmap appearance settings.
iframe	The custom element renders an iframe that points to app.hubbo.io/roadmap/{key}/{id}?embed=1, sized by the roadmap appearance (height 320 to 2000 px, default 640) and rounded by its border radius (0 to 32 px, default 12).

<div id="product-roadmap"></div>
<script src="https://api.hubbo.io/embed?key=ACCOUNT_KEY&roadmap=ROADMAP_ID&mount=%23product-roadmap&mode=iframe" id="hubbo-embed-script" async type="module" crossorigin="use-credentials"></script>

The hubbo-roadmap custom element

The embed bundle registers a custom element named hubbo-roadmap. Its attributes are roadmap-id, project-key and mode (inline or iframe). The script-tag form above creates and configures this element for you.

<hubbo-roadmap roadmap-id="ROADMAP_ID" project-key="ACCOUNT_KEY" mode="inline"></hubbo-roadmap>

The element needs the embed bundle on the page to be defined. If roadmap-id or the key is missing it renders the message “Missing roadmap id or project key.”, and if the roadmap cannot be loaded it renders an error message in place.

Iframe without the script

You do not need the script at all if an iframe is enough:

<iframe src="https://app.hubbo.io/roadmap/ACCOUNT_KEY/ROADMAP_ID?embed=1" title="Product roadmap" style="width:100%;height:640px;border:0;border-radius:12px;" loading="lazy"></iframe>

What the board shows

Columns (by default Now, Next and Later), cards with title, description, tags, status (planned, in progress, done, blocked), priority, owner, due date and an optional link. Which of these appear is controlled by the roadmap appearance toggles in the editor, for example hiding done items or using compact cards.

Roadmap mode loads only the roadmap

A script tag with a roadmap parameter mounts the roadmap and does not start notifications, NPS or surveys. Use a separate approach (standard snippet on the page, roadmap iframe for the board) when you need both.