Shipnoted

Docs

Widget

The one-tag changelog, ideas and voting panel.

Install#

One script tag. It renders in a shadow root, so your CSS cannot break it and it cannot break yours.

<script src="https://shipnoted.com/widget.js" data-project="your-slug" async></script>

Options, all optional:

  • data-position="left" moves the button to the bottom-left.
  • data-label="Updates" changes the button text.
  • data-trigger="#my-button" opens it from your own element and hides the floating button.
  • data-feedback="false" hides the “Share an idea” tab.
window.Shipnoted.open()    // open the panel
window.Shipnoted.close()
window.Shipnoted.unread()  // number of unread releases

What visitors get#

  • Updates: your recent releases, a dot on the button while there are unread ones, and a “You asked for this” mark on a release that answers something they voted for. Visitors get it in their own language where you made a translation.
  • Share an idea: title and detail, existing look-alikes shown as they type so they vote instead of repeating, and (on Pro) a screenshot they can draw on and hide parts of.
  • Vote: the open requests, one tap each.

It is about 10 KB gzipped, loads with async, and follows your project’s theme, accent colour and radius from Design.

Announcements and groups#

Tick Announce it in your app on a release and the widget pops it up once for each visitor, next to the button, instead of only showing the dot. Dismissing or opening it marks it seen.

A release can also be aimed at a group (plan:pro, beta:true). It stays off the public changelog and feeds; signed-in customers in that group see it in the widget. That needs the widget to know who they are:

Identify signed-in users#

<script src="https://shipnoted.com/widget.js" data-project="your-slug" data-user-token="TOKEN" async></script>

<!-- or, once you have the token -->
<script>window.Shipnoted?.identify("TOKEN")</script>

The token is a short JWT your server signs; see Verified users. A token that has expired is dropped and the widget carries on for an anonymous visitor.