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

Electricity and gas unit rates, standing charges and a typical dual-fuel bill for one region or the GB average.

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.

Widget options
ParameterValuesDefaultEffectWidget
themelight, dark or autolightColour scheme. auto follows the visitor’s light or dark setting.Both
regionA region slug, or omit for the GB averageGB averageWhich 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 marked data-utilityprices to 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.