Quick Start
Up and running in under 2 minutes.
1. Create a project
Sign up, create a project, and copy your site key from the Install tab of your project dashboard.
2. Add the script tag
Paste the snippet into the <head> of your staging site. That's it — the feedback panel will appear automatically.
<script async src="https://futureplans.app/sdk.js" data-site-key="fp_site_YOUR_KEY_HERE" ></script>
Staging only. Restrict which domains can load the panel by adding allowed origins in your project's Settings tab. The script will silently no-op on unlisted origins.
3. Invite your team
Anyone with your site key URL can authenticate via the panel. Share the staging link — no separate account invite flow required.
How It Works
Notes are bound to context, not just a screenshot.
futureplans stores each note with two pieces of context: the URL (including query parameters) and an optional DOM element ID. When a teammate opens the same URL, they see exactly the notes left on that page — no hunting through a shared inbox.
URL Scoping
Notes are scoped to the full URL path and query string. /checkout?step=2 and /checkout?step=3 stay separated automatically.
DOM Anchoring
Pin a note to a specific element by ID. The panel re-highlights the element when teammates revisit the URL.
Real-time Sync
Notes appear instantly for all authenticated users viewing the same URL. Typing indicators show active collaborators.
No Build Step
futureplans uses a single async script tag. It works with any tech stack — Next.js, Rails, Django, plain HTML.
Script Tag
The canonical integration method.
Load futureplans via a single script tag. The async attribute ensures it never blocks your page render. The panel is injected into a Shadow DOM root so futureplans styles never leak into your application.
<!-- Minimal --> <script async src="https://futureplans.app/sdk.js" data-site-key="fp_site_xxx"></script>
Place the tag anywhere in <head> or before the closing </body> tag. Order relative to your own scripts does not matter.
DOM Anchoring
Pin notes to specific elements.
When a user creates a note while hovering over an element that has an id attribute, futureplans records that ID alongside the note. Teammates visiting the same URL will see the element highlighted with a subtle indicator.
No extra setup required — just ensure your interactive elements have stable id attributes. Avoid auto-generated IDs that change between builds (e.g. :r3: from React).
<!-- Good: stable, human-readable id --> <section id="pricing-table">...</section> <button id="checkout-cta">Buy now</button> <!-- Avoid: generated or unstable ids --> <div id="radix-:r3:">...</div>
Tip: If an anchored element no longer exists (e.g. after a UI refactor), the note is still accessible — it simply displays without a highlight. Notes are never silently lost.
CSP Headers
Content-Security-Policy configuration.
If your staging environment sends a Content-Security-Policy header, add the following directives to allow futureplans to load:
Content-Security-Policy: script-src 'self' https://futureplans.app; frame-src https://futureplans.app; connect-src 'self' https://futureplans.app; img-src 'self' https://futureplans.app data:;
No inline scripts. The futureplans script never injects inline <script> tags, so you do not need 'unsafe-inline' in your script-src.
FAQ
Common questions.
Does it work on production sites?
futureplans is designed for staging environments. You can technically load it on production, but we recommend restricting origins in your project settings so only your team's IP range or staging domain can render the panel.
Will the script slow down my page?
No. The script tag uses async loading and defers all work until after the page is interactive. Total network overhead is under 30 KB gzipped. The panel is rendered in a separate iframe so it cannot block your main thread.
What happens when I update my UI and element IDs change?
Notes anchored to a now-missing element ID are not lost — they display in the panel without a DOM highlight. You can manually re-anchor them from the note detail view.
Does it work with single-page applications (SPAs)?
Yes. The script follows standard browser history changes in SPAs, so notes stay scoped to the current URL when your router updates navigation normally.
Is there a self-hosted option?
Not yet. A self-hosted Docker image is on our roadmap. If self-hosting is a hard requirement, reach out — we can discuss early access.
How are notes stored?
Notes are stored in Cloudflare D1 (SQLite) with full encryption at rest. We do not use note content for training or analytics.
Ready to start?
Create a project and paste the snippet — takes less than 2 minutes.