Most "free" currency converter widgets aren't: they want an API key, a signup, a monthly plan after 30 days, or they inject ads into your page. The AllRatesToday widget is the boring exception — one copy-paste snippet, no API key, no signup, MIT-licensed, with a built-in dark theme. Keyless embeds run on official European Central Bank reference rates from an open endpoint; the only requirement is keeping the "Powered by AllRatesToday" attribution link visible.
This guide covers the exact embed snippets (JavaScript and iframe), every customization option the widget actually supports — including dark mode — and when you should skip the widget and call the API directly.
The 10-Second Embed
Paste this where you want the converter to appear:
<!-- AllRatesToday currency converter (no API key needed) -->
<div class="art-currency-widget" data-base="USD" data-target="EUR"></div>
<a href="https://allratestoday.com">Powered by AllRatesToday</a>
<script async src="https://allratestoday.com/widget.js"></script>That's the whole integration. The script renders a self-contained converter (it uses Shadow DOM, so your site's CSS and the widget's styles can't break each other), with amount input, from/to currency dropdowns, a swap button, and the live converted result. There's a live demo on the widget page.
Dark Mode
Dark mode is built into the widget — it's one attribute:
<div class="art-currency-widget" data-base="USD" data-target="EUR" data-theme="dark"></div>The widget ships exactly two themes: light (default) and dark. The dark theme swaps the card to a dark navy background with light text and matching input fields — designed to sit naturally on dark sites and dashboards. On the iframe version, pass it as a query parameter instead: theme=dark.
One honest limitation: there's no "auto" mode, so the widget won't follow the visitor's prefers-color-scheme by itself. If your site has a theme toggle, render the widget with the matching data-theme for the active theme. Beyond light/dark, per-color customization (brand accent colors, fonts) isn't exposed as options — the widget's internals live in Shadow DOM precisely so pages can't accidentally restyle them. If you need pixel-level control of the UI, that's the point where you build on the API directly (more below).
The iframe Version (WordPress, Shopify, script-stripping CMSs)
Some platforms strip third-party <script> tags. For those, the same widget is available as a same-origin iframe embed:
<iframe
src="https://allratestoday.com/embed/converter?base=USD&target=EUR&theme=dark"
width="400" height="320" frameborder="0" loading="lazy"
title="Currency converter by AllRatesToday"></iframe>- WordPress: either version works — paste the JS snippet into a Custom HTML block, or use the iframe if your security plugin strips scripts.
- Shopify: use the iframe in a Custom Liquid / HTML section (Shopify themes commonly sanitize external scripts).
- Notion, Ghost, Webflow, etc.: any platform with an embed/iframe block works.
The iframe page also posts its height to the parent window (a { type: 'art-widget-height', height } message) so you can auto-size the frame if you want.
Every Customization Option
These are set as data- attributes on the widget <div>, or as query parameters on the iframe URL:
| Attribute | iframe param | Default | Description |
|---|---|---|---|
data-theme |
theme |
light |
light or dark |
data-base |
base |
USD |
Starting "from" currency (ISO 4217) |
data-target |
target |
EUR |
Starting "to" currency (ISO 4217) |
data-amount |
amount |
1 |
Starting amount |
data-api-key |
key |
— | Optional free API key: real-time mid-market rates, 150+ currencies, dedicated quota + usage stats |
For single-page apps that inject content after load, the script exposes window.AllRatesTodayWidget.init() to re-scan the page for new widget containers.
Where the Data Comes From
Two modes, same widget:
- Keyless (default): official ECB reference rates from AllRatesToday's open central-bank endpoint — updated daily, ~30 major currencies, cached at the edge. The result line shows the ECB reference date so visitors know exactly what they're seeing. The attribution link must stay visible in this mode.
- With a free API key: the widget switches to AllRatesToday's real-time mid-market feed — 150+ currencies, dedicated quota, and usage stats in your dashboard. Get one at /register (no credit card).
Widget vs. Building Your Own with the API
The widget is the fastest path, but it's deliberately opinionated. Building your own converter on the REST API is a small amount of code and gives you total control:
const res = await fetch(
'https://allratestoday.com/api/v1/rates?source=USD&target=EUR',
{ headers: { 'Authorization': 'Bearer art_live_your_api_key' } }
);
const [{ rate }] = await res.json();
console.log(`1 USD = ${rate} EUR`);| Widget | Your own UI + API | |
|---|---|---|
| Setup time | ~10 seconds | An afternoon |
| API key | Optional | Required (free) |
| Design control | light/dark + starting pair | Total |
| Currencies | ~30 keyless, 150+ with key | 160+ |
| Historical rates, charts, conversion logic | No | Yes — full API |
When to graduate to the API
- You need brand-matched design beyond light/dark
- You need server-side conversion — pricing localization, invoices, checkout totals
- You need historical rates or charts, not just spot conversion
- You need currencies outside the ECB's ~30 and don't want the widget's key mode
- You're doing enough volume that you want a plan with guaranteed quota — paid plans start at €4.99/month for 5,000 requests
FAQ
Is the widget really free?
Yes. It's MIT-licensed and free to embed on any site, commercial or personal. Keyless embeds use official ECB reference rates from an open endpoint; the only condition is keeping the "Powered by AllRatesToday" attribution link visible. No signup, no credit card, no trial that expires.
Does it need an API key?
No. Paste the snippet and it works. An optional free API key upgrades the same widget to real-time mid-market rates across 150+ currencies with dedicated quota and usage stats.
Can I customize colors / enable dark mode?
Dark mode: yes — data-theme="dark" (or theme=dark on the iframe). The widget ships light and dark themes plus starting currency/amount options. Arbitrary brand colors aren't exposed as options; for a fully custom look, build your own UI on the API.
Where does the data come from?
Keyless: official European Central Bank reference rates, updated daily, served from AllRatesToday's open central-bank endpoint. With a key: AllRatesToday's real-time mid-market feed (150+ currencies, updated every 60 seconds).
Can I embed it in WordPress or Shopify?
Yes. WordPress: paste the JS snippet into a Custom HTML block (or use the iframe). Shopify and other script-stripping CMSs: use the iframe version — it needs no JavaScript at all.
Grab the snippet from the widget page and you'll have a working converter — dark mode included — before your coffee cools. When you outgrow it, the API behind it is one free key away.