Adding a fuel-price widget to a news website

Choose between a free widget and a saved publication chart

The free Fuel Finder editorial widget shows national average fuel prices. It is intended for credited editorial use and provides a public, ready-made reference. You do not need a Publisher Studio subscription to use that widget.

Publisher Studio is for configuring a chart with your publication’s name, colour, font and logo. Its saved embed follows your chosen fuel, supported area and chart layout. Reported-data access requires a verified account and an active trial or subscription.

The planned Studio price is £99/month for one publication. Paid subscriptions are not open yet, but the sample editor is available.

Add the widget using your publishing system’s HTML block

1. Get the correct code. For the free national widget, use the code in the press room. For Studio, save your chart and verify your email. Choose Start free trial in Account or use an active subscription, then open Embed and copy the code for that publication.
2. Paste it into an HTML or embed block. Use a draft article first. Some publishing systems restrict iframes or require an approved source domain; ask your site administrator to confirm the supported approach.
3. Check the published preview. Test at your article’s normal column width and on a phone. Look for clipped labels, extra scrollbars and a chart that is too small to read.
4. Keep the source visible. Retain the supplied attribution and reporting date. Give the iframe a descriptive title so its purpose is clear to readers using assistive technology.

An updating embed suits a page readers revisit for current context. A PNG or SVG is often more appropriate when an article needs to retain the figures discussed on its publication date.

Write the geographical scope and source in the article

A chart should support the reporting around it. Add a short sentence explaining the fuel type, area and date, and link to the relevant source notes. Keep this explanation in the article’s own text so readers can understand it even if the embedded chart does not load.

Studio’s local areas follow postcode prefixes. For example, a BS chart is a Bristol postcode-area chart, not a measurement restricted to Bristol’s city boundary. The editor currently supports UK, BS, YO, LS, M, B and SW, with petrol or diesel and a 7-day or 30-day period.

Review the reporting date, station count and methodology in the editor. An average is not a cheapest-price quote, and the latest source timestamp is not evidence that every station submitted a new price at that time. The local fuel-price chart guide covers these distinctions.

Understand what changes after publication

A Studio embed uses the publication’s saved settings and the latest published dataset. Editing a draft in the studio does not publish those changes. Review the draft, then save when you want the embedded chart to use the revised settings.

Replacing an embed link invalidates the previous link. Update every page that used the old code. Reported-data embeds also depend on the publication retaining access; if the trial or subscription ends, the chart will no longer be available through that embed.

Keep a dated export alongside the article’s working files when it matters which figures an editor originally checked. It gives your team a fixed record even when an evergreen page continues to show updated data.

Before publishing

• Choose an updating embed or a fixed export to match the article.
• Confirm the chart uses reported data. Synthetic sample charts are for testing the design only.
• Check the fuel, area, reporting date and station coverage.
• Retain attribution and add meaningful article text around the chart.
• Test the actual published layout on desktop and mobile.

The Fuel Price Pulse methodology explains the wider reporting approach. For a particular Studio chart, use the Source notes view for that selected dataset.