Embeddable Price Widget Generator

Create customizable, real-time oil and fuel price widgets for your website, blog, or application. Display live commodity prices without backend development.

Widget Generator Tool

+------------------------------------------+
|  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]                   |
+------------------------------------------+

How the Widget Works

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.

Widget Features

• 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"
      }
    ]
  }
}

Widget Implementation Examples

Basic JavaScript Widget

<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.

Widget Customization Options

Security Best Practices

Never embed your API key directly in client-side code. Always use a backend proxy to make API requests, then serve the data to your frontend widget. This protects your API key and allows you to implement caching to reduce API usage.

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.