Is this widget CC-BY 4.0?

Yes. The widget code (tooltip JS, iframe page, static badge HTML) and the underlying CASRAI Dictionary definitions are all released under CC-BY 4.0. You may use them on any site — commercial or otherwise — provided you attribute the CASRAI Dictionary, which the default snippets do automatically.

Does the widget track users?

No. The widget sets no cookies, runs no analytics, and sends no data anywhere except to fetch the term definition from casrai.org/api/lookup. The lookup endpoint logs only standard HTTP access metadata. No user identifiers or referrer-based tracking are recorded.

Can I customize the styling?

Yes. The tooltip variant ships with editable inline CSS — override the .casrai-tip class to match your site. The iframe variant accepts ?theme=light or ?theme=dark; deeper restyling requires self-hosting a copy of the embed page. The static badge is a single element with inline styles you can edit directly.

Do I need an API key?

No. The /api/lookup endpoint is public, unauthenticated, and CORS-open. We rely on CDN caching (5-minute Cache-Control) rather than per-key rate limiting. If your site has very high traffic, mirror the JSON response into your own CDN — the JSON is small and changes rarely.

What happens if the term gets renamed or removed?

Tooltip and iframe variants always reflect the live state — a removed term will show "Not found." The static badge bakes the definition in at generation time and will keep showing the old text; regenerate it from this page if you want to refresh.

Embeddable · Free · CC-BY 4.0

Lookup widget — embed CASRAI dictionary terms anywhere

Paste any CASRAI dictionary term URL and get drop-in embed code for your own page. Three flavours: an inline hover-tooltip, a sandboxed iframe card, or a static HTML badge for the most restrictive hosts. No API key, no account, no tracking.

Paste a dictionary term URL

Choose embed type

tooltip.html

html

<!-- CASRAI Dictionary tooltip widget -->
<!-- Paste anywhere on your page; runs once on DOMContentLoaded. -->
<!-- Any link of the form <a href="https://casrai.org/dictionary/term/X"> -->
<!-- will get a hover tooltip with the term's title + 1-line definition. -->
<style>
  .casrai-tip{position:absolute;z-index:9999;max-width:320px;padding:10px 12px;
    background:#0c1f2f;color:#fff;border-radius:6px;font:13px/1.45 system-ui,sans-serif;
    box-shadow:0 6px 24px rgba(0,0,0,.18);pointer-events:none;opacity:0;transition:opacity .15s}
  .casrai-tip.show{opacity:1}
  .casrai-tip .t{font-weight:600;font-size:13px;margin:0 0 4px}
  .casrai-tip .d{margin:0;color:rgba(255,255,255,.78);font-size:12px}
  .casrai-tip .f{margin-top:6px;font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase}
</style>
<script>
(function(){
  var API='https://casrai.org/api/lookup?slug=';
  var RE=/^https?:\/\/casrai\.org\/dictionary\/term\/([a-z0-9-]+)\/?$/i;
  var cache={};
  var tip=document.createElement('div');tip.className='casrai-tip';document.body.appendChild(tip);
  function esc(s){return String(s||'').replace(/[&<>"']/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]})}
  function render(d){tip.innerHTML='<p class="t">'+esc(d.title)+'</p><p class="d">'+esc(d.definition||'')+'</p><p class="f">CASRAI Dictionary &middot; CC-BY 4.0</p>'}
  function show(e,slug){
    var r=e.target.getBoundingClientRect();
    tip.style.left=(window.scrollX+r.left)+'px';
    tip.style.top=(window.scrollY+r.bottom+6)+'px';
    tip.classList.add('show');
    if(cache[slug]){render(cache[slug]);return}
    render({title:'Loading\u2026',definition:''});
    fetch(API+encodeURIComponent(slug)).then(function(r){return r.json()}).then(function(d){
      if(d&&d.title){cache[slug]=d;render(d)}else{render({title:'Not found',definition:''})}
    }).catch(function(){render({title:'Lookup failed',definition:''})});
  }
  function hide(){tip.classList.remove('show')}
  document.querySelectorAll('a[href*="casrai.org/dictionary/term/"]').forEach(function(a){
    var m=a.getAttribute('href').match(RE);if(!m)return;
    a.addEventListener('mouseenter',function(e){show(e,m[1])});
    a.addEventListener('mouseleave',hide);
    a.addEventListener('focus',function(e){show(e,m[1])});
    a.addEventListener('blur',hide);
  });
})();
</script>

How to embed — Inline tooltip

Paste the snippet anywhere in your page HTML — body, footer, or just before </body>. The script runs once on DOMContentLoaded, scans every <a href="https://casrai.org/dictionary/term/X"> link on the page, and binds hover + focus listeners. Tooltips fetch JSON from /api/lookup and cache per slug for the page lifetime. No bundler, no module loader, no React — works in any browser back to IE 10. Total wire weight: ~1.6 KB of inline JS + CSS.

Live preview

What the embed will look like on a third-party page.

No data yet.

Try a sample

FAQ

Common questions

Is this CC-BY 4.0?: Yes. Widget code and dictionary definitions are both CC-BY 4.0. Attribution is baked into the default snippets.
Does the widget track users?: No. Zero cookies, zero analytics, zero referrer logging. The only network call is to the lookup endpoint to fetch the term JSON.
Can I customize the styling?: Override .casrai-tip on the tooltip; pick a theme on the iframe (?theme=light|dark); edit the badge HTML directly.
Do I need an API key?: No. /api/lookup is public, CORS-open, with a 5-minute CDN cache. Mirror the JSON if you have very high traffic.
What about CSP / sandboxed pages?: Use the iframe or static badge. The tooltip needs inline <script>; if your CSP forbids that, prefer the iframe (sandbox-friendly) or the JS-free static badge.
Does the badge stay up to date?: No — the badge is a snapshot. Regenerate it from this page if the term definition changes. For always-live data use the tooltip or iframe.

GraphQL

Live programmatic access →

Bulk downloads

7 formats incl. JSON-LD →

MCP

AI-agent integration →