NFCFYI Embed
Zero Dependencies · ~12KB · Shadow DOM · 14 Widget Types

Embed NFC Chips
on Any Website

Add NFCFYI specification cards, comparison tables, glossary terms, FAQs, guides, and interactive tools to any website with a single line of HTML. No build tools. No dependencies. Live data from the NFCFYI database.

Get Started GitHub → npm →
HTML
<!-- 1. Place the widget div -->
<div data-nfcfyi="spec" data-slug="example-slug"></div>

<!-- 2. Add the script once -->
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>

Spec Card Preview

NFC Chips Live Data
StandardISO / IEC
Frequency13.56 MHz
Rangeup to 10 cm
Data Rate106–848 kbit/s

Quick Start

Two lines of HTML. That's all it takes.

HTML
<!-- Step 1: Place widget divs anywhere on your page -->
<div data-nfcfyi="spec" data-slug="example" data-theme="light"></div>
<div data-nfcfyi="compare" data-slug-a="type-a" data-slug-b="type-b"></div>
<div data-nfcfyi="search" data-placeholder="Search NFC Chips…"></div>

<!-- Step 2: Load the embed script once, anywhere -->
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>
🔒
Shadow DOM Isolation
No CSS conflicts with your site.
⚡
Zero Dependencies
No jQuery, React. ~12KB gzipped.
📡
Live Technical Data
From NFCFYI's curated database.

14 Widget Types × 2 Styles × 3 Themes

Select a widget type to see both design styles in Light and Dark. Every widget includes Shadow DOM isolation and a "Powered by NFCFYI" backlink.

Widget Options

All configuration via data-* attributes. No JavaScript required.

AttributeValuesDefaultDescription
data-nfcfyispec, compare, features, glossary, faq, guide, search, frequency, …requiredWidget type
data-sluge.g. "ean-13", "nfc-type-a"—Entity slug from the NFCFYI database
data-themelight, dark, sepia, autolightVisual theme. auto follows OS preference
data-styleVarianttechnical, moderntechnicalDesign style — monospace technical or clean modern
data-sizecompact, default, largedefaultWidget width — 280px / 420px / 720px
data-slug-aany slug—First entity for compare widget
data-slug-bany slug—Second entity for compare widget
data-placeholderany stringSearch…Search box placeholder text

Styles & Themes

2 design styles × 3 themes. Mix and match to fit your site.

technical

Monospace font (JetBrains Mono), structured layout, data-table emphasis. Ideal for developer docs and technical blogs.

data-styleVariant="technical"
modern

System-ui font, card-based layout, rounded corners, icon accents. Ideal for product pages and marketing sites.

data-styleVariant="modern"
☀ Light + ☾ Dark

Set explicitly or use auto to follow the visitor's OS preference (prefers-color-scheme).

data-theme="auto"
📜 Sepia

Warm paper-tone background. Perfect for technical blogs, documentation sites, and e-readers.

data-theme="sepia"

CDN Options

Multiple delivery options to fit your workflow.

🚀

jsDelivr CDN

Global CDN, auto-updates with npm. Recommended for most use cases.

HTML
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1/dist/embed.min.js"></script>
📦

npm Package

For Webpack, Vite, Rollup bundlers.

Shell
npm install nfcfyi-embed

// In your JS/TS:
import 'nfcfyi-embed';
📋

Pinned Version

Lock to a specific version for production stability.

HTML
<script src="https://cdn.jsdelivr.net/npm/nfcfyi-embed@1.0.0/dist/embed.min.js"></script>

Tag FYI Family

Part of FYIPedia — open-source developer tools for identification, tagging, and wireless communication technologies.

SiteDomainPackage
BarcodeFYIbarcodefyi.comnpm
QRCodeFYIqrcodefyi.comnpm
NFCFYInfcfyi.comnpm
BLEFYIblefyi.comnpm
RFIDFYIrfidfyi.comnpm
SmartCardFYIsmartcardfyi.comnpm