Build an India Gold Price App with JavaScript
Build a live India gold-rate app from INR per-gram 24K and 22K prices, with server-side caching, Indian number formatting, GST estimates, and clear limits.
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, 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. Raw API data used in your own product follows normal commercial licensing starting at the Pro plan. Full terms are in the Terms of Service and the attribution guide.
related guides
Build a live India gold-rate app from INR per-gram 24K and 22K prices, with server-side caching, Indian number formatting, GST estimates, and clear limits.
Read →Build a gold jewelry price calculator from live per-gram karat prices, with exact decimal math, caching, margins, and clear valuation limits.
Read →Build a reproducible local-currency gold backtest from settled XAU/USD bars and dated FX observations, without inserting future rates into historical rows.
Read →goldprice.dev
Live gold prices, historical OHLC, and multi-source aggregation — available via REST and SSE.