Developers

Embeddable widget.

Put your feedback board or changelog inside your product with a single script tag. It opens in a slide-over panel, inherits your accent colour, and works on any site or framework.

app.lumen.io/settings

Share an idea

What would make Lumen better?

Signed in as GraceSend

Install

Paste this snippet before the closing </body> tag of your app. Replace YOUR-APP with your Murmur URL and lumen with your workspace slug. A launcher button appears in the bottom corner.

index.htmlhtml

<script
  src="https://YOUR-APP/widget.js"
  data-workspace="lumen"
  data-board="feature-requests"
  data-mode="feedback"
  async
></script>

Using React, Vue or another framework? The snippet is framework-agnostic — add it to your root HTML template, or inject it once on mount. It never loads twice.

Options

Configure the widget with data-* attributes on the script tag.

Field	Type	Description
data-workspace	string	Required. Your workspace slug.
data-board	string	Board slug to open in feedback mode. Defaults to your first public board.
data-mode	feedback \| changelog	What the panel shows. Default feedback.
data-position	right \| left	Which corner the launcher and panel use. Default right.
data-accent	hex colour	Launcher and highlight colour, e.g. #ff6106.
data-label	string	Launcher text. Defaults to “Feedback” or “What’s new”.
data-launcher	none	Hide the floating button and open the widget from your own UI.
data-button-radius	0–999	Corner rounding in px for the launcher and the buttons inside the panel. Default 999 (pill).
data-panel-radius	0–32	0 keeps a full-height drawer. Any rounding floats the panel with rounded corners; cards and fields inside follow it.

Changelog mode

Set data-mode="changelog" to show your latest releases instead of the board. You can run a feedback widget and a changelog widget on the same page — give them different positions.

changelog widgethtml

<script
  src="https://YOUR-APP/widget.js"
  data-workspace="lumen"
  data-mode="changelog"
  data-position="left"
  data-label="What’s new"
  async
></script>

JavaScript API

Once loaded, the script exposes a global Murmur object with three methods: Murmur.open(), Murmur.close() and Murmur.toggle(). Pressing Escape or clicking the backdrop closes the panel, and focus returns to wherever it was.

custom triggerhtml

<!-- Hide the floating launcher and use your own button -->
<script src="https://YOUR-APP/widget.js" data-workspace="lumen"
        data-launcher="none" async></script>

<button onclick="Murmur.open()">Give feedback</button>

<script>
  // Also available: Murmur.close() and Murmur.toggle()
  document.addEventListener("keydown", (e) => {
    if (e.key === "?" && e.shiftKey) Murmur.toggle();
  });
</script>

Identifying users

Votes and posts from the widget are attributed to the signed-in portal user. To record demand from your own app’s users without asking them to sign in, log votes on their behalf from your server with POST /api/v1/posts/{id}/votes.

Want to see the experience first? Open the live demo portal — the widget renders the same boards.

Content Security Policy

If your site sends a CSP header, allow your Murmur origin in script-src and frame-src. The widget injects a small scoped stylesheet, so style-src needs 'unsafe-inline' or a nonce.