CalcFYI Embed
Zero Dependencies · Shadow DOM · 4 Themes

Embed Calculators
on Any Website

Add CalcFYI 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 CalcFYI database.

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

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

Widget Preview

Calculators 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-calcfyi="entity" data-slug="compound-interest" data-theme="light"></div>
<div data-calcfyi="compare" data-slugs="item-a,item-b"></div>
<div data-calcfyi="search" data-placeholder="Search Calculators..."></div>

<!-- Step 2: Load the embed script once, anywhere -->
<script src="https://cdn.jsdelivr.net/npm/calcfyi-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 Calculators Data
From CalcFYI'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 CalcFYI" backlink.

Modern

Widget preview loads from live API

Clean

Widget preview loads from live API

Widget Options

Configure widgets with data-* attributes.

Attribute Values Default Description
data-calcfyientity, compare, glossary, guide, search, faq, [tools]requiredWidget type to render
data-slugany slug—Entity slug from the CalcFYI database
data-themelight, dark, sepia, autolightVisual theme (auto follows OS preference)
data-styleVariantmodern, cleanmodernWidget 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 documentation. Default style.

data-styleVariant="modern"
clean

Minimal borders, utility-focused, data-first aesthetic. Ideal for developer tools, dashboards, and reference sites.

data-styleVariant="clean"
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 reference guides, educational materials, and 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/calcfyi-embed@1/dist/embed.min.js"></script>

npm Package

For Webpack, Vite, Rollup bundlers.

Shell
npm install calcfyi-embed

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

Pinned Version

Lock to a specific version for production stability.

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

Guide FYI Family

Part of FYIPedia — open-source developer tools for unit conversion, timezones, holidays, and names. Hub: reffyi.com.

SiteDomainPackage
UnitFYIunitfyi.comnpm
TimeFYItimefyi.comnpm
HolidayFYIholidayfyi.comnpm
NameFYInamefyi.comnpm