qrcodefyi-embed

Embed QRCodeFYI specification widgets — qr code 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 QRCodeFYI database.

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

Try the interactive widget builder at widget.qrcodefyi.com

Quick Start

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

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

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

Widget Types

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

Widget Options

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

Themes

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

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

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

<!-- Auto — follows OS dark/light preference -->
<div data-qrcodefyi="spec" data-slug="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 -->
<qrcodefyi-spec slug="types" theme="light"></qrcodefyi-spec>
<qrcodefyi-compare slug-a="types" slug-b="other-slug"></qrcodefyi-compare>
<qrcodefyi-search placeholder="Search QR Code Types…"></qrcodefyi-search>

<script src="https://cdn.jsdelivr.net/npm/qrcodefyi-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-qrcodefyi="spec" data-slug="types" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcodefyi-embed@1/dist/embed.min.js"></script>

Side-by-Side Comparison

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

Search Box

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

Glossary Term

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

CDN Options

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

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

Specific version (production stability)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/embed.min.js"></script>

npm (for bundlers)

npm install qrcodefyi-embed

import 'qrcodefyi-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: QRCodeFYI 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 QRCodeFYI)

Learn More About QR Code Types

Visit qrcodefyi.com — QRCodeFYI is a comprehensive qr code types technical reference with specifications, standards, interactive tools, and implementation guides.

• API docs: qrcodefyi.com/developers/
• Widget builder: widget.qrcodefyi.com
• npm package: npmjs.com/package/qrcodefyi-embed
• GitHub: github.com/fyipedia/qrcodefyi-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 |

License

MIT — see LICENSE.

Built with care by FYIPedia.