TraderNewbie Widgets — Embed Trading Calculators

Overview

TraderNewbie Widgets are embeddable trading calculators that you can add to your website, blog, or application. They provide professional-grade position sizing and risk analysis tools to your users.

Position Sizer

Calculate optimal position sizes based on account balance, risk percentage, and stop loss distance.

Risk Calculator

RiskCalculator

Analyze risk-reward ratios for your trades with entry, stop loss, and take profit prices.

Features

Self-contained styles — no CSS conflicts with your page
Light & dark theme support
Multi-language (English, Chinese, Japanese, Korean, and more)
Responsive design — works on any screen size
Event callbacks for calculation results
White-label / enterprise licensing with API keys
Multiple embedding options: iframe, npm, React, script tag

Installation

npm / pnpm

 npm install @tradernewbie/widget
# or
pnpm add @tradernewbie/widget 

React Component

Import and use directly in your React application:

 import { PositionSizerWidget, RiskCalculatorWidget } from '@tradernewbie/widget';

function App() {
  return <div>
    <PositionSizerWidget locale='en' theme='light' />
    <RiskCalculatorWidget locale='zh' theme='dark' />
  </div>;
} 

iframe Embed

The simplest way — just add an iframe to your page:

 <iframe
  src="https://tradernewbie.com/widgets/position-sizer?locale=en&theme=light"
  width="100%"
  height="500"
  frameborder="0"
  style="border-radius: 12px; border: 1px solid #e2e8f0;"
></iframe> 

Available URL parameters: locale (en, zh, ja, ko, fr, de, es, pt, ru, it), theme (light, dark), apiKey (for licensed usage)

Script Tag

Use the embed script for vanilla JS pages:

 <!-- Add to head -->
<script src="https://cdn.tradernewbie.com/widget/embed.js"></script>

<!-- Add widget container -->
<div id="position-sizer-widget"></div>

<!-- Initialize -->
<script>
  TraderNewbieWidget.render('position-sizer', '#position-sizer-widget', {
    locale: 'en',
    theme: 'light',
    apiKey: 'tnw_your_api_key'
  });
</script> 

Or use auto-initialization with data attributes:

 <!-- Auto-initialize with data attributes -->
<div data-tnw-widget="position-sizer" data-tnw-locale="en" data-tnw-theme="dark"></div>
<div data-tnw-widget="risk-calculator" data-tnw-locale="zh" data-tnw-theme="light"></div>
<script src="https://cdn.tradernewbie.com/widget/embed.js" data-auto></script> 

Props Reference

locale

Locale — Language setting

Default: 'en'

Options: en, zh, ja, ko, fr, de, es, pt, ru, it

theme

'light' | 'dark'

Default: 'light'

apiKey

string — License key for white-label usage

Optional — free tier available with attribution

onCalculate

(result) => void — Callback when calculation completes

Optional

Licensing API

For white-label and enterprise usage, manage API keys through our licensing API:

POST /api/v1/licensing/keys

Generate a new license key (admin only)

GET /api/v1/licensing/keys/:key

Validate a license key

GET /api/v1/licensing/usage

Get usage statistics (authenticated)

Trial

30 days, 1 domain, 100 req/hr

Features: all

Standard

1 year, 3 domains, 1000 req/hr

Features: all

Enterprise

Custom duration, 50 domains, 10000 req/hr

Features: all + custom branding

Get Your API Key

Apply for a Widget API key to enable white-label usage and higher rate limits.

Apply for API Key →