Getting started

Add AI translation, summaries, a reader Q&A, and recommendations to your articles with one script tag.

Prefer to see it first? Open the live demo — a real article running the widget.

Who does what

Three roles. Knowing which one you're in clears up most of the confusion.

You (operator)

Run GlassRead. Issue keys in the dashboard and watch usage. This is you.

A publisher

A news site that pastes your script tag onto its article template. (Could also be you, testing.)

A reader

Visits an article and uses the widget — switches language, asks questions. No sign-in.

Three steps to go live

Create a publishable key

Sign in at the dashboard → Create a key. Choose publishable (safe to put in a public page), and list the domains it may run on under allowed origins (e.g. https://yoursite.com). Copy the pk_… value.

Publishable vs secret. Publishable keys go in your HTML and are locked to the origins you list — like a Stripe pk_. Secret keys are for server-to-server calls and never belong in a browser.

Paste one script tag

Add this to your article template, just before </body>. Set data-selector to the element that contains your article text.

<script src="https://news-ai-global.vercel.app/widget.js"
        data-api-key="pk_live_your_key"
        data-selector="article"
        data-features="summary,ask,recommend"></script>

Pick your features

Every attribute below is optional except the first two. Tune them to taste.

Attribute	What it does
`data-api-key` required	Your publishable key (`pk_…`).
`data-selector` required	CSS selector for the element holding the article text, e.g. `article` or `.post-body`.
`data-features`	Comma list of engagement features: `summary`, `ask`, `recommend`. Omit to show just the translate/level controls.
`data-default-level`	Starting reading level: `A2`, `B1` (default), `B2`, `C1`.
`data-default-lang`	Language to load first (e.g. `es`). Defaults to the original.
`data-article-lang`	The language the article is written in. Default `en`.
`data-candidates`	JSON array of other articles for "read next": `[{"id","title","snippet","url"}]`. Needed for `recommend`.
`data-api-url`	Override the API endpoint. Defaults to the host that served `widget.js`.

What your readers get

A language & level control (translate any article inline, adjust difficulty), an optional Summary card at the top, an Ask box that answers from the article with citations, and a read-next row from your own catalog. Your original markup is restored exactly when a reader switches back to the source language.

Test before you ship: paste the tag on a staging page whose domain is in your key's allowed origins, then load it. If nothing happens, open the browser console — the widget logs a clear message if data-api-key or data-selector is missing, or if the origin isn't allowed (you'll see a 403).