Most public roadmaps live at a separate URL that users never visit. The typical journey: user has a feature idea, they search for where to submit it, they can't find it, they move on.
The fix is simple: bring the roadmap where users already are — inside your app.
Here's how to embed Roadmapr's widget in your SaaS product in under 15 minutes.
Why In-App Roadmaps Convert Better
When users are in your app, they're in product mode. They're experiencing the problem you're trying to solve. That's exactly the right moment to collect feedback and show them what's coming.
External roadmap pages see an average of 2% of your user base. Embedded in-app panels see 15-30% weekly active engagement. The channel matters as much as the content.
The Three Embed Options
Roadmapr offers three ways to embed:
1. Script Tag (Simplest)
A single script tag that loads a floating button. Click the button, the roadmap opens in a slide-over panel. No iframe, no performance hit.
2. iFrame Embed
Full roadmap in a dedicated page within your app. Best for apps that want a native "/roadmap" page inside the product.
3. React Component (Advanced)
For Next.js and React apps, a headless component gives you full control over the UI with Roadmapr's data layer underneath.
Script Tag Implementation (5 Minutes)
Add this to the `<head>` of any HTML page:
<script>
window.RoadmaprConfig = {
projectId: 'YOUR_PROJECT_ID',
position: 'bottom-right',
accentColor: '#10B981',
trigger: 'button',
};
</script>
<script src="https://roadmapr.in/widget.js" async></script>
This adds a floating "Roadmap" button. Clicking it opens your full roadmap in a side panel — including feature voting and changelog — without leaving the current page.
iFrame Implementation (Next.js)
Create a `/roadmap` page in your Next.js app:
// app/roadmap/page.tsx
export default function RoadmapPage() {
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
<h1>Product Roadmap</h1>
<iframe
src="https://roadmapr.in/p/YOUR_PROJECT_SLUG?embed=true"
style={{ flex: 1, border: 'none' }}
title="Product Roadmap"
/>
</div>
);
}
The `embed=true` param strips the Roadmapr navigation so it fits seamlessly in your app's frame.
React Component (Advanced)
For teams that want full UI control:
npm install @roadmapr/react
import { RoadmapBoard, ChangelogFeed } from '@roadmapr/react';
export default function RoadmapPage() {
return (
<div>
<RoadmapBoard
projectId="YOUR_PROJECT_ID"
onVote={(featureId) => console.log('Voted:', featureId)}
/>
<ChangelogFeed projectId="YOUR_PROJECT_ID" limit={5} />
</div>
);
}
This gives you the data and components, styled to match your design system.
Passing User Context
When users are logged in, pass their ID so votes and submissions are tracked:
window.RoadmaprConfig = {
projectId: 'YOUR_PROJECT_ID',
user: {
id: currentUser.id,
email: currentUser.email,
name: currentUser.name,
},
};
This enables:
Where to Place the Trigger
We've tested dozens of placements. The highest-engagement spots:
1. Sidebar navigation — A "Roadmap" or "What's new" link near the bottom of the nav. Always visible, low interruption.
2. Help menu — Alongside docs and support. Users in help mode are often in feedback mode.
3. Dashboard header — A subtle "✨ What's New" badge for changelog updates only.
4. Settings page — "Feature Requests" as a settings section works particularly well for B2B tools.
Avoid pop-up triggers on page load. The right moment for feedback is when users choose it — not when they're interrupted.
Measuring Widget Success
Track:
A healthy embedded roadmap sees 10-20% of active users engaging monthly. If you're below that, try repositioning the trigger or sending an in-app notification when new changelog entries are added.
The widget is live. Now keep the roadmap updated. That's the real work.
Ready to build your public roadmap?
Roadmapr gives you a public roadmap, feature voting, and a changelog in one place. Start on the Free plan and upgrade when your team grows.
Get Started Free