Create customizable, real-time oil and fuel price widgets for your website, blog, or application. Display live commodity prices without backend development. Perfect for commodities trading platforms, gas station websites, and energy industry portals.

Try the API: Use the code examples below to test this functionality with your API key.

+------------------------------------------+
|  PRICE WIDGET GENERATOR                  |
+------------------------------------------+
|  Select Commodities:                     |
|  [x] WTI Crude  [x] Brent  [ ] Natural Gas|
|  [ ] Gasoline   [ ] Diesel [ ] Heating Oil|
|                                          |
|  Theme:         [Light v]                |
|  Display:       [Standard v]             |
|  Accent Color:  [#0066CC]                |
|  Show Change:   [x] Yes                  |
|  Refresh:       [5 min v]                |
+------------------------------------------+
|  LIVE PREVIEW                            |
|  +------------------------------------+  |
|  | WTI Crude    $75.42  +1.23 (+1.6%) |  |
|  | Brent Crude  $79.18  +0.98 (+1.2%) |  |
|  | Updated: 2 min ago                 |  |
|  +------------------------------------+  |
+------------------------------------------+
|  [GENERATE EMBED CODE]                   |
+------------------------------------------+

The price widget fetches live commodity prices from OilPriceAPI and displays them in a customizable format. Prices update automatically at your specified interval, providing visitors with current market data without page refresh.

Real-time prices: Data updates automatically from OilPriceAPI
Multiple commodities: Display any combination of oil, gas, and fuel prices
Responsive design: Adapts to container width and mobile screens
Customizable appearance: Match your site's design with themes and colors
Price change indicators: Show daily change in dollars and percentage
Timestamp display: Show when prices were last updated

API Integration

The widget retrieves data through the OilPriceAPI prices endpoint. The same reliable infrastructure powers financial applications, news sites, and energy industry platforms.

API Endpoint Used

GET https://api.oilpriceapi.com/v1/prices/latest?by_code=WTI_USD,BRENT_USD,GASOLINE_US

Sample Response

{
  "status": "success",
  "data": {
    "prices": [
      {
        "code": "WTI_USD",
        "name": "WTI Crude Oil",
        "price": 75.42,
        "change": 1.23,
        "change_percent": 1.66,
        "currency": "USD",
        "unit": "barrel",
        "updated_at": "2024-01-15T14:30:00Z"
      },
      {
        "code": "BRENT_USD",
        "name": "Brent Crude Oil",
        "price": 79.18,
        "change": 0.98,
        "change_percent": 1.25,
        "currency": "USD",
        "unit": "barrel",
        "updated_at": "2024-01-15T14:30:00Z"
      }
    ]
  }
}

<div id="oil-price-widget"></div>
<script>
async function loadPriceWidget() {
  const widget = document.getElementById('oil-price-widget');

  const response = await fetch('/api/prices'); // Your backend proxy
  const { data } = await response.json();

  widget.innerHTML = data.prices.map(price => `
    <div class="price-item">
      <span class="commodity">${price.name}</span>
      <span class="price">$${price.price.toFixed(2)}</span>
      <span class="change ${price.change >= 0 ? 'up' : 'down'}">
        ${price.change >= 0 ? '+' : ''}${price.change.toFixed(2)}
        (${price.change_percent.toFixed(2)}%)
      </span>
    </div>
  `).join('');
}

loadPriceWidget();
setInterval(loadPriceWidget, 300000); // Refresh every 5 minutes
</script>

React Component

import { useState, useEffect } from 'react';

function OilPriceWidget({ commodities = ['WTI_USD', 'BRENT_USD'] }) {
  const [prices, setPrices] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchPrices() {
      const response = await fetch(
        `/api/prices?commodities=${commodities.join(',')}`
      );
      const { data } = await response.json();
      setPrices(data.prices);
      setLoading(false);
    }

    fetchPrices();
    const interval = setInterval(fetchPrices, 300000);
    return () => clearInterval(interval);
  }, [commodities]);

  if (loading) return <div className="widget-loading">Loading...</div>;

  return (
    <div className="oil-price-widget">
      {prices.map(price => (
        <div key={price.code} className="price-row">
          <span className="name">{price.name}</span>
          <span className="price">${price.price.toFixed(2)}</span>
          <span className={`change ${price.change >= 0 ? 'positive' : 'negative'}`}>
            {price.change >= 0 ? '+' : ''}{price.change.toFixed(2)}
          </span>
        </div>
      ))}
      <div className="updated">
        Updated: {new Date(prices[0]?.updated_at).toLocaleTimeString()}
      </div>
    </div>
  );
}

Backend Proxy Example (Node.js)

// Important: Never expose your API key client-side
// Create a backend proxy endpoint

app.get('/api/prices', async (req, res) => {
  const { commodities = 'WTI_USD,BRENT_USD' } = req.query;

  const response = await fetch(
    `https://api.oilpriceapi.com/v1/prices/latest?by_code=${commodities}`,
    { headers: { 'Authorization': `Token ${process.env.OILPRICE_API_KEY}` } }
  );

  const data = await response.json();
  res.json(data);
});

Use Cases for Price Widgets

Financial News Sites

Display current oil prices alongside market news. Provide readers with live pricing context for energy sector reporting.

Energy Industry Blogs

Add credibility to industry analysis with real-time price displays. Show readers you work with current market data.

Trading Platforms

Integrate commodity prices into trading dashboards. Provide users with quick reference pricing alongside portfolio data.

Fleet and Logistics Dashboards

Display fuel prices on internal operations dashboards. Help dispatchers and managers track cost-impacting price movements.

Option	Values	Description
Theme	light, dark, auto	Color scheme for widget background
Display	compact, standard, detailed	Amount of information shown
Commodities	Any valid code	Which prices to display
Refresh	1-60 minutes	How often to fetch new prices
Show Change	true/false	Display price change indicators

Yes. Always use a backend proxy to protect your API key as shown in the code examples. Never embed API keys directly in client-side code.

Start Displaying Live Prices

Create professional price widgets for your website with real-time data from OilPriceAPI.

Get API Access - Free tier includes 1,000 requests per month.

Review our authentication guide for secure API key handling.

Fleet Cost Calculator - Calculate fleet fuel costs
Fuel Savings Calculator - Interactive savings tools
Carbon Footprint Calculator - Emissions tracking widgets
Commodities Trading API - Trading platform integration
Gas Station Pricing API - Retail fuel price displays
Shipping Bunker API - Maritime price widgets
Python Developer Guide - Build custom widgets in Python
PHP Developer Guide - WordPress and PHP integration
Power BI Integration - Dashboard visualizations
Tableau Integration - Interactive price charts
Authentication Guide - Secure API key handling
API Reference - Complete endpoint documentation

Embeddable Price Widget Generator

Widget Generator Tool

How the Widget Works

Widget Features

API Integration

API Endpoint Used

Sample Response

Widget Implementation Examples

Basic JavaScript Widget

React Component

Backend Proxy Example (Node.js)

Use Cases for Price Widgets

Financial News Sites

Energy Industry Blogs

Trading Platforms

Fleet and Logistics Dashboards

Widget Customization Options

Security Best Practices

Frequently Asked Questions

How accurate is the Price Widget Generator?

What price data powers this tool?

Can I embed this widget in my own application?

How often are prices updated?

Can I customize the widget appearance?

Is it safe to embed the widget on my website?

Start Displaying Live Prices