Gratis por ahora · sin cookies · un archivo · es, en, pt

Widget del glosario de IA para tu blog

Subraya términos de IA en tu sitio. Al pasar el mouse, o al tocar en el celular, aparece la definición, una pregunta para ponerse a prueba y el link para seguir aprendiendo en Tokencito.

Uso rápido

Dos pasos: el script una vez por página, y un link al glosario con data-tokencito en cada término.

<a href="https://tokencito.com/glosario/cache-de-prompts/" data-tokencito rel="nofollow">caché de prompts</a>

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

Así queda: Si tu app manda siempre el mismo manual, el caché de prompts baja la cuenta. Antes conviene entender qué es un token y por qué los modelos a veces alucinan.

Sin JavaScript, o si el glosario no carga, queda un link común. El idioma sale del lang de tu página. El rel="nofollow" es lo que pide Google para links que llegan con un widget; los del pop-up ya lo llevan.

Ejemplos

Sin link: un span con el id

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

Para responder con tus documentos se usa RAG, que a su vez se apoya en embeddings. Se abre con el mouse, con un toque o con Tab y Enter.

Otro idioma en la misma página

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

Un término en portugués dentro de un texto en español: MCP.

Un término que no existe

Queda como link común, sin pop-up: Tokencito

Modo automático (apagado por defecto)

Con data-auto="true" el widget busca los términos del glosario en el texto y marca sólo la primera aparición de cada uno. No toca links, código, títulos ni lo que esté dentro de data-tokencito-off. Reconoce plurales y variantes comunes («alucinaciones», «agentes de IA»), y los links que crea siguen tus opciones de UTM (con utm_campaign=glosario-auto), target y linkRel.

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

Tema oscuro

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

Abrir con click y mostrar sólo «Ver más detalles»

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

Opciones

Como data-* en el <script> (en kebab-case: data-auto-scope), o en un objeto antes de cargarlo. El <script> gana. Una opción que el widget no conoce se ignora.

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

Opción	Valores	Por defecto
`lang`	etiqueta de idioma: es, en, pt, pt-BR	el lang de la página
`fallbackLang`	idioma si el término no está en el pedido	es
`theme`	light, dark, auto (el del sistema)	light
`trigger`	hover, click (con el dedo siempre es tocar)	hover
`links`	quiz, more, play: cuáles mostrar	los tres
`target`	_blank, _self	_blank
`linkRel`	rel de los links que crea el widget	nofollow
`utm`	true, false	true
`utmSource`	utm_source de los links	tu dominio
`messages`	textos propios por idioma (more, quiz, answer, lesson, play, close)	los de Tokencito
`nonce`	nonce de CSP para los estilos	el del script
`stats`	true, false: contar el uso (ver abajo)	true
`auto`	true, false	false
`autoScope`	selector donde buscar	article, main
`autoExclude`	ids separados por coma	ninguno
`autoLimit`	máximo de términos marcados	0, sin límite
`json`	otra URL del glosario	tokencito.com/glosario/v1.json

En cada término: data-tokencito="id" (si está vacío, sale del href) y data-tokencito-lang. En un contenedor, data-tokencito-off apaga el modo automático adentro. Los ids y los links de cada término están en el glosario y en tokencito.com/glosario/v1.json.

Estilo

El pop-up está aislado del CSS de tu sitio. Se ajusta con variables y con ::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. Partes: popup, brand, term, definition, quiz, question, answer, links, more, play, close.

API y eventos

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));

Eventos que burbujean desde el término, con detail = { id, lang, url, reason }: tokencito:open, tokencito:close y tokencito:link (más link: quiz, more o play). En document: tokencito:ready y tokencito:error. Sirven para medir con tu propio analytics.

Prueba la API con este término: token

Eventos

Integración

SPA y view transitions de Astro: carga el script como clásico (en Astro, <script is:inline src="…" defer>) y llama TokencitoGlosario.reset() en cada cambio de página. No funciona como type="module".
CSP: permite https://tokencito.com en script-src y connect-src. Los estilos usan el nonce del <script> (o la opción nonce).
Iframes: el pop-up queda dentro del iframe; si el iframe es bajo, el pop-up scrollea adentro.
Navegadores: los de los últimos años (Chrome, Safari, Firefox, Edge). En uno muy viejo, el término queda como link.
Versiones: v1.js recibe arreglos y cosas nuevas sin romper lo que ya funciona. Un cambio que rompa sería v2.js, otro archivo.

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

Estadísticas y privacidad

El widget no usa cookies ni carga analytics en tu sitio. Para saber si sirve, avisa a tokencito.com cuando carga en una página, cuando alguien abre un término y cuando toca un link del pop-up: una vez por página, con tu dominio, la página (sin parámetros), el término y el idioma. Sin identificadores que duren más que la página. Se apaga con data-stats="false". Si tu sitio pide consentimiento antes de medir (en la UE, por ejemplo, cuenta aunque no haya cookies), usa data-stats="false" y, si quieres medir, manda los eventos tokencito:open y tokencito:link a tu propio analytics después del sí.

Como cualquier script de otro dominio, bajar el script y el glosario le muestra a tokencito.com (Cloudflare) la IP y el navegador. Los links del pop-up llevan UTM (se apagan con data-utm="false"), y tokencito.com tiene analytics cuando alguien llega. Más en la política de privacidad.

Condiciones

El widget es gratis por ahora. Lo damos tal cual, sin garantía de que esté siempre disponible, y podemos cambiar estas condiciones o dejar de ofrecerlo; si pasa, lo avisamos con anticipación en esta página. Si algún día no carga, tus términos quedan como links comunes al glosario. Los textos del glosario son de Tokencito: se muestran en el pop-up, no se copian a tu sitio.

¿Ideas, un término que falta o un problema? Escríbenos a [email protected]. Los tests del widget corren en esta página.