Upvoted

Upvoted Embeddable Widget by Releasy CORP

This widget lets you inlcude the Upvoted feature requests in any website. Upvoted.

✨ Features

  • 🛡️ Fully Isolated - Shadow DOM encapsulation prevents style conflicts
  • 🚀 Modern Stack - Built with React 19, TypeScript, and Vite
  • 🔌 Simple Integration - Single line of code to embed
  • 🛠️ Developer Experience - Hot reload, TypeScript, and modern tooling

How to install the widget in your web app

  1. Load the widget on your page: 
<script
 src="https://cdn.jsdelivr.net/gh/releasysaas/upvoted-embeddable-widget@2.0.1/dist/widget.js"
 defer
 data-client-key="YOUR_API_TOKEN"
 data-class-name="dark"
></script>

  1. Replace the data-client-key value with the API token generated from the Upvoted backoffice.

  2. Set the data-class-name value with dark to load the widget in dark mode, otherwise leave it blank.

Embed the full board (new)

You can also embed the full board using the same script by switching the mode to board.

Minimal example (inserts after the script tag):

<script
src="https://cdn.jsdelivr.net/gh/releasysaas/upvoted-embeddable-widget@2.0.1/dist/widget.js"
defer
data-mode="board"
data-client-key="YOUR_API_TOKEN"
data-class-name="dark"
></script>

Mount into a specific element:

<div id="upvoted-board-here"></div>
<script
src="https://cdn.jsdelivr.net/gh/releasysaas/upvoted-embeddable-widget@2.0.1/dist/widget.js"
defer
data-mode="board"
data-embed-target="#upvoted-board-here"
data-height="700px"
data-client-key="YOUR_API_TOKEN"
data-class-name="dark"
data-statuses="pending,in_progress,done"
></script>

Supported attributes in board mode:

  • data-mode: board to enable board embed. Default is widget.
  • data-embed-target (optional): CSS selector where the board should mount. If omitted, the board is appended to document.body after the script tag.
  • data-client-key: your API token (required), used as Authorization: Bearer <token>.
  • data-class-name (optional): wrapper class, e.g. dark.
  • data-height (optional): height to apply if the target has no explicit height. Defaults to 800px.
  • data-statuses (optional): comma-separated list of status names to include (lowercased). If empty or omitted, loads all statuses.
  • data-allow-feature-request (optional): when true, renders the standard request widget below the board while preserving the board layout.
  • data-allow-feature-comment (optional): when true, shows a comment form inside the feature modal. Fields required: name, email, comment.
  • data-allow-feature-upvote (optional): when true, shows an Upvote action in the feature modal. Upvoting requires a contributor object with both name and email.

Example:

<div id="upvoted-board-here"></div>
<script
src="https://cdn.jsdelivr.net/gh/releasysaas/upvoted-embeddable-widget@2.0.1/dist/widget.js"
defer
data-mode="board"
data-embed-target="#upvoted-board-here"
data-client-key="YOUR_API_TOKEN"
data-allow-feature-request="true"
data-allow-feature-comment="true"
data-allow-feature-upvote="true"
></script>

See it in action

Check out this page to see it in action.

Changelog

2.0.1

  • Modal: fixed open in upvoted link
  • New attributes:
  • data-allow-feature-upvote: enable upvoting inside the modal. Requires contributor (name and email) to be provided.

2.0.0

  • Board embed UX: column headers styled to match Upvoted; primary color aligned (amber).
  • Cards: transparent thumbnails on white background; top-aligned crop; counters layout unified.
  • Modal:
  • Public/private vote split and total.
  • Image shows from top with white background.
  • Contributor name shown when available.
  • Improved styling (section borders, header accent).
  • Conditional public link (only when public_url exists).
  • New attributes:
  • data-allow-feature-request: render request widget below the board without breaking board height.
  • data-allow-feature-comment: show a required comment form (name, email, comment) inside the modal.
  • Docs: README and CONTRIBUTE updated; CDN version set to 2.0.0.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

About Releasy CORP, the SaaS company

Releasy CORP, We Build SaaS and Productivity Tools!