Accommodation rate
—
KPI cards
Approval rate
—
Conversion rate
—
Reading live numbers from Metabase…
How it works
- Server signs. The platform's server signs a short-lived token naming the question and every locked filter (whitelabel, merchant, application). The signing secret never leaves the server.
- Server fetches. It calls Metabase's signed data request,
GET /api/embed/card/<token>/query, server to server. Metabase answers no other site's browser (it sends no cross-origin headers), so this step cannot happen in the page. - Server hands rows to the page. It returns only the columns and rows the card needs, from
its own address (
/api/widgetshere). - Page draws. The page turns rows into the label, the value, the change and the line, and draws the card exactly as designed.
Every code block below is fetched from the file this demo actually runs, so it cannot drift from what you see working above.
1. Sign on the server
HS256 over resource.question, params (every locked filter, one value each) and
exp. File: /code/sign-token.js.
Loading…2. Fetch on the server
The demo's server is a Cloudflare Pages Function. It holds three finished, expiring tokens per scope as a
Cloudflare secret, never the signing secret. File: /code/widgets-handler.js (re-exported by
functions/api/widgets.js).
Loading…Loading…Loading…3. What the page receives
The response this page just received from /api/widgets (first two rows of each widget shown).
Decimal cells arrive as JSON strings ("0.468800"): parse every numeric cell with
Number(), and treat null or "" as "no value", never as zero. Window dates
roll daily.
Loading…4. Draw in the page
Value = the latest window's rate as a whole percent. Change = relative change against the previous window,
the same arithmetic as Metabase's trend widget. File: /js/card.js.
Loading…Loading…Loading…Rules
- Sign only on the server. A token signed in a browser means the secret is in the browser.
- Always set
exp. Metabase accepts a token without one, and it would never expire. - Never put a locked filter in the URL. Metabase refuses it; its value belongs inside the token. Every locked filter needs one real value: Metabase accepts an empty list and quietly falls back to the question's default for that filter.
- Re-test on every Metabase upgrade. The data request is listed in Metabase's API reference, but Metabase's API is not versioned and may change. The licence and terms say nothing either way about drawing your own chart from the data it returns.