US Dollar Index Price Widget
Embed a live US Dollar Index level on your website for free. Add a compact price ticker or a full interactive chart with one line of HTML. Fully customizable, mobile friendly, and updated in real time. No API key or sign-up required.
US Dollar Index Chart Widget
An interactive US Dollar Index chart with selectable time ranges. Paste this where you want the chart to appear.
<iframe
src="https://metalcharts.org/embed/chart/dxy"
width="600"
height="450"
frameborder="0"
scrolling="no"
style="border-radius: 8px; overflow: hidden;"
title="US Dollar Index Chart Widget - MetalCharts"
></iframe>
<div style="font:12px/1.5 system-ui,-apple-system,sans-serif;margin-top:6px;text-align:center">
<a href="https://metalcharts.org/dxy" target="_blank" rel="noopener">US Dollar Index Price</a> by <a href="https://metalcharts.org" target="_blank" rel="noopener">MetalCharts</a>
</div>US Dollar Index Price Ticker
A compact US Dollar Index price ticker with the 24 hour change. Ideal for sidebars and headers.
<iframe
src="https://metalcharts.org/embed/dxy"
width="300"
height="224"
frameborder="0"
scrolling="no"
style="border-radius: 8px; overflow: hidden;"
title="US Dollar Index Price Widget - MetalCharts"
></iframe>
<div style="font:12px/1.5 system-ui,-apple-system,sans-serif;margin-top:6px;text-align:center">
<a href="https://metalcharts.org/dxy" target="_blank" rel="noopener">US Dollar Index Price</a> by <a href="https://metalcharts.org" target="_blank" rel="noopener">MetalCharts</a>
</div>What the US Dollar Index widget shows
The widget shows the US Dollar Index level rather than a price, so no currency conversion applies.
It updates through the trading session and holds the last value when the market is closed.
Who uses it: Macro and markets pages that want a reference level beside their metal prices.
The same feed powers the US Dollar Index price page on this site.
How to add a US Dollar Index price widget to your website
Four steps, about a minute, and nothing to install. The widget is an iframe, so it works the same on every platform and keeps working when you change theme or redesign.
- 1Pick the widget you want. Choose the compact US Dollar Index price ticker for a sidebar or header, or the interactive US Dollar Index chart for a page where the price history matters.
- 2Customize it. Open the builder to set theme, accent colour, display currency, size, and decimal places. Every choice is written into the embed code as a query parameter, so you can also edit the URL by hand later.
- 3Copy the embed code. Press the copy button under the widget. The snippet is a single iframe plus a small attribution link, with no script tag and nothing to install.
- 4Paste it into your page. Drop the snippet into your site's HTML wherever the widget should appear: a Custom HTML block in WordPress, a Code block in Squarespace, an Embed element in Webflow, or straight into your template.
US Dollar Index price widget for WordPress, Shopify, Squarespace and more
The same snippet works everywhere. Where it differs is which box you paste it into.
- WordPress
- In the block editor, add a Custom HTML block where you want the widget and paste the snippet.
- Shopify
- On a page, open the rich text editor and switch to the code view with the `<>` button, then paste the snippet.
- Squarespace
- Add a Code block to the page and paste the snippet into it.
- Wix
- Use Add, then Embed Code, then Embed HTML, and paste the snippet into the HTML iframe box.
- Webflow
- Drag an Embed element onto the canvas and paste the snippet into it.
- Ghost
- Add an HTML card to the post or page and paste the snippet.
- Plain HTML or React
- Paste the iframe anywhere in your markup.
Customize the US Dollar Index widget
Every option is a query parameter on the iframe URL. The builder writes them for you, and you can edit them by hand afterwards. These are the ones most people set.
| Parameter | Values | What it does | Example |
|---|---|---|---|
theme | dark, light, auto | Colour scheme. `auto` follows the visitor's own system setting, which is usually what you want on a site that has both modes. | theme=light |
bg | transparent, or a hex colour | Background. `transparent` lets your page's own background show through, so the widget sits flush in any design. | bg=transparent |
accent | hex colour, no # | Highlight colour: the price emphasis on the ticker and the area fill under the chart line. Set it to your brand colour. | accent=c8a44a |
currency | USD, EUR, GBP, AUD, CAD, INR, JPY, CNY and more | Display currency. The price is converted at the live exchange rate, so an EUR widget shows euros to every visitor. | currency=EUR |
range | 1D, 1W, 1M, 3M, 6M, 1Y, 5Y, ALL | Chart only: which window the chart opens on. | range=1M |
A US Dollar Index ticker in euros, on a transparent background, with a gold accent and no icon:
https://metalcharts.org/embed/dxy?theme=auto&bg=transparent&accent=c8a44a¤cy=EUR&icon=falseWhy use the US Dollar Index widget?
- Free forever for personal and commercial sites, no API key needed.
- Real-time data: the US Dollar Index price refreshes automatically for every visitor.
- Customizable: dark, light, or auto theme, custom accent color, transparent background, display currency (USD, EUR, GBP, AUD, INR, and more), size, and decimal precision.
- Fast and lightweight: a single iframe with no script tag, so it cannot block your page from rendering.
- Mobile responsive: adapts cleanly to phones and tablets.
- Nothing to maintain: no plugin to update and nothing that breaks when you change theme.
US Dollar Index widget FAQ
When does the US Dollar Index widget update?
It updates through the trading session and holds the last value when the market is closed.
What price does the US Dollar Index widget show?
The widget shows the US Dollar Index level rather than a price, so no currency conversion applies. The same feed powers the us dollar index price page on this site.
Who puts a US Dollar Index widget on their site?
Macro and markets pages that want a reference level beside their metal prices.
Is the US Dollar Index price widget free?
Yes, for personal and commercial websites alike. There is no account, no API key, and no request limit. All we ask is that you keep the small attribution link visible beneath the widget.
How do I add the US Dollar Index widget to my website?
Copy the iframe snippet on this page and paste it into your site's HTML where you want the widget to appear. It takes about a minute and works on any platform that allows an iframe, including WordPress, Shopify, Squarespace, Wix, Webflow, and hand-written HTML.
Can I use the US Dollar Index widget on WordPress?
Yes, and you do not need a plugin. Add a Custom HTML block in the block editor, or a Custom HTML widget under Appearance and Widgets for a sidebar, then paste the snippet. Because it is an iframe rather than a plugin, it keeps working when you change themes or update WordPress.
Does the US Dollar Index widget update in real time?
Yes. The widget re-fetches on its own while the page is open, so a visitor who leaves your page up sees the US Dollar Index price move without refreshing. You can set the interval yourself with the refresh parameter.
How many US Dollar Index widgets can I put on one page?
As many as you like, in any mix of tickers and charts. Each iframe is independent, so one can show US Dollar Index in dollars while another shows it in euros, or a different asset entirely.
Can I match the widget to my site's colors?
Yes. Set the theme to dark, light, or auto, make the background transparent so your own page shows through, and pass your brand colour as the accent. Text, muted text, and border colours are all settable too, along with the corner radius.
Can I show the US Dollar Index price in a currency other than dollars?
Yes. Add the currency parameter and the widget converts at the live exchange rate: euros, pounds, rupees, yen, Canadian and Australian dollars, and more. Every visitor sees the currency you set, not their own.
Will the widget slow my site down?
No. It is a single iframe with no script tag, so it cannot block your page from rendering and it loads independently of your own JavaScript. Add loading="lazy" to the iframe, as the snippets here already do, and it only loads when a visitor scrolls near it.
Does it work on mobile?
Yes. Both the ticker and the chart adapt to the width they are given, so they fit phone layouts without any extra work. The compact parameter tightens the ticker further for narrow columns.
Do I need an API key?
Not for the widget. If you want the data programmatically instead, in JSON for your own charts or app, that is what the MetalCharts API is for, and its free tier allows 200 requests a month.