Quick Start
Add live mortgage rates to your website with a single script tag. The widget automatically loads, fetches the latest rates, and renders in your page.
<script src="https://rateapi.dev/widgets/v1/embed.js" data-rateapi data-product="30-year-fixed" data-theme="dark"></script>That's it! The widget will appear immediately after the script tag. No API keys required for the embedded widget.
How It Works
When the page loads, the embed script:
- Loads the widget component library
- Reads configuration from
data-*attributes - Creates a
<rateapi-rates-widget>web component - Fetches live rates from the RateAPI proxy
- Renders the widget with your chosen theme and options
Configuration Options
Customize the widget using data-* attributes on the script tag. All options are optional with sensible defaults.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-product | 30-year-fixed, 15-year-fixed, all | 30-year-fixed | Filter rates by mortgage product type |
data-theme | dark, light, auto | dark | Widget color scheme. "auto" follows user preference |
data-limit | 3 - 15 | 5 | Number of rates to display |
data-sort | apr, rate, institution | apr | How to order the rates. apr sorts by true cost (APR + points + fees), not just headline APR |
data-show-apr | true, false | true | Show the APR column |
data-show-verified | true, false | true | Show verified badges next to lenders |
data-show-metrics | true, false | true | Show the metrics bar (top offer, median, count) |
data-compact | present or absent | not present | Reduce padding for smaller spaces |
Example: Compact 15-Year Widget
<script src="https://rateapi.dev/widgets/v1/embed.js" data-rateapi data-product="15-year-fixed" data-theme="light" data-limit="3" data-show-metrics="false" data-compact></script>Platform Guides
The widget works on any website that supports custom HTML. Here are step-by-step guides for popular platforms.
WordPress
Add to any post, page, or widget area.
- Edit your post or page
- Add a "Custom HTML" block
- Paste the embed code
- Save and preview
Webflow
Use the Embed element in your design.
- Add an Embed element
- Paste the embed code
- Click "Save & Close"
- Publish your site
Squarespace
Insert via Code Block.
- Add a Code Block
- Set mode to "HTML"
- Paste the embed code
- Apply changes
Other Platforms
The widget works anywhere you can add custom HTML/JavaScript. Look for options like "Custom Code", "HTML Block", "Embed", or "Code Injection" in your platform's editor.
Attribution Requirements
Required Attribution
The widget includes built-in attribution that must remain visible:
- "Source: RateAPI" link in the footer
- "Methodology" link for data transparency
These elements are required per our Terms of Service and ensure users can verify the source and methodology of the rate data. The attribution is automatically included and styled to match your chosen theme.
What's Not Allowed
- Hiding or removing the source attribution
- Modifying the widget to misrepresent the data source
- Using CSS to obscure required links
- Claiming the rate data as your own
Why Attribution Matters
Proper attribution helps your users verify data sources, builds trust in your content, and supports transparent financial journalism. It also ensures compliance with our Terms of Service.
Complete Citation Guidelines
For comprehensive guidance on citing RateAPI data in academic papers, news articles, API integrations, or AI agent responses, see our How to Cite documentation.
Frequently Asked Questions
Common questions about installing and using the RateAPI mortgage rate widget.
Add a Custom HTML block and paste the widget embed code. You can add it to any post, page, or widget area in your WordPress site.
Yes, use the Widget Builder to choose dark or light theme, or add custom CSS. The widget supports "dark", "light", and "auto" themes out of the box.
Rates update daily from 4,300+ credit union websites. The widget automatically fetches the latest rates each time it loads.
Yes, the widget is free to embed with attribution. The required attribution includes "Source: RateAPI" and "Methodology" links in the widget footer.