Grátis por enquanto · sem cookies · um arquivo · pt, en, es

Widget do glossário de IA para o seu blog

Sublinhe termos de IA no seu site. Ao passar o mouse, ou ao tocar no celular, aparece a definição, uma pergunta para se testar e o link para continuar aprendendo no Tokencito.

Uso rápido

Dois passos: o script uma vez por página, e um link para o glossário com data-tokencito em cada termo.

<a href="https://tokencito.com/pt/glossario/cache-de-prompts/" data-tokencito rel="nofollow">cache de prompts</a>

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

Fica assim: Se o seu app manda sempre o mesmo manual, o cache de prompts baixa a conta. Antes vale entender o que é um token e por que os modelos às vezes alucinam.

Sem JavaScript, ou se o glossário não carregar, fica um link comum. O idioma vem do lang da sua página. O rel="nofollow" é o que o Google pede para links que chegam com um widget; os do pop-up já têm.

Exemplos

Sem link: um span com o id

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

Para responder com os seus documentos se usa RAG, que por sua vez se apoia em embeddings. Abre com o mouse, com um toque ou com Tab e Enter.

Outro idioma na mesma página

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

Um termo em inglês dentro de um texto em português: MCP.

Um termo que não existe

Fica como link comum, sem pop-up: Tokencito

Modo automático (desligado por padrão)

Com data-auto="true" o widget procura os termos do glossário no texto e marca só a primeira aparição de cada um. Não mexe em links, código, títulos nem no que estiver dentro de data-tokencito-off. Reconhece plurais e variantes comuns («alucinações», «agentes de IA»), e os links que cria seguem suas opções de UTM (com utm_campaign=glosario-auto), target e linkRel.

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

Tema escuro

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

Abrir com clique e mostrar só «Ver mais detalhes»

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

Opções

Como data-* no <script> (em kebab-case: data-auto-scope), ou em um objeto antes de carregá-lo. O <script> ganha. Uma opção que o widget não conhece é ignorada.

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

Opção	Valores	Padrão
`lang`	etiqueta de idioma: pt, pt-BR, en, es	o lang da página
`fallbackLang`	idioma se o termo não está no pedido	es
`theme`	light, dark, auto (o do sistema)	light
`trigger`	hover, click (com o dedo é sempre toque)	hover
`links`	quiz, more, play: quais mostrar	os três
`target`	_blank, _self	_blank
`linkRel`	rel dos links que o widget cria	nofollow
`utm`	true, false	true
`utmSource`	utm_source dos links	o seu domínio
`messages`	textos próprios por idioma (more, quiz, answer, lesson, play, close)	os do Tokencito
`nonce`	nonce de CSP para os estilos	o do script
`stats`	true, false: contar o uso (veja abaixo)	true
`auto`	true, false	false
`autoScope`	seletor onde procurar	article, main
`autoExclude`	ids separados por vírgula	nenhum
`autoLimit`	máximo de termos marcados	0, sem limite
`json`	outra URL do glossário	tokencito.com/glosario/v1.json

Em cada termo: data-tokencito="id" (se estiver vazio, sai do href) e data-tokencito-lang. Em um contêiner, data-tokencito-off desliga o modo automático lá dentro. Os ids e os links de cada termo estão no glossário e em tokencito.com/glosario/v1.json.

Estilo

O pop-up é isolado do CSS do seu site. Ajuste com variáveis e com ::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; }

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

API e 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 sobem a partir do termo, com detail = { id, lang, url, reason }: tokencito:open, tokencito:close e tokencito:link (mais link: quiz, more ou play). No document: tokencito:ready e tokencito:error. Servem para medir com o seu próprio analytics.

Teste a API com este termo: token

Eventos

Integração

SPA e view transitions do Astro: carregue o script como clássico (no Astro, <script is:inline src="…" defer>) e chame TokencitoGlosario.reset() a cada troca de página. Não funciona como type="module".
CSP: permita https://tokencito.com em script-src e connect-src. Os estilos usam o nonce do <script> (ou a opção nonce).
Iframes: o pop-up fica dentro do iframe; se o iframe for baixo, o pop-up rola lá dentro.
Navegadores: os dos últimos anos (Chrome, Safari, Firefox, Edge). Em um muito antigo, o termo fica como link.
Versões: v1.js recebe correções e novidades sem quebrar o que já funciona. Uma mudança que quebre seria v2.js, outro arquivo.

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

Estatísticas e privacidade

O widget não usa cookies nem carrega analytics no seu site. Para saber se ajuda, ele avisa o tokencito.com quando carrega em uma página, quando alguém abre um termo e quando toca um link do pop-up: uma vez por página, com o seu domínio, a página (sem parâmetros), o termo e o idioma. Sem identificadores que durem mais que a página. Desliga com data-stats="false". Se o seu site pede consentimento antes de medir (na UE, por exemplo, isso conta mesmo sem cookies), use data-stats="false" e, se quiser medir, mande os eventos tokencito:open e tokencito:link para o seu próprio analytics depois do sim.

Como qualquer script de outro domínio, baixar o script e o glossário mostra ao tokencito.com (Cloudflare) o IP e o navegador. Os links do pop-up levam UTM (desligam com data-utm="false"), e o tokencito.com tem analytics quando alguém chega. Mais na política de privacidade.

Condições

O widget é grátis por enquanto. Nós o oferecemos como está, sem garantia de que esteja sempre disponível, e podemos mudar estas condições ou deixar de oferecê-lo; se isso acontecer, avisamos com antecedência nesta página. Se algum dia não carregar, os seus termos ficam como links comuns para o glossário. Os textos do glossário são do Tokencito: aparecem no pop-up, não são copiados para o seu site.

Ideias, um termo que falta ou um problema? Escreva para [email protected]. Os testes do widget rodam nesta página.