Free Webmaster Widget

Currency Converter Widget for Your Website

Add a fast, two-way currency converter to your website or sidebar. Choose the interface language, default currency pair, initial amount, and color theme, then copy the HTML embed snippet.

1. Language & Initial Amount

2. Default Currency Pair

3. Appearance & Theme

Embed Code for Your Website

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

Currency Converter Widget: Integration & User Guide

Provide fast, interactive currency conversions to your website visitors. The Currency Converter Widget supports over 150 world currencies, precious metals, and Bitcoin with client-side two-way calculations, searchable flag dropdowns, and zero maintenance.

1. Quick Start: Embedding the Widget

Embedding the converter is simple. Insert the script and the custom HTML tag into the body of your web page where you want the widget to appear:

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

<!-- Currency Converter Element -->
<currency-converter 
  lang="en" 
  from="USD" 
  to="EUR" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-converter>

Performance Tip: The JavaScript loader file only needs to be imported once per page, even when embedding multiple currency converter instances on the same layout.

2. Customization Attributes

Configure the initial appearance and default conversion pair by modifying the attributes on the <currency-converter> element:

Attribute Type Default Description
lang String en Sets the interface language for localized currency names and date formatting (en, ar, fr, es, ru).
from String EUR Initial source currency code (ISO 4217, plus BTC, XAU, XAG, XPT; e.g., USD, EUR, GBP, SAR).
to String USD Initial target currency code (ISO 4217 or BTC; e.g., EUR, USD, JPY, AED, EGP).
amount Number 1 Initial numeric amount to convert on load (any positive number, e.g., 1, 100, 50.5).
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, up to 50 supported, e.g., 0, 5, 12).
size String normal Controls the height and font size of inputs and dropdowns (normal or large).
native-dropdown String off Set to on to use native browser <select> menus instead of the enhanced searchable flag dropdown.

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 Widget container background color.
border-color BCBCBC Border color for the widget container, inputs, and dropdowns.
text-color 222222 Primary text color across inputs, currency labels, and timestamps.
input-bg-color FFFFFF Background color for amount inputs and currency dropdown menus.
bg-color-button 535353 Background color for the currency swap button (⇆) and footer action buttons.
button-border-color 2E2E2E Border color for the swap button and footer action buttons.
button-hover-color 8A8A8A Hover highlight color for the swap button and footer action buttons.

3. End-User Features

Visitors interacting with the widget on your site benefit from the following built-in capabilities:

  • Instant Two-Way Calculation: Type into either the top (source) or bottom (target) amount field to compute the conversion in either direction immediately on the client side without extra network requests.
  • One-Click Currency Swap (⇆): Reverse the source and target currencies instantly using the swap button next to the top amount input.
  • 150+ Currencies, Metals & Crypto: Convert between global fiat currencies, Bitcoin (BTC), and precious metals (XAU, XAG, XPT), organized into Favorites (USD, EUR, GBP, CAD) and All Currencies.
  • Searchable Flag Dropdowns: Quickly find any currency by code or name with country flag icons and instant search filtering.
  • Shadow DOM Encapsulation & Auto-Contrast: Rendered inside an isolated Shadow DOM so your website's CSS never conflicts with the converter, with automatic button text contrast calculation.
  • Timestamped Exchange Rates: 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-converter> 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 for optimal display.

5. Frequently Asked Questions (FAQ)

How often are exchange rates updated in the widget?

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

Does changing currencies or typing amounts make extra server requests?

No. The widget fetches the complete rate table once when it loads and performs all conversions, currency changes, and swaps instantaneously in the browser.

Can I place multiple converters on the same page?

Yes. You can add multiple <currency-converter> elements with different currency pairs, amounts, or themes. The external <script> tag only needs to be included once per page.

Is the widget mobile-friendly?

Yes. The widget uses a responsive vertical layout that adapts to the width of its parent container, fitting mobile screens, tablets, and desktop sidebars seamlessly.

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