Embed NFCFYI specification widgets — nfc chips, technical standards, glossary terms, and interactive tools — on any website. 9 widget types, zero dependencies, Shadow DOM style isolation, 3 built-in themes (light, dark, sepia), and live data from the NFCFYI database.
Every widget includes a "Powered by NFCFYI" backlink directing readers to the full technical reference.
Try the interactive widget builder at widget.nfcfyi.com
<!-- Place widget div where you want it to appear -->
<div data-nfcfyi="spec" data-slug="chips" data-theme="light"></div>
<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>That's it. The widget fetches data from the NFCFYI API and renders with full style isolation.
| Type | Usage | Description |
|---|---|---|
spec |
<div data-nfcfyi="spec" data-slug="..."></div> |
Technical specification card — protocol, range, data rate, standards |
compare |
<div data-nfcfyi="compare" data-slug="..."></div> |
Side-by-side comparison of two technologies or standards |
features |
<div data-nfcfyi="features" data-slug="..."></div> |
Feature list card — capabilities, supported modes, variants |
glossary |
<div data-nfcfyi="glossary" data-slug="..."></div> |
Glossary term definition with cross-references |
faq |
<div data-nfcfyi="faq" data-slug="..."></div> |
FAQ accordion for common technical questions |
guide |
<div data-nfcfyi="guide" data-slug="..."></div> |
Implementation guide — setup, code examples, best practices |
search |
<div data-nfcfyi="search" data-slug="..."></div> |
Search box linking to the full technology database |
ndef-inspector |
<div data-nfcfyi="ndef-inspector" data-slug="..."></div> |
NDEF message inspector — parse type, payload, flags |
frequency |
<div data-nfcfyi="frequency" data-slug="..."></div> |
NFC frequency spectrum — HF 13.56 MHz band visualization |
| Attribute | Values | Default | Description |
|---|---|---|---|
data-nfcfyi |
spec, compare, features, glossary, faq, guide, search, [tools] | required | Widget type |
data-slug |
e.g. "chips" | — | Entity slug from the NFCFYI database |
data-theme |
light, dark, sepia, auto | light | Visual theme (auto follows OS preference) |
data-styleVariant |
technical, modern | technical | Widget design style |
data-size |
default, compact, large | default | Widget size |
data-placeholder |
any string | "Search NFC Chips…" | Search box placeholder |
<!-- Light (default) -->
<div data-nfcfyi="spec" data-slug="chips" data-theme="light"></div>
<!-- Dark -->
<div data-nfcfyi="spec" data-slug="chips" data-theme="dark"></div>
<!-- Sepia -->
<div data-nfcfyi="spec" data-slug="chips" data-theme="sepia"></div>
<!-- Auto — follows OS dark/light preference -->
<div data-nfcfyi="spec" data-slug="chips" data-theme="auto"></div>As an alternative to data-* attributes, you can use native HTML custom elements:
<!-- Custom element form -->
<nfcfyi-spec slug="chips" theme="light"></nfcfyi-spec>
<nfcfyi-compare slug-a="chips" slug-b="other-slug"></nfcfyi-compare>
<nfcfyi-search placeholder="Search NFC Chips…"></nfcfyi-search>
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>Use style-variant (not style) to avoid conflicts with the HTML reserved style attribute.
<div data-nfcfyi="spec" data-slug="chips" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script><div data-nfcfyi="compare" data-slug-a="chips" data-slug-b="other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script><div data-nfcfyi="search" data-placeholder="Search NFC Chips…"></div>
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script><div data-nfcfyi="glossary" data-slug="example-term" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/embed.min.js"></script>npm install nfcfyi-embedimport 'nfcfyi-embed';- Shadow DOM: Complete style isolation — no CSS conflicts with your site
- Zero dependencies: No jQuery, React, or any external library
- JetBrains Mono: Code blocks use JetBrains Mono loaded from jsDelivr
- System fonts: Body text uses system-ui — no extra font requests
- CORS: NFCFYI 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)
- Bundle size: ~11–16KB gzipped (per-site build — only includes tools available on NFCFYI)
Visit nfcfyi.com — NFCFYI is a comprehensive nfc chips technical reference with specifications, standards, interactive tools, and implementation guides.
- API docs: nfcfyi.com/developers/
- Widget builder: widget.nfcfyi.com
- npm package: npmjs.com/package/nfcfyi-embed
- GitHub: github.com/fyipedia/nfcfyi-embed
Part of FYIPedia — open-source developer tools ecosystem. Tag FYI covers identification, tagging, and wireless communication technologies.
| Site | Domain | Focus | Package |
|---|---|---|---|
| BarcodeFYI | barcodefyi.com | Barcode formats, EAN, UPC, ISBN, QR, Code 128 standards | npm |
| QRCodeFYI | qrcodefyi.com | QR code generation, scanning, error correction, encoding modes | npm |
| NFCFYI | nfcfyi.com | NFC tags, NDEF records, contactless payments, ISO 14443 | npm |
| BLEFYI | blefyi.com | Bluetooth Low Energy, GATT profiles, beacons, iBeacon, Eddystone | npm |
| RFIDFYI | rfidfyi.com | RFID tags, frequency bands, EPC Gen 2, ISO 18000 standards | npm |
| SmartCardFYI | smartcardfyi.com | Smart cards, EMV, APDU commands, Java Card, ISO 7816 | npm |
Embed NFCFYI widgets on any website with nfcfyi-embed:
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>
<div data-nfcfyi="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.