vinofyi-embed

Embed VinoFYI beverage widgets — wines, recipes, glossary terms, and interactive tools — on any website. 8 widget types, zero dependencies, Shadow DOM style isolation, 4 built-in themes (light, dark, sepia, auto), and live data from the VinoFYI database.

Every widget includes a "Powered by VinoFYI" backlink directing readers to the full beverage reference.

Try the interactive widget builder at widget.vinofyi.com

Quick Start

<!-- Place widget div where you want it to appear -->
<div data-vinofyi="recipe" data-slug="wines" data-theme="light"></div>

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

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

Widget Types

Type	Usage	Description
recipe	<div data-vinofyi="recipe" data-slug="..."></div>	Recipe/entity card — ingredients, technique, ABV, glass type
compare	<div data-vinofyi="compare" data-slug="..."></div>	Side-by-side comparison of beverages or styles
glossary	<div data-vinofyi="glossary" data-slug="..."></div>	Glossary term definition with cross-references
faq	<div data-vinofyi="faq" data-slug="..."></div>	FAQ accordion for common beverage questions
guide	<div data-vinofyi="guide" data-slug="..."></div>	Tasting, brewing, or pairing guide summary
ingredient	<div data-vinofyi="ingredient" data-slug="..."></div>	Ingredient/variety card — spirit, grape, hop, coffee origin
pairing	<div data-vinofyi="pairing" data-slug="..."></div>	Food pairing suggestions — "What goes with...?"
search	<div data-vinofyi="search" data-slug="..."></div>	Search box linking to the full beverage database

Widget Options

Attribute	Values	Default	Description
data-vinofyi	recipe, compare, glossary, faq, guide, ingredient, pairing, search	required	Widget type
data-slug	e.g. "wines"	—	Entity slug from the VinoFYI database
data-theme	light, dark, sepia, auto	light	Visual theme (auto follows OS preference)
data-styleVariant	modern, classic	modern	Widget design style
data-size	default, compact, large	default	Widget size
data-placeholder	any string	"Search Wines..."	Search box placeholder

Themes

<!-- Light (default) -->
<div data-vinofyi="recipe" data-slug="wines" data-theme="light"></div>

<!-- Dark -->
<div data-vinofyi="recipe" data-slug="wines" data-theme="dark"></div>

<!-- Sepia -->
<div data-vinofyi="recipe" data-slug="wines" data-theme="sepia"></div>

<!-- Auto — follows OS dark/light preference -->
<div data-vinofyi="recipe" data-slug="wines" data-theme="auto"></div>

Web Components (Custom Elements)

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

<!-- Custom element form -->
<vinofyi-recipe slug="wines" theme="light"></vinofyi-recipe>
<vinofyi-compare slugs="wines,other-slug"></vinofyi-compare>
<vinofyi-search placeholder="Search Wines..."></vinofyi-search>

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

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

Examples

Recipe Card

<div data-vinofyi="recipe" data-slug="wines" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/vinofyi-embed@1/dist/embed.min.js"></script>

Side-by-Side Comparison

<div data-vinofyi="compare" data-slugs="wines,other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/vinofyi-embed@1/dist/embed.min.js"></script>

Search Box

<div data-vinofyi="search" data-placeholder="Search Wines..."></div>
<script src="https://cdn.jsdelivr.net/npm/vinofyi-embed@1/dist/embed.min.js"></script>

Glossary Term

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

CDN Options

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

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

Specific version (production stability)

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

npm (for bundlers)

npm install vinofyi-embed

import 'vinofyi-embed';

Technical Details

• Shadow DOM: Complete style isolation — no CSS conflicts with your site
• Zero dependencies: No jQuery, React, or any external library
• Geist Sans: Body text uses Geist Sans for a clean, modern look
• System fonts: Fallback to system-ui — no extra font requests
• CORS: VinoFYI 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: ~10-16KB gzipped (per-site build — only includes tools available on VinoFYI)

Learn More About Wines

Visit vinofyi.com — VinoFYI is a comprehensive wines reference with recipes, tasting notes, interactive tools, and beverage guides.

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

Beverage FYI Family

Part of FYIPedia — open-source developer tools ecosystem. Beverage FYI covers world beverages — cocktails, wine, beer, whiskey, sake, tea, and coffee.

Site	Domain	Focus	Package
CocktailFYI	cocktailfyi.com	636 cocktails, ABV, calories, flavor profiles, glass types	npm
VinoFYI	vinofyi.com	Wines, grapes, regions, wineries, food pairings	npm
BeerFYI	beerfyi.com	113 beer styles, hops, malts, yeast, BJCP guide	npm
BrewFYI	brewfyi.com	72 coffee varieties, roasting, 21 brew methods	npm
WhiskeyFYI	whiskeyfyi.com	2,200+ whiskey expressions, distilleries, regions	npm
TeaFYI	teafyi.com	60+ tea varieties, teaware, brewing guides	npm
NihonshuFYI	nihonshufyi.com	80 sake, rice varieties, 50 breweries	npm

Embed Widget

Embed VinoFYI widgets on any website with vinofyi-embed:

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