Embed ZipFYI widgets — zip codes, glossary terms, interactive tools, and inline elements — on any website. 4 widget types, zero dependencies, Shadow DOM style isolation, 4 built-in themes (light, dark, sepia, auto), 2 styles (modern, clean), and live data from the ZipFYI database.
Every widget includes a "Powered by ZipFYI" backlink directing readers to the full reference.
Try the interactive widget builder at widget.zipfyi.com
<!-- Place widget div where you want it to appear -->
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="light"></div>
<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script>That's it. The widget fetches data from the ZipFYI API and renders with full style isolation.
| Type | Usage | Description |
|---|---|---|
entity |
<div data-zipfyi="entity" data-slug="..."></div> |
Entity detail card — city, mountain, earthquake, or postal code |
glossary |
<div data-zipfyi="glossary" data-slug="..."></div> |
Glossary term definition with cross-references |
faq |
<div data-zipfyi="faq" data-slug="..."></div> |
FAQ accordion with expand/collapse |
search |
<div data-zipfyi="search" data-slug="..."></div> |
Search box linking to the full database |
| Attribute | Values | Default | Description |
|---|---|---|---|
data-zipfyi |
entity, glossary, faq, search | required | Widget type |
data-slug |
e.g. "postal-codes" | — | Entity slug from the ZipFYI database |
data-theme |
light, dark, sepia, auto | light | Visual theme (auto follows OS preference) |
data-style |
modern, clean | modern | Widget design style |
data-size |
default, compact, large | default | Widget size |
data-placeholder |
any string | "Search ZIP Codes..." | Search box placeholder |
<!-- Light (default) -->
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="light"></div>
<!-- Dark -->
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="dark"></div>
<!-- Sepia -->
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="sepia"></div>
<!-- Auto — follows OS dark/light preference -->
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="auto"></div><!-- Modern (default) — clean lines, rounded corners, accent gradients -->
<div data-zipfyi="entity" data-slug="postal-codes" data-style="modern"></div>
<!-- Clean — minimal borders, utility-focused, data-first aesthetic -->
<div data-zipfyi="entity" data-slug="postal-codes" data-style="clean"></div>As an alternative to data-* attributes, you can use native HTML custom elements:
<!-- Custom element form -->
<zipfyi-entity slug="postal-codes" theme="light"></zipfyi-entity>
<zipfyi-search placeholder="Search ZIP Codes..."></zipfyi-search>
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script>Use style-variant (not style) to avoid conflicts with the HTML reserved style attribute.
<div data-zipfyi="entity" data-slug="postal-codes" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script><div data-zipfyi="search" data-placeholder="Search ZIP Codes..."></div>
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script><div data-zipfyi="glossary" data-slug="example-term" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1.0.0/dist/embed.min.js"></script>npm install zipfyi-embedimport 'zipfyi-embed';- Shadow DOM: Complete style isolation — no CSS conflicts with your site
- Zero dependencies: No jQuery, React, or any external library
- 2 styles: Modern (accent gradients) and Clean (minimal, data-first)
- 4 themes: Light, Dark, Sepia, Auto (OS preference detection)
- CORS: ZipFYI API has CORS enabled for all origins
- MutationObserver: Works with dynamically added elements (SPAs)
- IntersectionObserver: Lazy loading — widgets only fetch when entering viewport (200px margin)
- Rich Snippets: DefinedTerm JSON-LD injected for glossary widgets
- Bundle size: Tree-shaken per site — only includes tools available on ZipFYI
Visit zipfyi.com — ZipFYI is a comprehensive zip codes reference with interactive tools, guides, and developer resources.
- API docs: zipfyi.com/developers/
- Widget builder: widget.zipfyi.com
- npm package: npmjs.com/package/zipfyi-embed
- GitHub: github.com/fyipedia/zipfyi-embed
Part of FYIPedia — open-source developer tools ecosystem. Geo FYI covers distance, mountains, earthquakes, and postal codes. Hub: earthfyi.com.
| Site | Domain | Focus | Package |
|---|---|---|---|
| DistanceFYI | distancefyi.com | 33,336 cities, Haversine distance, travel times | npm |
| MountainFYI | mountainfyi.com | 2,000 mountains, elevation, difficulty grades | npm |
| QuakeFYI | quakefyi.com | 20,702 earthquakes, magnitude scale, USGS alerts | npm |
| ZipFYI | zipfyi.com | 41,488 postal codes, demographics, median income | npm |
| Package | PyPI | npm | Description |
|---|---|---|---|
| colorfyi | PyPI | npm | Color conversion, WCAG contrast, harmonies — colorfyi.com |
| emojifyi | PyPI | npm | Emoji encoding & metadata for 3,953 emojis — emojifyi.com |
| unitfyi | PyPI | npm | Unit conversion, 220 units — unitfyi.com |
| timefyi | PyPI | npm | Timezone ops & business hours — timefyi.com |
| holidayfyi | PyPI | npm | Holiday dates & Easter calculation — holidayfyi.com |
| namefyi | PyPI | npm | Korean romanization & Five Elements — namefyi.com |
| distancefyi | PyPI | npm | Haversine distance & travel times — distancefyi.com |
| fyipedia | PyPI | — | Unified CLI for all FYI tools — fyipedia.com |
Embed ZipFYI widgets on any website with zipfyi-embed:
<script src="https://cdn.jsdelivr.net/npm/zipfyi-embed@1/dist/embed.min.js"></script>
<div data-zipfyi="entity" data-slug="example"></div>Zero dependencies · Shadow DOM · 4 themes (light/dark/sepia/auto) · Widget docs
MIT — see LICENSE.
Built with care by FYIPedia.