Free for now · no cookies · one file · en, es, pt

AI glossary widget for your blog

Underline AI terms on your site. On hover, or on tap on a phone, it shows the definition, a question to test yourself and a link to keep learning on Tokencito.

Quick start

Two steps: the script once per page, and a link to the glossary with data-tokencito on each term.

<a href="https://tokencito.com/en/glossary/prompt-caching/" data-tokencito rel="nofollow">prompt caching</a>

<script src="https://tokencito.com/widget/v1.js" defer></script>

This is how it looks: If your app always sends the same manual, prompt caching lowers the bill. First, it helps to understand what a token is and why models sometimes hallucinate.

Without JavaScript, or if the glossary does not load, it stays a plain link. The language comes from your page lang. rel="nofollow" is what Google asks for links that come with a widget; the pop-up links already have it.

Examples

No link: a span with the id

<span data-tokencito="rag">RAG</span>

To answer from your own documents you use RAG, which relies on embeddings. It opens with the mouse, a tap, or Tab and Enter.

Another language on the same page

<span data-tokencito="mcp" data-tokencito-lang="pt">MCP</span>

A term in Portuguese inside an English text: MCP.

A term that does not exist

It stays a plain link, no pop-up: Tokencito

Automatic mode (off by default)

With data-auto="true" the widget looks for glossary terms in the text and marks only the first appearance of each. It skips links, code, headings and anything inside data-tokencito-off. It catches plurals and common variants ("hallucinations", "AI agents"), and the links it creates follow your UTM (with utm_campaign=glosario-auto), target and linkRel options.

<script src="https://tokencito.com/widget/v1.js" data-auto="true" data-auto-limit="5" defer></script>

Dark theme

<script src="https://tokencito.com/widget/v1.js" data-theme="dark" defer></script>

Open on click and show only «See more details»

<script src="https://tokencito.com/widget/v1.js" data-trigger="click" data-links="more" defer></script>

Options

As data-* on the <script> (in kebab-case: data-auto-scope), or in an object before loading it. The <script> wins. Unknown options are ignored.

<script>window.TokencitoGlosarioConfig = { theme: 'auto', links: ['more', 'play'] };</script>

Option	Values	Default
`lang`	language tag: en, es, pt, pt-BR	the page lang
`fallbackLang`	language when the term is missing in the one asked for	es
`theme`	light, dark, auto (the system one)	light
`trigger`	hover, click (with a finger it is always tap)	hover
`links`	quiz, more, play: which to show	all three
`target`	_blank, _self	_blank
`linkRel`	rel of the links the widget creates	nofollow
`utm`	true, false	true
`utmSource`	utm_source of the links	your domain
`messages`	your own texts per language (more, quiz, answer, lesson, play, close)	the Tokencito ones
`nonce`	CSP nonce for the styles	the script one
`stats`	true, false: count usage (see below)	true
`auto`	true, false	false
`autoScope`	selector to search in	article, main
`autoExclude`	comma separated ids	none
`autoLimit`	max terms marked	0, no limit
`json`	another glossary URL	tokencito.com/glosario/v1.json

On each term: data-tokencito="id" (if empty, it comes from the href) and data-tokencito-lang. On a container, data-tokencito-off turns automatic mode off inside it. The ids and links of every term are in the glossary and in tokencito.com/glosario/v1.json.

Styling

The pop-up is isolated from your site CSS. Adjust it with variables and ::part:

:root { --tokencito-accent: #0a7d55; --tokencito-radius: 8px; --tokencito-font: Georgia, serif; }
.tokencito-glosario::part(term) { text-transform: uppercase; }
[data-tokencito] { text-decoration-style: solid; }

Variables: --tokencito-accent, -bg, -text, -muted, -border, -radius, -font, -z. Parts: popup, brand, term, definition, quiz, question, answer, links, more, play, close.

API and events

TokencitoGlosario.open(element)   // Promise<boolean>
TokencitoGlosario.close()
TokencitoGlosario.scan(node)      // new content
TokencitoGlosario.reset()         // SPA: new page
TokencitoGlosario.destroy()
TokencitoGlosario.terms()         // Promise<terms>
TokencitoGlosario.version, TokencitoGlosario.options

document.addEventListener('tokencito:link', (e) => gtag('event', 'tokencito', e.detail));

Events that bubble from the term, with detail = { id, lang, url, reason }: tokencito:open, tokencito:close and tokencito:link (plus link: quiz, more or play). On document: tokencito:ready and tokencito:error. Use them to measure with your own analytics.

Try the API with this term: token

Events

Integration

SPAs and Astro view transitions: load the script as a classic script (in Astro, <script is:inline src="…" defer>) and call TokencitoGlosario.reset() on every page change. It does not work as type="module".
CSP: allow https://tokencito.com in script-src and connect-src. Styles use the <script> nonce (or the nonce option).
Iframes: the pop-up stays inside the iframe; if the iframe is short, the pop-up scrolls inside it.
Browsers: the ones from recent years (Chrome, Safari, Firefox, Edge). In a very old one, the term stays a link.
Versions: v1.js gets fixes and new features without breaking what already works. A breaking change would be v2.js, another file.

<script is:inline src="https://tokencito.com/widget/v1.js" defer></script>
<script is:inline>document.addEventListener('astro:page-load', () => window.TokencitoGlosario?.reset());</script>

Stats and privacy

The widget uses no cookies and loads no analytics on your site. To know whether it helps, it tells tokencito.com when it loads on a page, when someone opens a term and when they tap a pop-up link: once per page, with your domain, the page (no parameters), the term and the language. No identifiers that outlive the page. Turn it off with data-stats="false". If your site asks for consent before measuring (in the EU, for example, this counts even without cookies), use data-stats="false" and, if you want numbers, send the tokencito:open and tokencito:link events to your own analytics after the yes.

Like any script from another domain, loading the script and the glossary shows tokencito.com (Cloudflare) the IP and the browser. Pop-up links carry UTM tags (turn them off with data-utm="false"), and tokencito.com has analytics when someone arrives. More in the privacy policy.

Terms

The widget is free for now. We provide it as is, with no guarantee that it is always available, and we may change these terms or stop offering it; if that happens, we will say so in advance on this page. If it ever fails to load, your terms stay plain links to the glossary. The glossary texts belong to Tokencito: they are shown in the pop-up, not copied to your site.

Ideas, a missing term or a problem? Write to [email protected]. The widget tests run on this page.