SpeciesFYI Embed
Zero Dependencies · Shadow DOM · 4 Themes

Embed Species
on Any Website

Add SpeciesFYI entity cards, comparison tables, glossary terms, interactive tools, and inline elements to any website with a single line of HTML. No build tools. No dependencies. Live data from the SpeciesFYI database.

Get Started GitHub → npm →
HTML
<!-- 1. Place the widget div -->
<div data-speciesfyi="entity" data-slug="species"></div>

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

Entity Card Preview

Species Live Data
TypeEntity Detail
StyleModern
ThemeLight
DataLive API

Quick Start

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

HTML
<!-- Step 1: Place widget divs anywhere on your page -->
<div data-speciesfyi="entity" data-slug="species" data-theme="light"></div>
<div data-speciesfyi="compare" data-slugs="item-a,item-b"></div>
<div data-speciesfyi="search" data-placeholder="Search Species..."></div>

<!-- Step 2: Load the embed script once, anywhere -->
<script src="https://cdn.jsdelivr.net/npm/speciesfyi-embed@1/dist/embed.min.js"></script>
Shadow DOM Isolation
No CSS conflicts with your site.
Zero Dependencies
No jQuery, React. Tree-shaken per site.
Live Nature Data
From SpeciesFYI's curated database.

Widget Types × 2 Styles × 3 Themes

Select a widget type to preview. Every widget includes Shadow DOM isolation and a "Powered by SpeciesFYI" backlink.

Modern

Widget preview loads from live API

Organic

Widget preview loads from live API

Widget Options

Configure widgets with data-* attributes.

Attribute Values Default Description
data-speciesfyientity, compare, glossary, guide, search, [tools]requiredWidget type to render
data-slugany slug—Entity slug from the SpeciesFYI database
data-themelight, dark, sepia, autolightVisual theme (auto follows OS preference)
data-styleVariantmodern, organicmodernWidget design style
data-sizedefault, compact, largedefaultWidget size
data-slugsslug-a,slug-b—Comma-separated slugs for compare widget
data-placeholderany stringSearch...Search box placeholder text

Styles & Themes

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

modern

Clean lines, rounded corners, accent gradients. Ideal for product pages and educational sites. Default style.

data-styleVariant="modern"
organic

Natural curves, earth-tone aesthetics, field-guide look. Ideal for nature blogs, conservation sites, and educational content.

data-styleVariant="organic"
Light + Dark + Auto

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 nature journals, field guides, and botanical documentation.

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/speciesfyi-embed@1/dist/embed.min.js"></script>

npm Package

For Webpack, Vite, Rollup bundlers.

Shell
npm install speciesfyi-embed

// In your JS/TS:
import 'speciesfyi-embed';

Pinned Version

Lock to a specific version for production stability.

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

Nature FYI Family

Part of FYIPedia — open-source developer tools for species taxonomy, ornithology, marine biology, botany, and paleontology. Hub: naturefyi.com.

SiteDomainPackage
SpeciesFYIspeciesfyi.comnpm
BirdFYIbirdfyi.comnpm
FishFYIfishfyi.comnpm
PlantFYIplantfyi.comnpm
DinoFYIdinofyi.comnpm