Visibility & page scope

Ways to limit the widgetCopy Anchor Link

You can also simply not load the script — for example render the snippet only for signed-in staff, or only on your staging deployment.

Environments and screen widthCopy Anchor Link

Set these on the project's Widget tab, in the Where it shows card: Environments (Everywhere / Not in production) and Minimum screen width. The rules run in the browser only; the server just stores the setting.

With environments: "non-production", a host counts as non-production — and the widget shows — when it is:

• localhost or *.localhost, a loopback address (127.x.x.x, ::1) or 0.0.0.0;
• a private LAN address (10.x, 192.168.x, 172.16–172.31.x);
• under .local, .test, .localhost or .internal;
• on a staging, stage, preview or dev subdomain, also numbered or suffixed (dev2.example.com, preview-42.example.com) — any label except the last, so pinwren.xride-labs.in itself is production;
• not a network host at all (a file: page).

Every other host is production. There the widget doesn't start at all — no launcher, no console or network wrappers, no replay — and logs [pinwren] hidden on this production host to the console.

Below minViewportWidth the widget closes and hides, and comes back when the window is widened again; Pinwren.open() does nothing while it is hidden.

Force it onCopy Anchor Link

data-force-show (or the forceShow init option) overrides both rules — useful to let one person review production, or to show the widget on a phone despite minViewportWidth:

<script src="https://feedback.example.com/widget.js" data-project="pk_…" data-force-show async></script>

Pinwren.init({ projectKey: "pk_…", endpoint: "https://feedback.example.com", forceShow: true });

Who gets the widgetCopy Anchor Link

visibility.mode decides who sees the widget at all. Like the rules above it runs in the browser; while a mode hides the widget, it makes no requests for pins.

Whatever the mode, Pinwren.show() and Pinwren.hide() override it until the other one is called, forceShow shows the widget, and so do a valid review link (?pinwren_review=<token>) and a signed "Open on page" link. A review link is remembered until the browser tab closes, asks the guest for their name before they send anything, and marks what they send with the link's name.

// mode "manual": show the widget to your own staff only
if (user.isStaff) Pinwren.show();

Page scopeCopy Anchor Link

By default pins belong to the page they were left on. Page addresses are grouped as described in Page review: no hash, no trailing slash, no tracking parameters, the query string sorted — so ?a=1&b=2, ?b=2&a=1&utm_source=x and the same with a trailing slash are one page. Pages built from one template — /product/1, /product/2, … — therefore each have their own pins.

To review the template once and see the same pins on every instance, give the page a URL pattern:

<script
  src="https://feedback.example.com/widget.js"
  data-project="pk_…"
  data-url-pattern="/product/:id"
  async
></script>

Pinwren.setPageScope({ urlPattern: "/product/:id" });
Pinwren.setPageScope(null); // back to exact-page pins

New feedback carries the pattern (page.urlPattern), and the widget asks the server for pins by pattern instead of exact URL.

Patterns match the path only — origin, query string and hash are ignored — and a trailing slash is optional. A pattern written as a full URL (https://example.com/product/:id) uses its path. Up to 500 characters.