Ety.ai Magic Embed

Embed the history of any word in seconds – no code, just copy-paste.

Comment

Inspiration

I was instantly inspired when I saw the theme of the ety.ai Moonshot Hackathon. Etymology—the history and origin of words—is a fascinating topic that appeals to language lovers, teachers, writers, and curious minds alike. However, there’s currently no simple way to embed ety.ai’s rich, AI-powered etymology content directly into blogs, educational sites, or personal projects. I wanted to build a tool that lets anyone (technical or non-technical) add a word’s full history to their website with just one click, making language learning and sharing far more engaging and accessible. That vision became the core inspiration behind Ety.ai Magic Embed.

What it does

Ety.ai Magic Embed is an extremely simple, plug-and-play widget that allows anyone to embed ety.ai word etymology on their website. Users simply type any word or phrase (e.g., "spring constant", "love", or "quantum entanglement") and click "Generate Embed". Instantly, they get:

A live, responsive preview in an iframe Ready-to-copy iframe code that works when pasted on any website No API keys, login, or complex setup required—just copy and paste!

How we built it

The entire project is built in a single index.html file using only vanilla technologies—no frameworks or external libraries:

HTML5 and CSS3 for a clean, mobile-friendly UI Vanilla JavaScript for the core logic: Takes input → URL-encodes it → constructs the link https://ety.ai/word/${encoded} Dynamically generates an iframe preview and embed code (with attribution)

Hosted on GitHub and automatically deployed for free on Vercel Tech stack: HTML, CSS, Vanilla JavaScript, GitHub, Vercel. Kept it lightweight by avoiding any build tools.

Challenges we ran into

Started on the very day of the deadline, so time was extremely limited. The @EtyHackBot was no longer active, so I couldn’t access the Starter Kit or any official API. Needed to verify whether ety.ai pages would load properly in iframes (luckily, they do!). Tempted to add more features (custom sizes, dark mode, etc.), but had to strictly control scope to meet the deadline.

Accomplishments that we're proud of

Built a fully functional, polished, and live-deployed widget in just a few hours. Created a realistic Track 2 submission using only ety.ai’s public pages, without needing private APIs. Delivered a true “one-click” experience that even non-technical users can enjoy. Completed and submitted a hackathon project under intense time pressure for the first time!

What we learned

Simple technologies like iframes can solve modern problems in powerful ways. Scope control and prioritization are the most important skills in a hackathon. How quickly projects can go live using tools like Vercel. Small UX details (like easy code copying) make a huge difference for users.

What's next for Ety.ai Magic Embed

Integrate the official ety.ai API (if available) for richer data and more customization options. Add customizable features: size options, dark/light themes, audio pronunciation. Build Chrome/Firefox extensions so users can view etymology instantly by selecting any word on a webpage. Expand with multi-language support and deeper integration for classrooms and educational platforms.

Built With

Share this project:

Updates