Fetch live gold prices in JavaScript
Working code for pulling the gold spot price from the API in Node.js and the browser, with proper error handling.
Read →Add a free, configurable live gold price widget to WordPress with one iframe. Works in Gutenberg and Elementor, no API key, no plugin.
If you run a finance blog, a dealer site, or a portfolio page on WordPress, you can add a live gold price without a plugin, an API key, or any PHP. The gold price widget configurator generates a single iframe for you. Paste it into a Custom HTML block or an Elementor HTML widget and it works.
Go to goldprice.dev/widgets/gold-price. No signup and no API key are needed. Pick a currency, a unit (troy ounce or gram), a karat, a theme, and a language, and the page builds the matching iframe for you. Copy that snippet and use it in any of the install methods below.
If you skip the configurator and just want the defaults, this is the iframe it generates for USD, troy ounce, 24 karat, auto theme, and English:
<iframe src="https://goldprice.dev/embed/xau?currency=USD&unit=oz&karat=24&theme=auto&locale=en" title="Live gold price" width="360" height="190" loading="lazy" style="border:0;width:100%;max-width:360px" referrerpolicy="strict-origin-when-cross-origin"></iframe>
The widget refreshes on its own every 60 seconds. It is hosted by goldprice.dev, so no API key ever reaches your page source.
Self-hosted WordPress usually saves this correctly for an administrator. If you are logged in as an editor or contributor without the unfiltered_html capability, WordPress strips the <iframe> tag on save and the block goes blank. See WordPress's own Custom HTML block documentation for how that capability is assigned. The fix is to have an administrator paste the block, or to grant the role unfiltered_html.
The same Custom HTML block works outside the post body. In Appearance → Widgets, add a Custom HTML widget to any sidebar or footer area and paste your iframe snippet. In a block theme, add the Custom HTML block to a template part, such as the sidebar or a page template, through the Site Editor. Either way, the widget renders wherever the block sits, refreshing on its own.
Elementor's HTML widget renders raw markup directly, including iframes, without stripping anything. See Elementor's guide to the HTML widget for more on where it fits versus other embed options.
The configurator sets these as query parameters on the iframe's src. An unrecognized value just falls back to the default, so a typo won't break the embed.
| Parameter | Values | Default | What it does |
|---|---|---|---|
currency | 31 options: USD, EUR, GBP, JPY, AUD, CAD, CHF, CNY, INR, IDR, and 21 more | USD | Quote currency for the displayed price |
unit | oz, gram | oz | Price per troy ounce or per gram |
karat | 24, 22, 21, 20, 18, 16, 14, 10 | 24 | Purity used when unit=gram |
theme | auto, light, dark | auto | Light, dark, or the visitor's system setting |
locale | en, ar, es, id, ja, ko, vi, zh | en | Language and number formatting in the card |
You rarely need to build this URL by hand. Set the options on the configurator and copy the iframe it generates.
Blank space where the iframe should be, self-hosted WordPress. Almost always the unfiltered_html capability problem above: the block editor silently removed the tag on save. Re-add the block as an administrator, or check the saved post content in the editor's code view for a stripped iframe.
Nothing renders on WordPress.com. WordPress.com's free and lower-tier plans don't allow custom iframe embeds in the Custom HTML block; you need a plan with hosting features enabled. See WordPress.com's Custom HTML block support page for which plans qualify.
Widget loads but looks cut off. The card needs at least 320px of width and 190px of height. If your theme's sidebar or content column is narrower than that, place the widget in a full-width area instead of shrinking it.
The iframe covers currency, unit, karat, theme, and language, but it is still a fixed card in a fixed layout. If you want the price inside your own component instead of an iframe, a design the theme options don't cover, or historical data for a chart of your own, use the raw API instead and build the display yourself. The gold price converter is a working example of what that looks like for currency and unit conversion.
The official iframe is free to embed on personal and commercial sites as long as it stays unmodified and its visible attribution stays intact. White-labeling it or presenting it as your own feed requires a separate Enterprise agreement. All plans allow raw API data in commercial products; Free needs a visible credit link. Full terms are in the Terms of Service and the attribution guide.
related guides
Working code for pulling the gold spot price from the API in Node.js and the browser, with proper error handling.
Read →Match cache TTLs to data freshness, read the X-RateLimit-* headers, back off gracefully on 429, and decide when polling beats streaming.
Read →Add the goldprice.dev MCP server to Claude or Cursor so your agent can fetch the current gold spot price without any hand-rolled tool code.
Read →goldprice.dev
Live gold prices, historical OHLC, and multi-source aggregation — available via REST and SSE.