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{'&':'&','<':'<','>':'>','"':'"',"'":'''}[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 · 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 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 <aside> 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.
- 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.
