OPEN DATA · WIDGETS
Embeddable energy widgets
Add a live GB electricity mix card or your region’s price cap rates to a website, blog, school or council page. Free, with no key, cookies or tracking. Each card names its source and links to UtilityPrices.
Build your embed code
Paste this into your page’s HTML
<iframe data-utilityprices src="https://utilityprices.co.uk/embed/price-cap" title="Energy price cap from UtilityPrices" width="100%" height="500" style="border:0;max-width:480px" loading="lazy"></iframe>
<p style="font-size:13px;margin:6px 0 0">Data: <a href="https://utilityprices.co.uk/energy-price-cap">UtilityPrices</a></p>
<script async src="https://utilityprices.co.uk/embed.js"></script>Keep the “Data: UtilityPrices” line under the widget: it is the credit our licence asks for. On WordPress, add the code with a Custom HTML block; on other site builders, use their HTML or embed element.
Widgets
- Live GB electricity mix (
/embed/grid-mix): The latest half-hourly generation mix, renewable share and carbon intensity. Refreshes every five minutes. Suggested height 460 px. - Price cap unit rates (
/embed/price-cap): Electricity and gas unit rates, standing charges and a typical dual-fuel bill for one region or the GB average. Suggested height 500 px.
Options
Add options to the widget URL as query parameters, for example https://utilityprices.co.uk/embed/price-cap?region=london&theme=dark.
| Parameter | Values | Default | Effect | Widget |
|---|---|---|---|---|
theme | light, dark or auto | light | Colour scheme. auto follows the visitor’s light or dark setting. | Both |
region | A region slug, or omit for the GB average | GB average | Which of the 14 price-cap regions to show, for example london. Unknown values show the GB average with a note. | Price cap |
Region slugs: east-midlands, eastern-england, london, merseyside-and-northern-wales, north-eastern-england, north-western-england, northern-scotland, south-eastern-england, south-western-england, southern-england, southern-scotland, southern-wales, west-midlands, yorkshire.
How the widgets work
- Plain iframe first. The iframe works on its own. Set a fixed height (the suggested heights fit cards from about 320 to 480 px wide) or add
/embed.js, a 0.6 KB script that resizes any iframe markeddata-utilitypricesto fit its card. - Lightweight. Each widget is a single server-rendered HTML page of about 5 KB with inline styles and no framework, fonts, cookies or third-party requests.
- Fresh data. The grid card shows the latest published half hour and reloads itself every five minutes while visible; it says “Delayed” if the source is late and shows no figures if the feed is down. The price cap card updates when we publish a new cap period.
- Framing. Only
/embed/pages may be shown inside other sites (Content-Security-Policy: frame-ancestors *). They are excluded from search results; the links inside them are normal links. - Accessibility. Give the iframe a descriptive
title(the generated code does). Widgets use real text, not images, and the mix bar has a text alternative.
Need the numbers rather than a card? Use the JSON API or CSV downloads.