How to embed a price widget
Everything the free MetalCharts widgets can do: the four steps to get one on your page, where to paste the code on each platform, and every parameter the ticker and the chart accept. No account, no API key, and no plugin.
The four steps
- 1Pick the widget you want. Choose the compact gold price ticker for a sidebar or header, or the interactive gold 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.
Where to paste the code on each platform
The snippet is identical everywhere. All that changes is which box it goes into.
WordPress
In the block editor, add a Custom HTML block where you want the widget and paste the snippet. For a sidebar or footer, go to Appearance, then Widgets, add a Custom HTML widget and paste it there. No plugin is needed, and because the widget is an iframe it survives theme changes. On WordPress.com, Custom HTML blocks need a Business plan or higher.
Shopify
On a page, open the rich text editor and switch to the code view with the `<>` button, then paste the snippet. For a theme section, edit the relevant Liquid template and paste the iframe directly into the markup.
Squarespace
Add a Code block to the page and paste the snippet into it. Leave the block set to HTML and turn off the display-as-source option.
Wix
Use Add, then Embed Code, then Embed HTML, and paste the snippet into the HTML iframe box. Drag the box to the size you want; the widget fills it.
Webflow
Drag an Embed element onto the canvas and paste the snippet into it. The preview renders in the designer once you publish.
Ghost
Add an HTML card to the post or page and paste the snippet. For site-wide placement, use Code Injection in the site settings.
Plain HTML or React
Paste the iframe anywhere in your markup. In React or JSX, change `frameborder` to `frameBorder` and `allowtransparency` to `allowTransparency`, or drop those attributes entirely; everything else copies across unchanged.
Every parameter
Options are query parameters on the iframe URL. The builder writes them for you and you can edit them by hand afterwards. Colours take a hex value with no leading #.
Options for both widgets
| 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 |
text | hex colour, no # | Main text colour for the asset name and the price. | text=ffffff |
muted | hex colour, no # | Secondary text: the symbol, the timestamp, and the footer line. | muted=9ca3af |
border | hex colour, no # | Card border and divider colour. | border=27272a |
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 |
refresh | seconds | How often the widget re-fetches. The default is fine for almost every site; raise it on a page that stays open for hours. | refresh=60 |
Ticker only
| Parameter | Values | What it does | Example |
|---|---|---|---|
change | true, false | Show or hide the 24 hour change line under the price. | change=false |
icon | true, false | Show or hide the asset icon. | icon=false |
compact | true, false | A tighter layout for narrow sidebars and header bars, with smaller padding and type. | compact=true |
decimals | 0 to 6 | Decimal places on the price. Two suits most metals; raise it for low-priced assets. | decimals=2 |
radius | pixels | Corner radius of the card. Use 0 for square corners. | radius=12 |
Chart only
| Parameter | Values | What it does | Example |
|---|---|---|---|
range | 1D, 1W, 1M, 3M, 6M, 1Y, 5Y, ALL | Which window the chart opens on. | range=1M |
height | pixels | Chart height. The width always fills its container, so only the height needs setting. | height=300 |
showControls | true, false | Show or hide the range buttons. Hide them for a fixed-window chart that visitors cannot change. | showControls=false |
showGrid | true, false | Show or hide the background grid lines. | showGrid=false |
A gold ticker in euros, transparent, with a gold accent and no icon:
https://metalcharts.org/embed/xau?theme=auto&bg=transparent&accent=c8a44a¤cy=EUR&icon=falseA one-month silver chart, 300px tall, with the range buttons hidden:
https://metalcharts.org/embed/chart/xag?range=1M&height=300&showControls=false&theme=lightEmbedding FAQ
Do I need a plugin to embed a price widget?
No. The widget is an iframe, so any block, module, or template that accepts HTML will render it. That also means nothing to update and nothing that breaks when you change theme.
Is there a script tag or any JavaScript to add?
No. The snippet is one iframe and a small attribution link. Because there is no script tag, the widget cannot block your page from rendering and it will not interfere with your own JavaScript.
Can I put more than one widget on a page?
Yes, as many as you like, in any mix of tickers and charts. Each iframe is independent, so one can show gold in dollars while another shows silver in euros.
How do I make the widget match my brand?
Set bg=transparent so your own background shows through, pass your brand colour as accent, and set text, muted and border to your palette. Use theme=auto if your site has both light and dark modes.
Does the widget track my visitors?
The widget loads from our domain to fetch the price, and that is all it needs. There is no advertising inside the widget frame.
Can I get the raw numbers instead of a widget?
Yes, through the MetalCharts API, which returns JSON for prices, history, futures and more. It has a free tier that needs no card.