Embeddable Price Widget Generator

Create customizable, real-time oil and fuel price widgets for your website, blog, or application — no backend development required. Perfect for commodities trading platforms, gas station websites, and energy industry portals.

The widget is our software and it is yours to embed. The prices it renders are a separate question: we hold no display or redistribution rights in third-party-sourced data and cannot convey any, and no plan tier changes that. Read Data Sources & Rights before showing prices to the public.

Widget Generator Tool

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

Live Preview

Real prices, refreshed from the API every time these docs are built:

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.

Frequently Asked Questions

How accurate is the Price Widget Generator?

Widgets display the latest available OilPriceAPI value and its source timestamp. Refresh cadence and dataset availability vary by source and plan.

What price data powers this tool?

This tool uses live API data from OilPriceAPI including WTI crude, Brent crude, natural gas, gasoline, diesel, and heating oil prices. All major energy commodities are available.

Can I embed this widget in my own application?

That is really two questions, and they have different answers.

The widget is our software. Embed it — via the generated iframe or a custom build against the endpoints above. That is what the tool is for, and every plan, including the free tier, comes with the API access it needs. Our software is ours to hand you.

The prices it renders are not. The widget is a display surface; it carries no rights in the data it shows, and no plan tier confers any. What may be done with the underlying price data is governed by its source — we hold no display or redistribution rights in third-party-sourced series and cannot convey any. Before you put prices in front of the public, read Data Sources & Rights to see which series come from where.

How often are prices updated?

Configure the widget polling interval for your quota and staleness policy. Polling more often does not make an upstream source update sooner.

Can I customize the widget appearance?

Yes. The generator supports multiple themes (light, dark, auto), accent color customization, display formats (compact, standard, detailed), and options for showing price changes and timestamps.

Is it safe to embed the widget on my website?

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 Building Your Widget

Create professional price widgets for your website with real-time data from OilPriceAPI. What you may do with the data itself is governed by its source, not by your plan — see Data Sources & Rights.

Get API Access - Free tier includes 200 requests per month.

Review our authentication guide for secure API key handling.

Related Resources

• 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