ReadWhitepaper Embed Widget

Add blockchain whitepaper cards, glossary terms, guides, and search to any website. 4 widget types, 4 themes, Shadow DOM isolation, zero dependencies.

Get Started GitHub npm

Quick Start

Copy and paste this code into your HTML to embed a whitepaper card:

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

<!-- Whitepaper card -->
<div data-readwhitepaper="entity" data-slug="bitcoin"></div>

<!-- Glossary term -->
<div data-readwhitepaper="glossary" data-slug="proof-of-work" data-theme="dark"></div>HTML

Live Demo

These widgets load data from the ReadWhitepaper API:

Widget Types

Four widget types to embed blockchain whitepaper content anywhere:

Whitepaper Card

Full whitepaper card with title, abstract excerpt, and publication year. Links to the full whitepaper on ReadWhitepaper.

data-readwhitepaper="entity"

Glossary Term

Blockchain/crypto glossary definition card. Sourced from the ReadWhitepaper Glossary.

data-readwhitepaper="glossary"

Guide Card

Blockchain guide summary card with excerpt and link. Browse all ReadWhitepaper Guides.

data-readwhitepaper="guide"

Search Widget

Search form linking to ReadWhitepaper search results.

data-readwhitepaper="search"

Themes & Styles

4 themes (light, dark, sepia, auto) and 2 styles (modern, minimal). The auto theme follows the user's system preference via prefers-color-scheme.


Light

Dark

Sepia

Auto

Widget Options

AttributeValuesDefault
data-readwhitepaperentity, glossary, guide, searchRequired
data-slugWhitepaper or term slugRequired
data-themelight, dark, sepia, autoauto
data-sizecompact, default, largedefault
data-style-variantmodern, minimalmodern
data-no-snippettrue (disable rich snippets)Enabled

CDN Options

The widget is served from jsDelivr CDN with automatic version pinning:

<!-- Recommended: jsDelivr (auto-cached, global CDN) -->
<script src="https://cdn.jsdelivr.net/npm/readwhitepaper-embed@1/dist/embed.min.js"></script>

<!-- Alternative: npm install -->
npm install readwhitepaper-embedSHELL

FAQ

Which blockchain whitepapers does ReadWhitepaper cover?

All major Layer-1 protocols (Bitcoin, Ethereum, Solana, Cardano, Polkadot), Layer-2 scaling (Lightning, Optimism, Arbitrum, zkSync, Polygon), DeFi protocols (Uniswap, Aave, Compound, MakerDAO, Curve), oracles (Chainlink, Pyth), decentralized storage (Filecoin, Arweave, IPFS). Each rendered with key claim extraction + reading time.

What does the glossary widget cover?

Core blockchain concepts: Proof of Work, Proof of Stake, consensus algorithms, cryptography (zero-knowledge proofs, elliptic curves, hash functions), tokenomics, DeFi primitives (AMM, liquidity pool, impermanent loss), L2 scaling (rollup, fraud proof, validity proof), NFT standards (ERC-721, ERC-1155, ERC-4907). Full glossary index.

Can the widget render in dark mode automatically?

Yes. Set data-theme="auto" and the widget reads the user's prefers-color-scheme media query. Toggles automatically when the user switches OS dark mode. Also reacts to runtime changes via matchMedia event listener — no page reload needed.

Is the widget data live or static?

Live. The widget fetches from the ReadWhitepaper REST API on render. Cache-Control honors origin headers (15-minute edge cache, 1-day stale-while-revalidate). New whitepapers appear in widgets without code update. OpenAPI 3.1 spec.

How big is the widget bundle?

Under 15KB gzipped. Zero dependencies — no React, no jQuery, no fonts. Loads from jsDelivr CDN with HTTP/2 multiplexing. Shadow DOM isolation means CSS never conflicts with the host page. Lazy-rendered via IntersectionObserver.

Can I customize the appearance?

Three customization axes: data-theme (light/dark/sepia/auto), data-size (compact/default/large), data-style-variant (modern/minimal). All combinations supported. CSS variables exposed for accent color override via Shadow DOM ::part() pseudo-elements.