HomeTrading Widgets › Forex Rates Widget

Forex Rates Widget

A live rates board for your page, with the rand pairs most tables leave out. One line of HTML, no API key.

📡
LivePublic reference rates
🔑
No API keyNothing to register for
🆓
FreeCommercial use allowed

i In short

Putting live exchange rates on a website normally means signing up to a rate provider, obtaining an API key, keeping that key out of your front-end code, and then discovering that the free tier limits you to a few hundred calls a day. This widget removes all of that. It is an iframe that fetches current reference rates from a free public source when the page loads, and it needs nothing from you beyond the one line of HTML.

The board shows the rand against the dollar, euro, pound, Australian dollar, yen, yuan, franc and pula, with a second tab for the major pairs. Each row shows the rate and its inverse, because half the confusion around currency quotes comes from readers not being sure which way round a number runs. Seeing 17.42 and 0.0574 next to each other resolves that instantly.

The rates are mid-market reference rates, and the widget says so on its face. That matters: the number a reader sees here is not the number their bank or broker will give them, because a dealing price has a spread around the mid. A rates widget that blurs that distinction sets your readers up for an unpleasant surprise, so this one states it plainly rather than burying it.

Everything runs in the reader's browser and the whole board is built from a single request, so it is light enough to sit in a sidebar on every page of a site without a performance cost. No cookie is written and nothing about your readers is recorded.

Try the Forex Rates Widget

Live previewThis is exactly what your readers will see

Embed code

Copy this into your page

Free for any site, including commercial ones. Keep the small credit line at the bottom of the widget so readers can find the full version. Nothing is stored about the people who use it. See the disclaimer.

How to add it to your site

  1. Copy the code above Use the copy button so nothing is lost to line wrapping. It is a single iframe tag and it does not need anything else.
  2. Open the page you want it on In WordPress add a Custom HTML block, in Wix use the Embed HTML element, in Squarespace use a Code block, and on a hand-built site paste it straight into your HTML.
  3. Paste and publish The widget appears immediately. If you see an empty space instead, your editor has stripped the iframe tag, which the HTML embed guide explains how to work around.
  4. Adjust the look if you want to Add the parameters in the table below to the iframe URL to change the theme, the accent colour or the height. Nothing needs to be configured on our side.

Customisation options

ParameterValuesWhat it does
themeauto, light, darkDefault follows the reader's own system setting, so the widget looks right on a dark site and a light one without you choosing.
accentSix hex digits, e.g. accent=1A56DBRecolours the header bar and the primary button to match your brand.
header1 or 0Set to 0 to hide the title bar when your page already has a heading above the widget.
breakdown1 or 0Set to 0 to hide the calculation breakdown for a more compact block.
corners1 or 0Set to 0 for square corners if your design has no rounding anywhere else.
widthfullRemoves the 520px maximum so the widget stretches to its container.

Parameters are added to the iframe URL as a normal query string, for example /embed/position-size-calculator.html?theme=dark&accent=1A56DB&header=0. The widget builder lets you set all of them visually and hands you the finished code.

What the widget calculates

On load the widget fetches a current table of reference rates and derives every pair on the board from it, which keeps the whole thing to one network request rather than one per row. If the primary source is unreachable it falls back to European Central Bank reference rates automatically, and if both fail it shows a clear message and retries rather than displaying stale numbers as if they were current.

The timestamp under the table shows when the rates were last published, converted into South African time. Rates refresh when the page is reloaded and on a long interval for pages left open.

Who this widget suits

Finance and news sidebars

A rates board is one of the few widgets that earns a permanent sidebar slot, because readers check it repeatedly.

Travel, remittance and expat sites

Readers sending money home want the reference rate before they judge a provider's offer.

Trading education pages

Useful context alongside any article about currency pairs, and a live counterpoint to a worked example.

Related widgets

The full library of free trading widgets has more than seventy tools, and the widget builder lets you preview and configure any of them before you copy the code.

Frequently asked questions

Do I need an API key for the forex rates widget?

No. The widget calls a free public rates endpoint that requires no key and no registration, and it falls back to European Central Bank reference data if that source is unavailable. You paste the iframe and it works.

How often do the rates update?

The source publishes roughly hourly on business days. The widget fetches on page load and refreshes periodically for pages left open, and it shows the publication timestamp so a reader always knows how current the figure is.

Are these tradeable prices?

No, and the widget says so. They are mid-market reference rates. A broker or bank quotes a bid and an ask around that mid, and the difference is how they are paid. For what that costs in practice on a specific trade, the spread cost calculator works it out in rand.

Which currencies are included?

The rand board covers USD, EUR, GBP, AUD, JPY, CNY, CHF and BWP against the rand. The majors board covers EUR/USD, GBP/USD, USD/JPY, USD/CHF, AUD/USD and USD/CAD. Both tabs are in the same widget and the reader switches between them.

What happens if the rate source goes down?

The widget tries a second source automatically. If both are unreachable it displays a short message saying rates are temporarily unavailable and retries in the background. It never shows an old number without a timestamp, because a stale rate presented as live is worse than no rate at all.

Can I add rates to a page that is already heavy?

Yes. The board is built from a single request and the document is small. The iframe is lazily loaded, so a widget in your footer costs nothing until a reader scrolls to it.

🛡️
Test the numbers on real prices

Try a Free Demo Account

Widgets show the maths. A demo account shows how the same maths behaves against live spreads and real market movement, without risking funds.

Open a free demo account
  • FSCA RegulatedTrade with confidence
  • Practice Risk FreeReal market conditions
  • Beginner FriendlyPerfect for learning

79% of retail CFD accounts lose money. Demo accounts do not guarantee future profits.