trainfyi-embed

Embed TrainFYI widgets — stations, glossary terms, interactive tools, and inline elements — on any website. 6 widget types, zero dependencies, Shadow DOM style isolation, 4 built-in themes (light, dark, sepia, auto), 2 styles (modern, clean), and live data from the TrainFYI database.

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

Try the interactive widget builder at widget.trainfyi.com

Quick Start

<!-- Place widget div where you want it to appear -->
<div data-trainfyi="entity" data-slug="stations" data-theme="light"></div>

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

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

Widget Types

| Type | Usage | Description | |------|-------|-------------| | entity | <div data-trainfyi="entity" data-slug="..."></div> | Entity detail card — airport, airline, aircraft, or station | | faq | <div data-trainfyi="faq" data-slug="..."></div> | FAQ accordion with expand/collapse | | search | <div data-trainfyi="search" data-slug="..."></div> | Search box linking to the full database | | compare | <div data-trainfyi="compare" data-slug="..."></div> | Side-by-side entity comparison | | type-badge | <div data-trainfyi="type-badge" data-slug="..."></div> | Inline station type badge (e.g. "Terminal", "Junction") | | amenities | <div data-trainfyi="amenities" data-slug="..."></div> | Inline amenities strip showing station facilities |

Widget Options

| Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | data-trainfyi | entity, faq, search, compare, [tools] | required | Widget type | | data-slug | e.g. "stations" | — | Entity slug from the TrainFYI database | | data-theme | light, dark, sepia, auto | light | Visual theme (auto follows OS preference) | | data-style | modern, clean | modern | Widget design style | | data-size | default, compact, large | default | Widget size | | data-placeholder | any string | "Search Stations..." | Search box placeholder |

Themes

<!-- Light (default) -->
<div data-trainfyi="entity" data-slug="stations" data-theme="light"></div>

<!-- Dark -->
<div data-trainfyi="entity" data-slug="stations" data-theme="dark"></div>

<!-- Sepia -->
<div data-trainfyi="entity" data-slug="stations" data-theme="sepia"></div>

<!-- Auto — follows OS dark/light preference -->
<div data-trainfyi="entity" data-slug="stations" data-theme="auto"></div>

Styles

<!-- Modern (default) — clean lines, rounded corners, accent gradients -->
<div data-trainfyi="entity" data-slug="stations" data-style="modern"></div>

<!-- Clean — minimal borders, utility-focused, data-first aesthetic -->
<div data-trainfyi="entity" data-slug="stations" data-style="clean"></div>

Web Components (Custom Elements)

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

<!-- Custom element form -->
<trainfyi-entity slug="stations" theme="light"></trainfyi-entity>
<trainfyi-compare slugs="stations,other-slug"></trainfyi-compare>
<trainfyi-search placeholder="Search Stations..."></trainfyi-search>

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

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

Examples

Entity Card

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

Side-by-Side Comparison

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

Search Box

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

CDN Options

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

<script src="https://cdn.jsdelivr.net/npm/trainfyi-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 trainfyi-embed

import 'trainfyi-embed';

Technical Details

• Shadow DOM: Complete style isolation — no CSS conflicts with your site
• Zero dependencies: No jQuery, React, or any external library
• 2 styles: Modern (accent gradients) and Clean (minimal, data-first)
• 4 themes: Light, Dark, Sepia, Auto (OS preference detection)
• CORS: TrainFYI 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)
• Rich Snippets: DefinedTerm JSON-LD injected for glossary widgets
• Bundle size: Tree-shaken per site — only includes tools available on TrainFYI

Learn More About Stations

Visit trainfyi.com — TrainFYI is a comprehensive stations reference with interactive tools, guides, and developer resources.

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

Transport FYI Family

Part of FYIPedia — open-source developer tools ecosystem. Transport FYI covers airports, airlines, aircraft, and railway networks. Hub: transitfyi.com.

| Site | Domain | Focus | Package | |------|--------|-------|---------| | AirportFYI | airportfyi.com | 71,631 airports, IATA/ICAO codes, runways, routes | npm | | AirlineFYI | airlinefyi.com | 6,161 airlines, fleets, alliances, routes | npm | | PlaneFYI | planefyi.com | 81 aircraft types, specs, manufacturers, fleet data | npm | | TrainFYI | trainfyi.com | 51,425 stations, operators, route pairs | npm |

FYIPedia Developer Tools

| Package | PyPI | npm | Description | |---------|------|-----|-------------| | colorfyi | PyPI | npm | Color conversion, WCAG contrast, harmonies — colorfyi.com | | emojifyi | PyPI | npm | Emoji encoding & metadata for 3,953 emojis — emojifyi.com | | unitfyi | PyPI | npm | Unit conversion, 220 units — unitfyi.com | | timefyi | PyPI | npm | Timezone ops & business hours — timefyi.com | | holidayfyi | PyPI | npm | Holiday dates & Easter calculation — holidayfyi.com | | namefyi | PyPI | npm | Korean romanization & Five Elements — namefyi.com | | fyipedia | PyPI | — | Unified CLI for all FYI tools — fyipedia.com |

License

MIT — see LICENSE.

Built with care by FYIPedia.