Fuel Price Widget

Embed real-time UK fuel prices on your website. Free, lightweight, and fully customisable.

Build Your Widget Documentation
Real-Time Data

Prices update every 30 minutes directly from UK retailers via the government scheme.

Fully Customisable

Choose location, fuel type, theme, and display options to match your site.

Lightweight

Shadow DOM isolation, lazy loading, and minimal footprint for fast page loads.

Widget Builder

Configure your widget and copy the embed code.

Configuration

Choose whether to show results or let users search first

Use iframe if your platform doesn't allow custom scripts (e.g., Wix, Squarespace) 


                

            


            

                
Live Preview

                

            

        

    


    
    

        

            
Quick Start

            
Add the widget to your website in two simple steps:


            

                Step 1: Add the script tag to your page (before closing </body>)
            


            
<!-- Fuel Price Widget -->
<script src="https://checkfuelprices.co.uk/js/widget.js"></script>


            

                Step 2: Add a container div where you want the widget to appear
            


            
<div data-cfp-widget data-postcode="SW1A 2DR"></div>


            
iframe Embed (Alternative)

            
If your platform doesn't allow custom scripts (e.g., Wix, Squarespace), use the iframe embed:


            
<iframe
    src="https://checkfuelprices.co.uk/widget/embed?postcode=SW1A%202DR"
    width="100%"
    height="600"
    frameborder="0"
    style="border: none; max-width: 500px;"
    title="Fuel Prices Widget"
    loading="lazy"
></iframe>

        

    


    
    

        

            
Customisation Options

            
Configure the widget using data attributes:


            

                

                    
                        

                            Attribute
                            Description
                            Values
                            Default
                        

                    
                    
                        

                            data-postcode
                            Initial location to search
                            Any UK postcode or city/town name (e.g. SW1A 2DR, Manchester)
                            Optional
                        

                        

                            data-coords
                            GPS coordinates (combined)
                            "lat, lng" e.g. "51.5074, -0.1278"
                            Optional
                        

                        

                            data-lat / data-lng
                            GPS coordinates (separate)
                            Decimal numbers
                            Optional
                        

                        

                            data-fuel
                            Default fuel type
                            E10, E5, B7, SDV
                            E10
                        

                        

                            data-sort
                            Sort order
                            distance, price_low, price_high
                            distance
                        

                        

                            data-radius
                            Search radius in miles
                            1-50
                            5
                        

                        

                            data-limit
                            Number of stations to show
                            1-20
                            10
                        

                        

                            data-theme
                            Color theme
                            light, dark, auto
                            auto
                        

                        

                            data-brand
                            Filter by brand name
                            Shell, BP, Tesco, etc.
                            Optional
                        

                        

                            data-show-search
                            Show search input
                            true, false
                            true
                        

                        

                            data-show-filters
                            Show filter dropdowns
                            true, false
                            true
                        

                        

                            data-search-first
                            Show search prompt instead of loading results immediately
                            true, false
                            false
                        

                    
                

            

        

    


    
    

        

            
JavaScript API

            
For more control, initialize the widget programmatically:


            
// Create widget instance
const widget = new FuelPriceWidget('#my-container', {
    postcode: 'SW1A 2DR',
    fuel: 'E10',
    theme: 'dark',
    limit: 10
});

// Update location
widget.setLocation(51.5074, -0.1278);

// Change fuel type
widget.setFuel('B7');

// Refresh data
widget.refresh();


            
Example Configurations


            
Minimal widget (no search, no filters):

            
<div
    data-cfp-widget
    data-postcode="M1 1AE"
    data-show-search="false"
    data-show-filters="false"
    data-limit="5"
></div>


            
Diesel prices only, sorted by cheapest:

            
<div
    data-cfp-widget
    data-postcode="B1 1AA"
    data-fuel="B7"
    data-sort="price_low"
    data-radius="10"
></div>


            
Using GPS coordinates:

            
<div
    data-cfp-widget
    data-coords="51.5074, -0.1278"
    data-fuel="B7"
    data-radius="10"
></div>


            
Search-first mode (user enters location):

            
<div
    data-cfp-widget
    data-search-first="true"
    data-fuel="E10"
    data-limit="10"
></div>

        

    


    
    

        

            
Need help integrating?

            
Get in touch if you need assistance with the widget or have feature requests.

            
                Contact Us