# Crypto Price API product page

**Route:** `/products/price-api`  
**Production URL:** `https://tatum.io/products/price-api`  
**Next.js page:** `src/app/price-api/page.tsx`  
**Browsable docs (AI / agents):** `/products/price-api.md` — raw markdown (`Content-Type: text/markdown`), no HTML chrome  
**Content negotiation:** `GET /products/price-api` with `Accept: text/markdown` returns the same markdown (per [Cloudflare Markdown for Agents](https://developers.cloudflare.com/fundamentals/reference/markdown-for-agents/))

Interactive marketing page for Tatum’s Real-Time Crypto Price API (Exchange Rate API). Replaces the standalone Webflow designer page at `tatum.io/exchange-rates`. Built as React components (not HTML embeds), with a three.js hero and live widgets powered by the Tatum Exchange Rate API.

## Page structure

Rendered inside `SiteShell` via `PriceApiExperience` (`src/components/price-api/PriceApiExperience.tsx`):

| Section | Component | Contents |
|---------|-----------|----------|
| Hero | `HeroWave` + copy + `LiveTicker` | Headline, CTAs, live market stats, top-20 ticker |
| Symbol check | `SymbolSupportCheck` | Quick symbol support lookup |
| Bubbles | `CryptoBubbles` | Draggable market map (24h free; 1h/7d gated) |
| Candles | `CandleChart` | OHLCV chart (free: BTC/USDT 1D, 48 candles) |
| Table | `RatesTable` | Market table (BTC/ETH/BNB live; rest gated) |
| Playground | `Playground` | Contract lookup + crypto→fiat converter (visitor API key) |
| Endpoints | `EndpointsReference` | All 9 `/v4/data/rate/*` endpoints with cURL samples |
| Features | inline | Six “Why Tatum” feature cards |
| CTA | inline | Get API Key / Read Docs |

Metadata lives in `src/app/price-api/page.tsx`.

## Hero

- **Eyebrow:** Live market data
- **Headline:** Real-Time Crypto Price API
- **Lead:** Instantly get prices for 1000+ crypto currencies — or fetch any token price by contract address. One API, 100+ sources, every fiat currency
- **CTAs:** Get API Key → `https://dashboard.tatum.io/signup`; Read Docs → `https://docs.tatum.io/reference/exchange-rate`
- **Stats:** 1000+ crypto currencies · 100+ aggregated sources · 150+ fiat currencies · 400+ OHLCV candle pairs
- **Visual:** three.js animated price-surface particle field (`HeroWave` / `HeroScene`)
- **Live ticker:** top-20 assets with 24h change (free, ungated)

## Interactive widgets & gating

| Widget | Free (site key via proxy) | Requires visitor API key |
|--------|---------------------------|---------------------------|
| Live ticker | Yes | — |
| Crypto bubbles | 24h view | 1h / 7d locked behind “Get API Key” banner |
| Candle chart | BTC/USDT `1d`, max 48 candles | Other symbols/intervals |
| Rates table | BTC / ETH / BNB live | Remaining rows blurred + CTA |
| Playground | — | Token-by-contract + crypto→fiat (key never stored) |

## API key & proxy routes

The site’s Tatum API key is **server-side only**, from `TATUM_API_KEY`:

- Local: `.env` and `.dev.vars` (gitignored)
- Webflow Cloud: environment variables on the Cloud project

Client code never sees the site key. Free widgets call internal proxies under `/products/api/price/*`:

| Proxy | Behavior |
|-------|----------|
| `/products/api/price/changes` | Curated token list only; intervals `1d` / `1w`; cached 5 min |
| `/products/api/price/ohlcv` | Hard-locked to BTC/USDT `1d`, max 48 candles; cached 5 min |
| `/products/api/price/symbol` | Symbol lookup helper used by the page |

**Abuse protection** (production): require valid `Referer`/`Origin` from allowed hosts; rate-limit 24 req/min per IP. See [WEBFLOW.md](./WEBFLOW.md).

Below-fold widgets lazy-load (OHLCV, table 7d column) to save credits on bounce visits.

## Endpoint reference (on-page)

Nine Exchange Rate endpoints, documented with cURL samples in `EndpointsReference`:

1. `/v4/data/rate/symbol` — Exchange Rate by Symbol  
2. `/v4/data/rate/symbol/batch` — Batch  
3. `/v4/data/rate/symbol/OHLCV` — OHLCV by Symbol  
4. `/v4/data/rate/symbol/OHLCV/batch` — OHLCV Batch  
5. `/v4/data/rate/price-change` — Price Change by Symbol  
6. `/v4/data/rate/price-change/batch` — Price Change Batch  
7. `/v4/data/rate/contract` — Exchange Rate by Contract  
8. `/v4/data/rate/contract/batch` — Contract Batch  
9. `/v4/data/rate/history` — Exchange Rate History  

Full reference: https://docs.tatum.io/reference/exchange-rate

## Feature grid

1. 1000+ tokens by symbol  
2. Any token by contract (10 chains including Ethereum, Solana, Base)  
3. OHLCV candles (400+ pairs, 1m–1M intervals, up to 50 per request)  
4. 100+ aggregated sources (CEXes + DEXes)  
5. 150+ fiat currencies  
6. Batch variants for rates, changes, and contract lookups  

## Editing the page

Unlike wallets / data-api / notifications, this page is **React**, not Webflow HTML embeds. Edit under `src/components/price-api/` and `src/app/price-api/page.tsx`.

Agent markdown docs are still bundled at build time:

```bash
node scripts/bundle-markdown.mjs
# or rely on predev / prebuild hooks:
npm run dev
npm run build
```

This writes `src/lib/markdown-bundles.generated.ts` from `PRICE-API.md` (and other product docs).

## Local preview

```bash
npm run dev
```

Open [http://localhost:3012/products/price-api](http://localhost:3012/products/price-api).

Requires `TATUM_API_KEY` in `.env` for live free widgets.

## Crawl & indexing

| URL | Google | AI agents |
|-----|--------|-----------|
| `/products/price-api` | **Indexed** (HTML) — also serves markdown when `Accept: text/markdown` |
| `/products/price-api.md` | **Not indexed** — direct markdown URL with `X-Robots-Tag: noindex` |
| `/products/api/*` | **Not indexed** — `X-Robots-Tag: noindex` on the response |

This app is mounted at `/products` on the main Webflow site. The supplemental sitemap (`/products/sitemap.xml`) is owned by this repo; link it from Webflow’s **root** `robots.txt` (see [WEBFLOW.md](./WEBFLOW.md)).

The HTML product page exposes `<link rel="alternate" type="text/markdown" href="…/price-api.md">` so agents can discover the raw doc without it competing in search results.

## Deployment

Deployed with the rest of the app to Webflow Cloud at mount path `/products`. See [WEBFLOW.md](./WEBFLOW.md) for `TATUM_API_KEY` and proxy settings.

## Related links

| Resource | URL |
|----------|-----|
| Exchange Rate API reference | https://docs.tatum.io/reference/exchange-rate |
| Dashboard signup | https://dashboard.tatum.io/signup |
| Tatum docs | https://docs.tatum.io |