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.

Basic iframe

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

Light theme, custom size

<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

theme

dark (default) or light

width

Widget width in px (default: 320, min: 240, max: 600)

height

Widget height in px (default: 420, min: 320, max: 800)

link

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

Script tag embed

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

Multiple widgets on one page

<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

Background#18181b

Borderwhite/6

Accent#10b981

Light Theme

Background#ffffff

Borderzinc-200

Accent#059669

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.

TradeclawWidget.tsx

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} />

PreviousPlugins NextContributing

Edit this page on GitHub

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

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.

Basic iframe

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

Light theme, custom size

<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

theme

dark (default) or light

width

Widget width in px (default: 320, min: 240, max: 600)

height

Widget height in px (default: 420, min: 320, max: 800)

link

Set to 0 to disable click-through links

Script Tag Embed

Script tag embed

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

Multiple widgets on one page

<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

Background#18181b

Borderwhite/6

Accent#10b981

Light Theme

Background#ffffff

Borderzinc-200

Accent#059669

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.

TradeclawWidget.tsx

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} />

PreviousPlugins NextContributing

Edit this page on GitHub