- Latest version: 3.1.1;
- Size: ≈80.0 kB;
- License: MIT
❗ As of April 1, the widget stopped working due to the closure of the api we used for 5 years.
📟 Fortunately, we found an even better alternative, so the widget will live on!
🚀 We have completely updated the widget, now it works even better and faster. For the new widget to work correctly, you need to update the HTML code of the widget. How to do it, see below.
The Crypto Converter Widget is a secure, lightweight (≈80 kB), dependency‑free JavaScript widget—hosted via CDN with SSL—to deliver real‑time ⚡ streaming price updates for cryptocurrencies (≈3 313), fiat currencies (≈170), tokens, blockchains and commodities. It requires no API key and protects against cryptojacking by offloading data processing to a secure third‑party server. With four layers of public data providers and automatic fallback, built‑in caching minimizes network requests and keeps your page fast and responsive. Featuring flexible settings, background gradient and dark‑theme support, plus SEO‑friendly markup, it integrates instantly as an Exchange Rates tool or Currency Converter—completely free and maintenance‑free.
- 🔑 No API key needed;
- 🥞 Four layers of API data providers;
- 🪶 Pure JavaScript ≈80kB, no dependencies;
- ⚙️ Flexible settings;
- ⚡ Real-time price update;
- 🌐 Processed on a third-party server;
- 💅 Beautiful design;
- 🌈 Supports background gradient;
- 🌑 Supports dark theme;
- 💵 Fiat, Tokens, Blockchains, Commodity;
- ₿ ≈3,313 cryptocurrencies and ≈170 fiat currencies;
- 💱 Can be used as Exchange Rates or Currency Converter;
- 🦠 No Cryptojacking!
- ☁️ CDN Assets;
- 🔐 SSL support;
- 🩷 SEO-friendly;
- 🆓 Free.
- Copy example below and set your attributes customize.
- Enjoy.
<!-- Crypto Converter ⚡ Widget --><crypto-converter-widget
amount="1"
shadow="true"
symbol="false"
locale="en"
rounded="true"
quote="USD"
base="BTC"
theme="auto"
decimal="4"
stat="false"
tax="0"
background-color="#8E2DE2"
background="linear-gradient(45deg, #8E2DE2, #4A00E0)"
></crypto-converter-widget
><a href="https://currencyrate.today/" target="_blank" rel="noopener"
>CurrencyRate.Today</a
>
<script
async
src="https://cdn.jsdelivr.net/gh/dejurin/crypto-converter-widget@latest/dist/latest.min.js"
></script>
<!-- /Crypto Converter ⚡ Widget -->Examples: CodePen
You can find many uses for this widget, not just on the website. See how I did a live stream with cryptocurrencies: https://www.youtube.com/watch?v=LQIsk5wIAzw
https://cdn.jsdelivr.net/gh/dejurin/crypto-converter-widget@latest/dist/latest.min.js
| Attribute | Type | Default | Reactive | Description |
|---|---|---|---|---|
| base | string | BTC | ☑️ | Base currency of the widget (currency to convert from). |
| quote | string | USD | ☑️ | Quote currency of the widget (currency to convert to). |
| symbol | boolean | false | ☑️ | Whether to display the currency symbol (e.g., “$”). |
| shadow | boolean | false | ☑️ | Whether to display a shadow around the widget. |
| rounded | boolean | true | ☑️ | Whether to use rounded corners for the widget. |
| border | boolean | true | ☑️ | Whether to display a border around the widget. |
| background-color | string | undefined | ☑️ | Background color of the widget. |
| background | string | undefined | ☑️ | Background of the widget (supports gradients). |
| stat | boolean | false | ☑️ | Whether to display the stats of asset. |
| tax | float | 0 | ☑️ | Additional tax or fee applied to the quote currency. |
| decimal | int | 2 | ☑️ | Number of decimal places to display. |
| amount | float | 1 | ☑️ | Amount of currency to convert. |
| locale | string | auto | ☑️ | Locale setting for the widget. |
| theme | string | auto | ☑️ | Theme of the widget (e.g., “light”, “dark” or “auto”). |
The price widget automatically cycles through multiple public data sources in priority order, so if one API fails or changes its response format it simply falls back to the next provider without missing a beat. Built‑in caching minimizes network requests and keeps your page fast and responsive. There’s no need for API keys or server‑side setup—just drop the HTML snippet into your page and you’re good to go. This lightweight, self‑configuring design delivers rock‑solid reliability and extreme flexibility with zero maintenance.
┌──────────────────────────────────────┐
│ 1. Provider 1 (Coindesk – full data) │
└──────────────────────────────────────┘
↓
[1.1] Is detailed price in cache?
├─ Yes → return full price → END
└─ No →
↓
[1.2] Fetch from Provider 1
├─ Success & status OK →
│ • parse detailed data
│ • cache full price
│ • return full price → END
└─ Failure → proceed to Provider 2
┌───────────────────────────────────────┐
│ 2. Provider 2 (CryptoCompare – price) │
└───────────────────────────────────────┘
↓
[2.1] Is simple price in cache?
├─ Yes → return price → END
└─ No →
↓
[2.2] Fetch from Provider 2
├─ Success →
│ • parse numeric price
│ • cache price
│ • return price → END
└─ Failure → proceed to Provider 3
┌──────────────────────────────────────┐
│ 3. Provider 3 (Coinbase – price) │
└──────────────────────────────────────┘
↓
[3.1] Is simple price in cache?
├─ Yes → return price → END
└─ No →
↓
[3.2] Fetch from Provider 3
├─ Success →
│ • parse numeric price
│ • cache price
│ • return price → END
└─ Failure → proceed to Provider 4
┌──────────────────────────────────────┐
│ 4. Provider 4 (OKX – price) │
└──────────────────────────────────────┘
↓
[4.1] Is simple price in cache?
├─ Yes → return price → END
└─ No →
↓
[4.2] Fetch from Provider 4
├─ Success →
│ • parse numeric price
│ • cache price
│ • return price → END
└─ Failure →
↓
┌────────────────────────────────────┐
│ All providers failed → show error │
└────────────────────────────────────┘
- Minor bug fixes.
- Minor bug fixes.
- Fixed compatibility.
- Minor bug fixes.
- Minor bug fixes.
- Minor bug fixes.
- Minor bug fixes.
- Minor bug fixes and performance optimizations.
- Implemented four layers of API data providers for enhanced reliability and redundancy.
- Minor bug fixes and performance optimizations.
- New core engine for improved performance and scalability.
- Updated API with expanded functionality and new endpoints.
- Support for fiat currency tracking.
- Integration with multiple blockchain networks and token standards.
- Commodity price tracking functionality.
- Exchange rate data integration.
- Currency converter feature.
- Major bug fixes and stability improvements.
- Addressed critical bugs and improved application stability.
- Resolved major issues impacting performance and reliability.
- Fixed significant bugs and optimized application performance.
- Minor bug fixes and user interface improvements.
- Loading animation to enhance user experience.
- Minor bug fixes and performance enhancements.
- Play/Pause functionality for real-time price updates.
- Request interceptors to handle poor network conditions.
- Minor bug fixes and stability improvements.
- Sound notification for price changes.
- Sound notification for price changes.
- Minor bug fixes and performance tweaks.
- Real-time fiat currency selection.
- Minor bug fixes and user interface enhancements.
- Currency symbol attribute for improved formatting.
- Currency symbol display issues.
- Minor bug fixes.
- Improved form selection with asynchronous loading.
- Fixed background image rendering issues.
- Resolved WebSocket connection start/stop issues.
- Initial release of the application.
The list of cryptocurrencies that can be selected in the widget: https://github.com/dejurin/crypto-converter-widget/blob/master/list.md
Code copyright 2023 CR.Today, CurrencyRate. Code released under the MIT license.