Price Widget
Embed a live energy price feed on any website. The widget displays the top 3 cheapest providers, auto-refreshes every 60 seconds, and requires no API key.
Quick Start
Add two lines of HTML to your page. The widget renders inside the target div and begins fetching prices immediately.
<div id="merx-prices"></div>
<script src="https://merx.exchange/widget.js"></script>How It Works
- The script fetches prices from the public GET /api/v1/prices endpoint
- It renders the top 3 cheapest providers sorted by price per energy unit
- Prices auto-refresh every 60 seconds without page reload
- The widget uses a dark theme that matches most dark-mode websites
- No API key or authentication is required
What the Widget Displays
For each provider the widget shows the provider name, the price in SUN per energy unit, the minimum order amount, and the delegation duration. A timestamp at the bottom shows when prices were last updated.
Customization
Pass configuration via data attributes on the container div.
| Attribute | Default | Description |
|---|---|---|
| data-providers | 3 | Number of providers to display (1 to 7) |
| data-refresh | 60 | Refresh interval in seconds (minimum 30) |
| data-duration | 86400 | Filter prices by delegation duration in seconds |
<div
id="merx-prices"
data-providers="5"
data-refresh="30"
data-duration="259200"
></div>
<script src="https://merx.exchange/widget.js"></script>Styling
The widget injects minimal CSS scoped to the container. It uses a dark background with monospace text. To override styles, target the container ID in your stylesheet.
#merx-prices {
max-width: 400px;
border: 1px solid #333;
font-size: 13px;
}The widget makes requests to merx.exchange from the browser. Ensure your Content Security Policy allows connections to https://merx.exchange if you have CSP headers configured.
Full Page Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Energy Prices</title>
</head>
<body style="background: #0a0a0a; padding: 40px;">
<h1 style="color: #ccc; font-family: sans-serif;">
Live TRON Energy Prices
</h1>
<div id="merx-prices" data-providers="5"></div>
<script src="https://merx.exchange/widget.js"></script>
</body>
</html>