---
title: "Free Embeddable Currency Converter Widget (Dark Mode, No API Key) — 2026"
description: "Add a free currency converter to any website with one copy-paste snippet — no API key, no signup. Built-in dark mode via data-theme=\"dark\", official ECB reference rates keyless, real-time mid-market rates with a free key. Works in WordPress, Shopify, and any CMS via iframe."
canonical: https://allratestoday.com/blog/free-embeddable-currency-converter-widget/
source: AllRatesToday (https://allratestoday.com/) — Markdown mirror of the page above; index of all pages at https://allratestoday.com/llms.txt
generated: 2026-10-06T21:44:56.815Z
---

![Currency converter widget embedded on a website, shown on a screen](https://images.pexels.com/photos/16023919/pexels-photo-16023919.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)

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](https://allratestoday.com/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](https://allratestoday.com/developers/) 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](https://allratestoday.com/widget/).

## 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](https://allratestoday.com/developers/) (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](https://allratestoday.com/official-rates-widget/) — 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](https://allratestoday.com/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](https://allratestoday.com/developers/) 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](https://allratestoday.com/pricing/) — 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](https://allratestoday.com/register) 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](https://allratestoday.com/developers/).

### 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](https://allratestoday.com/widget/) and you'll have a working converter — dark mode included — before your coffee cools. When you outgrow it, the [API behind it](https://allratestoday.com/developers/) is one free key away.

The whole integration

```
<div class="art-currency-widget" data-theme="dark"></div>
<script async src="https://allratestoday.com/widget.js"></script>
```

## Embed It Now — No Key Needed

Copy the snippet, paste it on your site, done. Official ECB rates keyless, real-time mid-market rates with a free key.

 [Get the Widget Snippet](https://allratestoday.com/widget/)