smartcardfyi-embed

Embed SmartCardFYI specification widgets — smart card types, technical standards, glossary terms, and interactive tools — on any website. 8 widget types, zero dependencies, Shadow DOM style isolation, 3 built-in themes (light, dark, sepia), and live data from the SmartCardFYI database.

Every widget includes a "Powered by SmartCardFYI" backlink directing readers to the full technical reference.

Try the interactive widget builder at widget.smartcardfyi.com

Quick Start

<!-- Place widget div where you want it to appear -->
<div data-smartcardfyi="spec" data-slug="card-types" data-theme="light"></div>

<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>

That's it. The widget fetches data from the SmartCardFYI API and renders with full style isolation.

Widget Types

Type	Usage	Description
spec	<div data-smartcardfyi="spec" data-slug="..."></div>	Technical specification card — protocol, range, data rate, standards
compare	<div data-smartcardfyi="compare" data-slug="..."></div>	Side-by-side comparison of two technologies or standards
features	<div data-smartcardfyi="features" data-slug="..."></div>	Feature list card — capabilities, supported modes, variants
glossary	<div data-smartcardfyi="glossary" data-slug="..."></div>	Glossary term definition with cross-references
faq	<div data-smartcardfyi="faq" data-slug="..."></div>	FAQ accordion for common technical questions
guide	<div data-smartcardfyi="guide" data-slug="..."></div>	Implementation guide — setup, code examples, best practices
search	<div data-smartcardfyi="search" data-slug="..."></div>	Search box linking to the full technology database
standard	<div data-smartcardfyi="standard" data-slug="..."></div>	Smart card standard reference — ISO 7816, EMV, GlobalPlatform

Widget Options

Attribute	Values	Default	Description
data-smartcardfyi	spec, compare, features, glossary, faq, guide, search, [tools]	required	Widget type
data-slug	e.g. "card-types"	—	Entity slug from the SmartCardFYI 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 Smart Card Types…"	Search box placeholder

Themes

<!-- Light (default) -->
<div data-smartcardfyi="spec" data-slug="card-types" data-theme="light"></div>

<!-- Dark -->
<div data-smartcardfyi="spec" data-slug="card-types" data-theme="dark"></div>

<!-- Sepia -->
<div data-smartcardfyi="spec" data-slug="card-types" data-theme="sepia"></div>

<!-- Auto — follows OS dark/light preference -->
<div data-smartcardfyi="spec" data-slug="card-types" data-theme="auto"></div>

Web Components (Custom Elements)

As an alternative to data-* attributes, you can use native HTML custom elements:

<!-- Custom element form -->
<smartcardfyi-spec slug="card-types" theme="light"></smartcardfyi-spec>
<smartcardfyi-compare slug-a="card-types" slug-b="other-slug"></smartcardfyi-compare>
<smartcardfyi-search placeholder="Search Smart Card Types…"></smartcardfyi-search>

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

Use style-variant (not style) to avoid conflicts with the HTML reserved style attribute.

Examples

Specification Card

<div data-smartcardfyi="spec" data-slug="card-types" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>

Side-by-Side Comparison

<div data-smartcardfyi="compare" data-slug-a="card-types" data-slug-b="other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>

Search Box

<div data-smartcardfyi="search" data-placeholder="Search Smart Card Types…"></div>
<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>

Glossary Term

<div data-smartcardfyi="glossary" data-slug="example-term" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>

CDN Options

jsDelivr (recommended — global CDN, auto-updates with npm)

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

Specific version (production stability)

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

npm (for bundlers)

npm install smartcardfyi-embed

import 'smartcardfyi-embed';

Technical Details

• 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: SmartCardFYI 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 SmartCardFYI)

Learn More About Smart Card Types

Visit smartcardfyi.com — SmartCardFYI is a comprehensive smart card types technical reference with specifications, standards, interactive tools, and implementation guides.

• API docs: smartcardfyi.com/developers/
• Widget builder: widget.smartcardfyi.com
• npm package: npmjs.com/package/smartcardfyi-embed
• GitHub: github.com/fyipedia/smartcardfyi-embed

Tag FYI Family

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 Widget

Embed SmartCardFYI widgets on any website with smartcardfyi-embed:

<script src="https://cdn.jsdelivr.net/npm/smartcardfyi-embed@1/dist/embed.min.js"></script>
<div data-smartcardfyi="entity" data-slug="example"></div>

Zero dependencies · Shadow DOM · 4 themes (light/dark/sepia/auto) · Widget docs

License

MIT — see LICENSE.

Built with care by FYIPedia.