Toolbar

The TrackCrumb Toolbar runs on top of your live product pages so you can pick CSS selectors, preview in-app messages, and overlay click heatmaps without leaving your browser or writing any code. It is delivered as a browser bookmarklet (no extension required).

The toolbar has three modes, switchable via a tab strip:

Selector — click to pick a stable CSS selector for an element and send it back to the dashboard.
Messages — preview the in-app messages currently targeting the page.
Heatmap — overlay a 7-day click-density heatmap on the page.

How it works

The dashboard generates a short-lived signed token (15-minute expiry).
The token is baked into a bookmarklet javascript: URL.
You drag the bookmarklet to your browser’s bookmarks bar (one-time setup per token).
On your product page, click the bookmark — a small floating toolbar appears.
Pick a mode and use the page as a logged-in customer would.

Installation

Step 1 — Generate a bookmarklet

Open Toolbar from the dashboard sidebar (/toolbar).

A signed bookmarklet link is generated automatically. Drag it to your browser’s bookmarks bar, or click Copy bookmarklet URL and create a bookmark manually by pasting the URL into the bookmark’s address field.

Token expiry: Bookmarklet tokens are valid for 15 minutes. Return to the Toolbar page to generate a fresh token if the toolbar shows a validation error.

Navigate to your product in the browser, then click the TrackCrumb Toolbar bookmark. The toolbar appears in the bottom-right corner of the page.

Step 3 — Pick an element (Selector mode)

Click Pick element. Move your cursor over the page — matched elements highlight. Click the target element. The toolbar exits pick mode and displays the captured selector. The selector is also sent back to the dashboard tab automatically.

In the dashboard’s message editor and rule builder, the Apply picked selector button auto-fills the field with the most recent selector you picked, plus a short history of the last three.

Messages mode

Switch to the Messages tab to preview in-app messages currently targeting the page. The toolbar fetches the active message list for the current URL and shows one entry per message with the kind, name, and trigger event.

Click Preview next to any message to render it inline on the page exactly as a real visitor would see it — tooltips anchor to their selector, banners pin to the top, modals overlay the page, and surveys show their first question. The preview auto-dismisses after eight seconds so you don’t have to interact with it.

The preview is local to your browser; nothing is recorded in your analytics data.

Heatmap mode

Switch to the Heatmap tab to overlay a click-density heatmap on the page for the last seven days. Circles are sized and coloured by frequency, ranging from blue (few clicks) through amber to red (many clicks). The toolbar status line shows the bucket count and the date range of the data.

Click Hide to remove the overlay. Reload or navigate to refresh the data.

CSS selector strategy

The toolbar uses the following priority to generate a stable selector:

Priority	Strategy	Example
1	`data-testid` attribute	`[data-testid="signup-button"]`
2	Unique `id` attribute	`#hero-cta`
3	Unique tag + class chain	`button.btn-primary.large`
4	`nth-of-type` path from body	`main > section:nth-of-type(2) > button`

Prefer data-testid on interactive elements in your product for the most stable selectors across deploys.

CSP / frame-ancestors

The toolbar runs entirely on the customer’s page — it is not iframed. However, the bookmarklet fetches toolbar.js from your dashboard origin via a <script> tag injection.

If your product’s Content Security Policy includes a script-src directive, you must allowlist the dashboard origin:

Content-Security-Policy: script-src 'self' https://app.YOUR_DOMAIN;

Replace app.YOUR_DOMAIN with your actual dashboard hostname (e.g. app.trackcrumb.com in production, localhost:3005 in local dev).

The toolbar does not require frame-ancestors because it does not use iframes.

Troubleshooting

”token validation failed” in the browser console

The bookmarklet token has expired (15-minute TTL). Return to /toolbar in the dashboard and drag a new bookmarklet from the refreshed page.

Confirm the page is not blocking javascript: URLs (some enterprise proxies strip them).
Open the browser console and look for [TrackCrumb Toolbar] error messages.
If script-src blocks the toolbar.js fetch, add the dashboard origin to your CSP (see above).

Selector is sent but not received in the dashboard

The postMessage target is the dashboard tab that opened the product tab. If you navigated to your product manually (rather than from the toolbar page), the opener reference is null and the message cannot be delivered. Open your product from a link on the toolbar page, or leave the dashboard tab open as the opener.

Elements inside the floating toolbar are excluded from pick mode. If the entire toolbar disappears, refresh the page and click the bookmark again.

Limitations

Browser extension mode (for sites that block bookmarklets) is a future enhancement.
Single-page apps that navigate via pushState without a full page reload may need a manual reload to refresh the Messages and Heatmap data for the new URL.

Settings From PostHog