Install

Paste the script where the module should render. It loads the public widget, fetches a bounded leaderboard, and includes RateAPI attribution and methodology links. No API key or backend is required.

<>HTML — complete install

<script
  src="https://rateapi.dev/widgets/v1/embed.js"
  data-rateapi
  data-product="30-year-fixed"
  data-theme="dark"
></script>

Safe public boundary

This widget reads public market data. It does not accept personal facts, determine membership eligibility, or produce an individualized product recommendation.

Choose a product

Set one data-product value. The builder previews the exact module before you copy it.

Value	Published products	Primary metric
`30-year-fixed`	30-year fixed mortgages	APR
`15-year-fixed`	15-year fixed mortgages	APR
`all`	Mortgage terms together	APR
`auto-new`	New auto loans	APR
`auto-used`	Used auto loans	APR
`cd`	Certificates and CDs	APY
`savings`	Savings and share savings	APY
`money-market`	Money market accounts	APY

Choose a layout

Card

The default ranked table. Use it when readers need institution, product, rate, verification, and context together.

Ticker

An inline market signal that inherits the host page's font, size, and color. It intentionally omits card-only controls.

<>HTML — ticker

<!-- Place inside your existing ticker or stat bar -->
<span class="market-signal">
  <script
    src="https://rateapi.dev/widgets/v1/embed.js"
    data-rateapi
    data-product="cd"
    data-variant="ticker"
    data-state="NY"
  ></script>
</span>

Stat

A compact sourced figure for a content card. Keep the numeric rate out of your static headline so it cannot become stale.

<>HTML — stat

<article class="market-card">
  <p>Rate watch</p>
  <h3>Published 30-year mortgage pricing</h3>
  <script
    src="https://rateapi.dev/widgets/v1/embed.js"
    data-rateapi
    data-product="30-year-fixed"
    data-variant="stat"
    data-state="CA"
  ></script>
</article>

Configure

Attribute	Values	Behavior
`data-theme`	`dark`, `light`, `auto`	Card theme; inline layouts inherit the host.
`data-state`	Two-letter US state	Scopes the board; invalid values fall back to nationwide.
`data-sort`	`apr`, `rate`, `institution`	Lending card sort. Deposits remain APY-ranked.
`data-show-apr`	`false`	Hides the APR column on lending cards.
`data-show-verified`	`false`	Hides verification badges, not source attribution.
`data-show-metrics`	`false`	Hides the summary strip on cards.
`data-compact`	Boolean attribute	Uses denser card spacing.

The module is deliberately capped at five rows. There is no data-limit option to imply a larger public feed.

Publish

WordPress

Add a Custom HTML block.
Paste the complete script.
Preview and publish.

◇

Webflow

Add an Embed element.
Paste the script.
Publish the site.

</>

React / Next.js

Render the script after hydration.
Keep attributes unchanged.
Allow the RateAPI script origin.

Attribution is part of the data contract

The free widget keeps RateAPI source and methodology links. Do not cover, remove, or restyle evidence in a way that obscures what the number represents.

Troubleshoot

Nothing renders

Confirm the script is not being stripped by your CMS, allow https://rateapi.dev in Content Security Policy, and check the browser console for blocked scripts.

The ticker looks different

That is intentional: ticker typography and color inherit from its parent. Apply host-page styles to the wrapper around the script.

You need person-level product matching

Market Rates is the wrong boundary for customer facts. Use RateAPI Routes, which is private, no-store, origin-restricted, and evidence-backed.

A live market signal in one script.