Integrations
Embedding
Embed live signal widgets on any website with a single line of HTML. Widgets refresh every 60 seconds, support dark and light themes, and require no API key for public pairs.
Widget Overview
320 × 420 px
Default size
Every 60s
Refresh rate
dark · light
Themes
None (public)
Auth required
Each widget displays the current signal direction, confidence score, entry price, TP1/TP2/TP3, and stop loss for a single trading pair. Click-through links to the full TradeClaw dashboard can be toggled via the data-link attribute.
Supported Pairs
XAUUSD
XAGUSD
USOIL
BTCUSD
ETHUSD
EURUSD
GBPUSD
USDJPY
AUDUSD
USDCAD
USDCHF
GBPJPY
iframe Embed
The simplest integration. Drop an <iframe> pointing to /embed/[pair] anywhere in your HTML.
<!-- Dark theme (default), 320×420 -->
<iframe
src="https://your-instance.com/embed/XAUUSD"
width="320"
height="420"
style="border: none; border-radius: 12px;"
title="XAUUSD Signal Widget"
></iframe><iframe
src="https://your-instance.com/embed/BTCUSD?theme=light&width=360&height=480"
width="360"
height="480"
style="border: none; border-radius: 12px;"
title="BTCUSD Signal Widget"
></iframe>URL Parameters
themedark (default) or light
widthWidget width in px (default: 320, min: 240, max: 600)
heightWidget height in px (default: 420, min: 320, max: 800)
linkSet to 0 to disable click-through links
Script Tag Embed
The script tag approach renders the widget inline without creating an iframe. It injects a shadow DOM so TradeClaw styles do not leak into your page. Configure via data-* attributes on the container element.
<!-- Place the container div where you want the widget -->
<div
id="tradeclaw-widget"
data-pair="XAUUSD"
data-theme="dark"
data-width="320"
data-height="420"
></div>
<!-- Add the loader script once, anywhere in your page -->
<script
src="https://your-instance.com/api/embed"
async
defer
></script><div class="widget-grid">
<div data-tradeclaw data-pair="XAUUSD" data-theme="dark"></div>
<div data-tradeclaw data-pair="BTCUSD" data-theme="dark"></div>
<div data-tradeclaw data-pair="EURUSD" data-theme="dark"></div>
</div>
<script src="https://your-instance.com/api/embed" async defer></script>Themes
Dark Theme
Light Theme
React Component Wrapper
For React applications, wrap the iframe in a typed component so you get IntelliSense on the props and a consistent rendering pattern.
interface TradeclawWidgetProps {
pair: string;
theme?: 'dark' | 'light';
width?: number;
height?: number;
baseUrl?: string;
}
export function TradeclawWidget({
pair,
theme = 'dark',
width = 320,
height = 420,
baseUrl = 'https://your-instance.com',
}: TradeclawWidgetProps) {
const src = `${baseUrl}/embed/${pair}?theme=${theme}&width=${width}&height=${height}`;
return (
<iframe
src={src}
width={width}
height={height}
style={{ border: 'none', borderRadius: 12 }}
title={`${pair} Signal Widget`}
loading="lazy"
/>
);
}
// Usage
<TradeclawWidget pair="XAUUSD" theme="dark" width={320} height={420} />