Embed Fuel Prices Widget

Why Use Our Widget?

Live Prices

Data updated hourly from 10,000+ stations across Australia

Easy Integration

Just 2 lines of code to add to any website

All States

Coverage across NSW, VIC, QLD, WA, SA, TAS, NT, ACT

No Registration

Start using immediately with no API keys required

Live Demo

This is what the widget looks like when embedded on your site:

Quick Start

Copy and paste this code into your HTML where you want the widget to appear:

<!-- Petrolmate Fuel Price Widget -->
<div id="petrolmate-widget" data-state="VIC"></div>
<script src="https://petrolmate.com.au/js/petrolmate-widget.js"></script>

Configuration Options

Customise the widget using data attributes:

Attribute	Values	Description
`data-state`	NSW, VIC, QLD, WA, SA, TAS, NT, ACT	Australian state (default: VIC)
`data-fuel`	ULP, E10, DIESEL, PULP95, PULP98, LPG, all	Fuel type filter (default: all)
`data-theme`	light, dark, auto	Widget theme (default: auto - matches system)

Examples

NSW Unleaded only:

Queensland all fuel types:

Western Australia Diesel:

Multiple Widgets

Add multiple widgets on the same page using the class instead of ID:

<!-- Multiple widgets with different states -->
<div class="petrolmate-widget" data-state="NSW"></div>
<div class="petrolmate-widget" data-state="VIC"></div>
<div class="petrolmate-widget" data-state="QLD"></div>
<script src="https://petrolmate.com.au/js/petrolmate-widget.js"></script>

API Access

Need direct API access for advanced integrations?

Get State Prices

// GET request - no authentication required
https://petrolmate.com.au/api/widget/prices?state=VIC&fuel=all

// Response
{
  "success": true,
  "state": "VIC",
  "prices": [
    {"fuel_type": "ULP", "avg_price": "175.5", "min_price": "159.9", "max_price": "189.9"},
    {"fuel_type": "E10", "avg_price": "171.2", ...}
  ],
  "updated": "2025-01-15T10:30:00"
}

CORS enabled - the API can be called from any domain.

Support

Ensure the script URL is correct: https://petrolmate.com.au/js/petrolmate-widget.js
The div needs either id="petrolmate-widget" or class="petrolmate-widget"
JavaScript must be enabled in the browser
Contact us via our feedback form for help

Petrolmate.