Free Webmaster Widget

Exchange Rates Table Widget for Your Website

Build a custom multi-currency exchange rate table for your website or blog. Choose your base currency, pick which world currencies to list, enable an interactive multi-row calculator, and copy the embed code.

1. Language, Base Currency & Initial Amount

2. Cross Currencies & Table Mode

3. Appearance & Theme

Embed Code for Your Website

Copy and paste this HTML snippet anywhere inside the <body> of your webpage.

Exchange Rates Table Widget: Integration & User Guide

Display a live, customizable foreign exchange rates table on your website. The Exchange Rates Widget tracks over 150 world currencies, precious metals, and Bitcoin against any base currency, complete with country flags, rising/falling trend indicators, and an optional built-in multi-currency calculator.

1. Quick Start: Embedding the Widget

Embedding the exchange rates table is straightforward. Insert the script and the custom HTML tag into the body of your web page where you want the widget to display:

<!-- Load Widget Engine -->
<script src="https://www.forexinvestors.com/widgets/exchange-rates/widget.js"></script>

<!-- Exchange Rates Table Element -->
<currency-widget 
  lang="en" 
  base="USD" 
  cross="AUD,CAD,CHF,EUR,GBP,INR,JPY" 
  display="code" 
  calc="off" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-widget>

Performance Tip: The JavaScript loader file only needs to be imported once per page, even when embedding multiple exchange rate tables with different base currencies on the same layout.

2. Customization Attributes

Configure the base currency, cross-currency list, calculator mode, and visual styling by modifying the attributes on the <currency-widget> element:

Attribute Type Default Description
lang String en Sets the interface language for localized currency names and date formatting (en, ar, fr, es, ru).
base String USD Reference base currency code displayed in the table header (ISO 4217, plus BTC, XAU, XAG, XPT; e.g., USD, EUR, GBP, SAR).
cross String USD,EUR,GBP,AUD,CHF,CAD,INR Comma-separated list of target currency codes to display in the table rows (e.g., EUR,GBP,JPY,CAD,AUD,CHF). Any code matching base is automatically omitted.
display String code Controls how currencies are labeled in each row: code for ISO symbols (e.g., EUR) or name for full localized currency names.
calc String off Enables or disables the interactive built-in calculator (on or off). When on, rate cells become editable inputs.
amount Number 1 Initial base currency amount used to multiply all listed exchange rates (any positive number, e.g., 1, 10, 100).
theme String default Selects the color palette: default, blue, green, yellow, red, ocean, purple, teal, dark, rose, or custom.
border-radius Number 5 Corner radius in pixels for the widget container (integer from 0 to 20 in the configurator, e.g., 0, 5, 12).

Custom Theme Color Attributes

When theme="custom" is set, you can customize individual widget colors using 6-digit hexadecimal values (without the # prefix):

Attribute Default Description
bg-color F6F6F6 Background color for the widget container and odd-numbered table rows.
border-color BCBCBC Border color for the widget container and editable calculator input fields.
text-color 222222 Primary text color across currency labels, rates, and timestamps.
input-bg-color FFFFFF Background color for even-numbered table rows and editable calculator inputs.
bg-color-button 535353 Background color for footer action buttons (FI and +).
button-border-color 2E2E2E Border color for footer action buttons.
button-hover-color 8A8A8A Background color for the table header bar (<th>), row hover highlight, and footer button hover state.

3. End-User Features

Visitors viewing the exchange rates widget on your site benefit from the following built-in capabilities:

  • Customizable Multi-Currency Table: Track live exchange rates for any combination of over 150 world currencies, precious metals (XAU, XAG, XPT), and Bitcoin (BTC) relative to your chosen base currency.
  • Visual Rising & Falling Indicators: Rates automatically highlight daily direction against the previous closeβ€”displaying in green when rising and red when falling.
  • Interactive Multi-Row Calculator (calc="on"): When enabled, visitors can type an amount into either the base currency header or any cross-currency row to recalculate all other currencies in the table simultaneously.
  • Code or Full Name Display with Flags: Choose compact ISO codes (EUR, GBP) for narrow sidebars or full localized currency names, accompanied by country flag icons and hover tooltips.
  • Shadow DOM Encapsulation & Auto-Contrast: Rendered inside an isolated Shadow DOM so your website's table styles never conflict with the widget, with automatic text contrast calculation for headers and buttons.
  • Timestamped Market Data: Displays the date and time of the latest rate sync in the footer alongside quick links to the source data (FI) and widget configurator (+).

4. CMS Integration Instructions

WordPress / Gutenberg & Elementor

  1. Add a Custom HTML block to your post, page, or widgetized sidebar.
  2. Paste the script loader and the <currency-widget> element code generated above.
  3. Update/Publish your page.

Webflow, Wix & Shopify

  1. Insert an Embed / Custom Code element into the layout canvas.
  2. Paste the widget embed code snippet.
  3. Ensure parent wrappers maintain a minimum container width of 240px to 340px (use display="code" for narrow columns).

5. Frequently Asked Questions (FAQ)

How often are exchange rates updated in the table?

Exchange rates are refreshed every 5 minutes from live foreign exchange feeds. The timestamp displayed at the bottom of the widget indicates the exact time of the latest rate update.

What do the green and red colors on the rates mean?

Green indicates that the exchange rate has risen compared to the previous daily rate, while red indicates that the rate has fallen. When calc="on" is active, the input fields use soft green and red backgrounds to preserve readability.

Can I place multiple exchange rate tables on the same page?

Yes. You can add multiple <currency-widget> elements with different base currencies, cross-currency lists, or themes. The external <script> tag only needs to be included once per page.

What is the difference between <currency-widget> and <currency-converter>?

<currency-widget> (loaded from /widgets/exchange-rates/widget.js) renders a multi-row exchange rate table for a base currency, whereas <currency-converter> renders a two-currency dropdown converter.

Does the widget require an API key or data-endpoint attribute?

No API key is required, and you do not need to specify a data-endpoint attributeβ€”the widget automatically derives its data endpoint from the widget.js script URL.

Widgets