Free website widget

Stafford fuel prices, on your website.

Choose a layout, check the preview and copy the code. The widget fits your website’s column without squeezing the text or cutting off its borders.

1. Make it yours

Layout

Colour theme

Show fuel prices for

2. Check the fit

Fits the available space, up to 400px wide. Height adjusts to the content. Prices are in pence per litre.

3. Copy and embed

Automatic height — recommendedIncludes a small script to keep the frame snug as the layout changes.

<iframe src="https://stafford-fuel.co.uk/widget?size=medium&amp;theme=light&amp;v=2" title="Stafford fuel prices in pence per litre" width="400" height="560" style="display:block;width:100%;max-width:400px;height:560px;border:0;margin:0;background:transparent;" loading="lazy" sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox"></iframe>
<script>
(function () {
  var frame = document.currentScript.previousElementSibling;
  window.addEventListener('message', function (event) {
    var data = event.data;
    if (event.source !== frame.contentWindow || !data || data.type !== 'stafford-fuel:resize') return;
    if (typeof data.height === 'number' && Number.isFinite(data.height) && data.height >= 1 && data.height <= 10000) {
      frame.style.height = Math.ceil(data.height) + 'px';
    }
  });
  frame.addEventListener('load', function () {
    frame.contentWindow.postMessage({ type: 'stafford-fuel:measure' }, '*');
  });
  frame.contentWindow.postMessage({ type: 'stafford-fuel:measure' }, '*');
})();
</script>

Paste into a Custom HTML block, not a text or visual editor.

Adding it to your site

WordPress

Add a Custom HTML block to a page, post or widget area, paste the code, then save. If your account strips scripts, untick automatic height and use the HTML-only code.

Website builders

Use an HTML / Embed element. Give the builder’s outer embed box enough height too: this widget cannot resize a container controlled by your builder.

Any HTML website

Paste the complete snippet where you want it to appear. Leave the width at 100% so it fits smaller screens. No API key or account is needed.

The widget reads the website’s latest available prices when loaded. Individual station updates may be older; prices can change before you arrive. Already using an old widget? Replace its embed code to enable automatic height.