Install FeatureVote

There are three ways to put FeatureVote in front of your users. Start with the link — it takes seconds and needs no code. You'll find copy-paste snippets for all three under FeatureVote → Install in your dashboard.

Option 1: Share a link (recommended)

The fastest way to collect your first vote. Copy your board link and drop it anywhere — an email, a Slack message, your onboarding flow, or a nav item.

https://your-account.featurevote.app

Point people at your product updates instead by adding ?tab=changelogs:

https://your-account.featurevote.app?tab=changelogs

Because it's just a link, you can build your own button or menu item and style it however you like — no widget required. To pre-fill the voter's identity, add query params (see Passing user identity below).

Option 2: Add a launch button

A small button that opens your board (or changelog) and shows a red dot when there's a new update. Paste it where you want it to appear:

<div data-account="your-account" data-embed="launcher" data-open="board"></div>
<script src="https://featurevote.app/embed.v2.js" async></script>

Launcher options

Add these attributes to the <div> to change what the button does and how it reads:

¹ The default label depends on the mode: Request feature (board), Suggest a feature (ask), View updates (changelogs).

You don't have to hand-write any of this. In your dashboard under FeatureVote → Install → More options → Customize the launch button, a visual editor lets you set the label, mode, and colors and copies the finished snippet for you.

Styling — it already matches your site

By default the launcher inherits your site's text color and font, so it blends in on light and dark pages with no styling needed.

The launcher renders inside an isolated shadow root. That means two things:

• Your page's CSS can't accidentally reach in and break the button — and the button's CSS can't leak out and affect your page.
• Because of that isolation, you can't style it with ordinary selectors. Instead, the launcher exposes two deliberate, stable hooks you're meant to target from your page's stylesheet.

Two ways to theme it — pick based on how far you want to go:

1. Colors only — the --fv-* custom properties. The quickest option. Set these on the container and they flow through the shadow boundary into the button. Good when you just want brand colors:

[data-account] {
  --fv-bg: #4f46e5;   /* button background */
  --fv-text: #ffffff; /* button text + icon */
  --fv-dot: #f59e0b;  /* the "new update" dot */
}

2. Full control — the ::part() selectors. The launcher tags its two inner elements as part="button" and part="dot", which you can style like any element — including states like :hover. Use this when you want to change shape, padding, radius, or anything beyond color:

[data-account]::part(button) {
  background: #4f46e5;
  color: #ffffff;
  border-radius: 9999px;
  padding: 10px 18px;
  width: auto; /* the default is a full-width row; opt into a compact button */
}
[data-account]::part(button):hover { background: #4338ca; }
[data-account]::part(dot) { background: #f59e0b; } /* the unread dot */

You can combine both — set the --fv-* colors and reach for ::part() only where you need more.

A note on shape: the default is a full-width row, designed to sit in a sidebar or nav column. For a compact inline button, set width: auto on ::part(button) as shown above.

Option 3: Embed the full board

Render your entire board inline — great for a help center, product portal, or internal dashboard.

<div data-account="your-account"></div>
<script src="https://featurevote.app/embed.v2.js" async></script>

Optional sizing:

<div
  data-account="your-account"
  data-width="100%"
  data-height="600px"
  data-border="1px solid #e5e7eb"
></div>
<script src="https://featurevote.app/embed.v2.js" async></script>

Passing user identity

If your app knows who the visitor is, pass their name and email so the feedback form is pre-filled.

On a link, add query params:

https://your-account.featurevote.app?email=jane@example.com&name=Jane%20Doe

On a launcher or board embed, add data attributes:

<div
  data-account="your-account"
  data-email="jane@example.com"
  data-name="Jane Doe"
></div>
<script src="https://featurevote.app/embed.v2.js" async></script>

Frameworks (React, Vue, SPAs)

Load the script once in your root layout or document head, then initialize the container after it mounts:

import { useEffect, useRef } from 'react';

function FeatureLauncher() {
  const ref = useRef(null);

  useEffect(() => {
    const init = () => window.FeatureVote?.initEmbeds(ref.current);
    init();
    window.addEventListener('featurevote:embed-ready', init, { once: true });
    return () => window.removeEventListener('featurevote:embed-ready', init);
  }, []);

  return (
    <div ref={ref} data-account="your-account" data-embed="launcher" data-open="board" />
  );
}

The same pattern applies to Vue (template ref + onMounted) and other frameworks — call window.FeatureVote.initEmbeds(el) once the container is in the DOM.

Platforms (WordPress, Shopify, Webflow…)

Any platform that allows custom HTML works. Look for a "Custom HTML" or "Embed Code" block and paste the snippet. On WordPress you can pass the logged-in user's identity:

<div
  data-account="your-account"
  data-email="<?php echo wp_get_current_user()->user_email; ?>"
  data-name="<?php echo wp_get_current_user()->display_name; ?>"
></div>
<script src="https://featurevote.app/embed.v2.js" async></script>

Not sure which to use?

Start with the link — it's the fastest path to your first real vote. Add the launch button when you want a persistent entry point with the new-update dot, and embed the board when you want it inline on a page.