Why Embed Widgets Instead of Building Your Own
Building a real-time price display from scratch means dealing with data sourcing, API costs, caching, rate limits, and keeping prices accurate. Our widgets handle all of that for you:
No API key, no backend, no database. Copy-paste 2 lines of HTML.
Prices sourced from multiple providers and refreshed on a source-dependent cadence.
Lightweight async loading. Won't slow down your site.
No usage limits on widgets. Includes "Powered by" attribution.
Widget 1: Fuel Price Ticker
Show the US national average retail diesel and gasoline price in a compact horizontal ticker. The figures come from the U.S. Energy Information Administration, which publishes them weekly. Ideal for trucking and logistics sites, fleet dashboards, and fuel-surcharge pages.
EIA is a U.S. federal agency, so its data is in the public domain at the source. That status comes from the source, not from us: OilPriceAPI grants no rights in any data, and for this series none are needed from us. Keep the “Powered by OilPriceAPI” attribution link — that one is our ask, not the EIA's.
Embed Code
<div id="oilpriceapi-ticker"></div>
<script src="https://www.oilpriceapi.com/widgets/ticker.js" async></script>Widget 2: Diesel Price Tracker
Show current US diesel prices with regional breakdowns. Built for trucking companies, fleet managers, and logistics platforms.
Embed Code
<div id="oilpriceapi-diesel"></div>
<script src="https://www.oilpriceapi.com/widgets/diesel.js" async></script>Widget 3: Fuel Surcharge Calculator
Let your visitors calculate fuel surcharges based on current diesel prices. Enter a base freight rate and get an instant surcharge amount. Used by trucking, shipping, and freight brokerage websites.
Embed Code
<div id="oilpriceapi-fuel-surcharge"></div>
<script src="https://www.oilpriceapi.com/widgets/fuel-surcharge.js" async></script>Widget 4: Carbon Cost Calculator
Help visitors estimate the carbon cost of fuel consumption. Converts fuel usage into CO2 emissions and calculates carbon offset costs. Built for ESG-focused companies, sustainability consultancies, and environmental organizations.
Embed Code
<div id="oilpriceapi-carbon"></div>
<script src="https://www.oilpriceapi.com/widgets/carbon.js" async></script>Installation Guide
Every widget follows the same 2-step pattern. Here's all you need:
Step 1: Add the container
Place a <div> element where you want the widget to appear:
<div id="oilpriceapi-ticker"></div>Step 2: Load the script
Add the script tag before your closing </body> tag:
<script src="https://www.oilpriceapi.com/widgets/ticker.js" async></script>That's it.
The widget loads asynchronously, fetches current prices, and renders itself. No API key, no configuration file, no build step.
WordPress Integration
For WordPress sites, you have two options:
Option 1: WordPress Plugin (Recommended)
Install the OilPriceAPI Widget plugin and use shortcodes in any page or post:
[oilprice_ticker]
[oilprice_diesel]
[oilprice_fuel_surcharge]
[oilprice_carbon]Option 2: Custom HTML Block
Add a "Custom HTML" block in the WordPress editor and paste the embed code directly. Works in both the Block Editor (Gutenberg) and Classic Editor.
Customization Options
Each widget can be customized through our visual configurator. Available options include:
Theme
Light or dark mode to match your site
Commodities
Choose which prices to display
Region
US, EU, UK, or global pricing
Use our visual configurator to preview your widget and generate the exact embed code you need.
Frequently Asked Questions
Are the oil price widgets really free?
Yes, all 4 widgets are completely free to embed. No API key required, no usage limits on the widgets themselves. They include a small "Powered by OilPriceAPI" attribution link.
How do I add an oil price widget to my website?
Copy 2 lines of HTML into your website: a <div> element where you want the widget to appear, and a <script> tag that loads the widget. No coding knowledge needed. Works on WordPress, Squarespace, Wix, Shopify, and any HTML website.
Can I customize the widget colors and theme?
Yes. Each widget supports light and dark themes, and you can configure which commodities to display, the update frequency, and regional settings through the visual configurator on our website.
Do the widgets slow down my website?
No. Each widget is under 30KB and loads asynchronously, meaning it won't block your page from rendering. The script is served from a global CDN for fast loading worldwide.
Is there a WordPress plugin for the oil price widgets?
Yes, we offer a WordPress plugin that lets you add widgets via shortcodes like [oilprice_ticker] or [fuel_surcharge_calculator]. You can also use the standard HTML embed code in any WordPress page or post.
How often do the widget prices update?
Widgets request the latest available values on a recurring timer. Each value includes a source timestamp, and upstream refresh cadence varies by source and market hours.