Tanki Fuel Prices Widget

Embed live UK fuel prices on any site. Pulled from Tanki's mirror of the GOV.UK Fuel Finder feed and refreshed every 5 minutes.

No API keyCORS-openTwo-tab toggleMobile-first

Live demo

Single-column card stack with a fuel-tab toggle at the top: Unleaded (E10) on the left, Diesel (B7) on the right. The cheapest station in the active tab gets a green border and a "CHEAPEST" badge.

Option 1: JavaScript injection (recommended)

Drop a placeholder div anywhere on your page, then load the widget script once. The script auto-scans the page for any element with the data-tanki-widget attribute.

<div data-tanki-widget data-location="Liverpool" data-count="5"></div>
<script async src="https://tanki.app/widget.js"></script>

Inject multiple widgets on the same page; the script handles all of them in one pass. Add new widgets dynamically and call window.Tanki.scanWidgets() to wire them up.

Option 2: iframe (drop-in fallback)

For platforms that don't allow third-party JavaScript (some CMS / publishing tools), embed an iframe instead. Same content, server-rendered.

<iframe src="https://tanki.app/embed?location=Liverpool&count=5"
        width="100%" height="380" frameborder="0" scrolling="no"
        title="Tanki Fuel Prices"></iframe>

Configuration

Attribute / Param	Type	Default	Notes
`data-location` / `location`	string	–	UK postcode (full or outcode) or place name. Required.
`data-count` / `count`	number	5	How many stations per fuel tab. Allowed: 3, 5, 10. Anything else falls back to 5.
`data-radius` / `radius`	number	5	Search radius in miles. Capped at 25.
`data-fuel` / `fuel`	string	unleaded	Which tab opens by default. Accepts `"unleaded"` or `"diesel"`. Anything else falls back to `"unleaded"`. Users can switch tabs after load.

Example: 10 stations within 15 mi of Manchester, default Unleaded

<div data-tanki-widget data-location="Manchester" data-count="10" data-radius="15"></div>
<script async src="https://tanki.app/widget.js"></script>

Example: open on Diesel tab (JS injection)

<div data-tanki-widget
     data-location="Liverpool"
     data-count="5"
     data-fuel="diesel"></div>
<script async src="https://tanki.app/widget.js"></script>

Example: open on Diesel tab (iframe)

<iframe src="https://tanki.app/embed?location=Liverpool&count=5&fuel=diesel"
        width="100%" height="500" frameborder="0" scrolling="no"
        title="Tanki Fuel Prices"></iframe>

Sizing

The widget fills its parent container's width: 100 % wide, with a 280 px floor so it doesn't try to render in absurdly narrow slots. Wrap it in your own sized div if you want to constrain it:

<div style="max-width: 520px;">
  <div data-tanki-widget data-location="Liverpool" data-count="5"></div>
</div>
<script async src="https://tanki.app/widget.js"></script>

The layout adapts to the rendered container width via a ResizeObserver, not the viewport, so a 320 px sidebar widget on a 1920 px desktop and a 320 px widget on a phone both render the compact layout. Below ~480 px the brand square is hidden and padding tightens; the price stays right-aligned and the station name truncates with an ellipsis.

For the iframe form you can set the width attribute or wrap the iframe in a sized container; the same applies.

Behaviour

Widget renders into the host element; styles are scoped to .tanki-widget and won't leak.
Two fuel tabs: Unleaded (E10) and Diesel (B7). Top N cheapest stations within radius shown per tab; the cheapest gets an accent-coloured border + "CHEAPEST" badge. Accent matches the active tab, green for unleaded, blue for diesel.
Switching tabs is instant (both lists are pre-fetched in one request and held in memory).
Auto-refresh every 5 minutes.
Every clickable surface, Tanki logo, station card, footer link, opens https://tanki.app in a new tab.
Backend caches identical (location, count, radius) responses for 60 s to handle popular pages.
Rate limit on /api/widget/prices: 60 req / IP / minute.

Data source

All prices come from Tanki's local mirror of the GOV.UK Fuel Finder feed (the same source used in the Tanki app). The widget never calls GOV.UK directly. If the upstream feed is briefly down, the widget continues serving the most recent successful refresh.

Support

Questions or issues? Email hello@tanki.app.