Add the meter to a page

Ten lines on each page, one config written by your build, and five account pages you copy. Nothing to deploy but files.

1. The element, where the charge happens

At the foot of the content, after the last paragraph a reader would reach:

<sg-meter view="page" kind="article" date="2026-10-11" topics="newsroom sg-meter"
          title="Going live with the reading meter"></sg-meter>

kind is the price class (article, issue, note, collection, page, free); an article newer than newDays is charged as article_new. date and topics feed the personas' picks; title is what the history shows. A page that should charge nothing is kind="free" quiet, which keeps the balance on screen without a card (a synthetic reader once took a vanished chip for lost credit).

<sg-meter class="meter-nav" view="balance"></sg-meter>

On every page, so a reader never loses sight of their balance. It marks a negative balance and opens the account.

3. The config, once

A JSON block with id sg-meter-config, the same on every page; write it in your build so it cannot drift. Prices in pence; every key has a default. The full shape and a live example are on the developer quick start. The parts you will change:

{"start": 500, "newDays": 7, "symbol": "£",
 "prices": {"article_new": 10, "article": 5, "issue": 3, "note": 2, "collection": 2, "page": 1, "free": 0},
 "topup": {"amount": 500, "link": ""},
 "links": {"account": "account/index.html", "topup": "account/top-up.html", "how": "about/the-meter.html"},
 "picks": {"feed": "articles/graphs.json", "base": "articles/"},
 "share": {"contact": ".well-known/sgit-subscribe.json", "form": "reading-share", "site": "your-site.example", "max": 300}}

Leave topup.link empty until your Stripe Payment Link exists: the top-up page then says that no money moves. The newsroom's gate refuses a test-mode link on a live page.

4. The import

<script>
import('https://api.newsroom.sgit.ai/v0.2.5/assets/components/sg-meter/v1/v1.4/v1.4.0/sg-meter.js')
 .catch(function (e) { console.error('[sg-meter] component failed to load:', e); });
</script>

Pinned to a release and a component version; neither is ever edited in place. Generate the URL from one place in your build (taking a release).

5. The account pages

Five pages your site serves, each a shell around one view: account/index.html (view="account"), account/top-up.html (topup), account/topped-up.html (topped-up; set it as the Stripe link's return URL with ?session_id={CHECKOUT_SESSION_ID}), account/newsroom.html (newsroom), account/personas.html (personas), and account/share.html (share). Copy the newsroom's: account/. The paths go in links and links2 of the config.

6. The feed

articles/graphs.json with one entry per article (slug, title, date, url, teaser, topics, tags) is what the picks and the persona graph read. The newsroom's build writes it from the articles; yours can write it from whatever you have. Without it the meter still charges; the newsroom view says the list could not be loaded.

7. Check it

Open a page: the chip shows £5.00; scroll to the foot and watch the balance fall; rate the page at the card and see the price move; reload in the same tab and see nothing charged twice. Then run tests/test_meter.mjs against your site (running the tests).

What to read before going live

Going live with the reading meter for what was switched on and in what order, Who will game the reading meter for the threat model, and the security model for the gaps the design accepts.