Install the widget

On this page

Proofback is a single JavaScript file. Drop it on any page of your site — marketing pages, in-app, docs — and the widget you picked renders there. Submissions land in your private inbox; you decide what becomes public.

The snippet

Add this to the <head> (or end of <body>) of every page where you want the widget to appear:

<script
  src="https://shippulse.dev/widget/loader.js"
  data-project-slug="your-project-slug"
  data-widget-type="feedback/fab"
  async
></script>

That is it for the self-mounting widgets (feedback/fab, changelog/feed, changelog/badge, testimonials/wall, testimonials/grid). The loader is async, never blocks render, and is a single ~18 KB file; the widget bundle itself is fetched on demand.

Host-mounted widgets need one more element

feedback/embedded, feedback/portal, roadmap/grid, roadmap/upvote-list and testimonials/capture render inside an element you place. Add a host div where the widget should appear:

<div data-shippulse-widget="roadmap/grid"></div>
<script
  src="https://shippulse.dev/widget/loader.js"
  data-project-slug="your-project-slug"
  data-widget-type="roadmap/grid"
  async
></script>

Without the host element these widgets mount nothing and log no host element with [data-shippulse-widget="…"] to the console.

Required attributes

  • data-project-slug — the slug from your dashboard. Unknown slug → the

config request returns 404 and the widget does not mount.

  • data-widget-type — one of the ten types in the

widget catalog (exactly as listed in /widget/manifest.json). Defaults to feedback/fab when omitted.

Optional attributes

  • data-theme-mode — light, dark, or auto (default: your project's

configured default, falling back to the visitor's OS preference).

  • data-z-index — override the stacking context for floating widgets if

your site has high z-indexed overlays.

  • data-locale — force the widget's display language (e.g. de); absent,

the visitor's browser language is used, falling back to English.

  • data-brand500="#7c3aed" — override brand color tokens inline

(data-brand<NNN> → --color-brand-<NNN>); dashboard theme settings usually make this unnecessary.

  • data-identify — signed end-user identity token for SSO installs (see

API docs). Your server signs it; the widget just forwards it.

Where the config comes from

The loader fetches https://shippulse.dev/api/widget/config?project_slug=<slug>&widget_type=<type> fresh on each page load (no client-side caching), so brand color, field configuration, copy strings and theme overrides set in your dashboard appear on the next page view — no redeploy needed.

Verifying the install

Open your page and look for the widget. If nothing appears, open DevTools:

  • Console says no bundle in manifest for <type> — the data-widget-type

value has a typo; copy it from the catalog.

  • Console says no host element — add the

<div data-shippulse-widget="<type>"> host (see above).

  • Console says origin denied (403) — this page's domain is not in your

project's allowed origins; add it under Settings → Domains.

  • Network shows the config request returning 404 — the project slug is

wrong.

Next

testimonials from voters when you ship.