Upvoted

Request feature from anywhere with the one line embeddable widget.

Add the widget to any page in seconds - no complex setup required.
Embed your entire public board directly into your website to let users browse, vote, and comment without leaving your site.

Upvoted Embeddable Widget Integration Guide

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

✨ 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>

  2. Replace the data-client-key value with the API token generated from the Upvoted backoffice. Use a token with Read & Write permission; read-only tokens cannot create requests, comments, or upvotes.

  3. 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. Requires an API token with Read & Write permission.
  • data-allow-feature-comment (optional): when true, shows a comment form inside the feature modal. Fields required: name, email, comment. Requires an API token with Read & Write permission.
  • 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. Requires an API token with Read & Write permission.

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!