S&P 500 Price Widget
Embed a live S&P 500 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.
S&P 500 Chart Widget
An interactive S&P 500 chart with selectable time ranges. Paste this where you want the chart to appear.
<iframe
src="https://metalcharts.org/embed/chart/spx"
width="600"
height="450"
frameborder="0"
scrolling="no"
style="border-radius: 8px; overflow: hidden;"
title="S&P 500 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/ratios/spx/xau" target="_blank" rel="noopener">S&P 500 to Gold Ratio</a> by <a href="https://metalcharts.org" target="_blank" rel="noopener">MetalCharts</a>
</div>S&P 500 Price Ticker
A compact S&P 500 price ticker with the 24 hour change. Ideal for sidebars and headers.
<iframe
src="https://metalcharts.org/embed/spx"
width="300"
height="224"
frameborder="0"
scrolling="no"
style="border-radius: 8px; overflow: hidden;"
title="S&P 500 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/ratios/spx/xau" target="_blank" rel="noopener">S&P 500 to Gold Ratio</a> by <a href="https://metalcharts.org" target="_blank" rel="noopener">MetalCharts</a>
</div>What the S&P 500 widget shows
The widget shows the S&P 500 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.
On this site, the S&P 500 to gold ratio shows how many ounces of gold it takes to buy the S&P 500.
How to add an S&P 500 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 S&P 500 price ticker for a sidebar or header, or the interactive S&P 500 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.
S&P 500 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 S&P 500 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 |
An S&P 500 ticker in euros, on a transparent background, with a gold accent and no icon:
https://metalcharts.org/embed/spx?theme=auto&bg=transparent&accent=c8a44a¤cy=EUR&icon=falseWhy use the S&P 500 widget?
- Free forever for personal and commercial sites, no API key needed.
- Real-time data: the S&P 500 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.
S&P 500 widget FAQ
When does the S&P 500 widget update?
It updates through the trading session and holds the last value when the market is closed.
What price does the S&P 500 widget show?
The widget shows the S&P 500 level rather than a price, so no currency conversion applies. On this site, the S&P 500 to gold ratio page shows how many ounces of gold it takes to buy the S&P 500.
Who puts a S&P 500 widget on their site?
Macro and markets pages that want a reference level beside their metal prices.
Is the S&P 500 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 S&P 500 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 S&P 500 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 S&P 500 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 S&P 500 price move without refreshing. You can set the interval yourself with the refresh parameter.
How many S&P 500 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 S&P 500 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 S&P 500 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.