# Widgets: put a TradingCalc calculator on your site
> Installation guide, options and FAQ for the free embeddable TradingCalc widgets: 67 calculators and checkers for options, forex, risk, prediction markets, on-chain, spot and futures. Two lines of code, your colors, no signup.
Source: https://docs.tradingcalc.io/widgets
Any of the 67 calculators and checkers can sit on your page as a widget, with your colors, free and without an account. This page is the installation guide, the option reference, the troubleshooting list and the FAQ. To pick a widget and set the options with a live preview, use the [configurator](https://tradingcalc.io/widgets).
## Quick start
Four steps, about two minutes.
1. Open the [configurator](https://tradingcalc.io/widgets) and pick a widget from the list. Each calculator page also shows its own embed code under the calculator.
2. Optional: choose the theme, the accent color, the background and compact spacing. The preview shows the widget exactly as your visitors will see it.
3. Click "Copy embed code" and paste it into your page, in a block that accepts custom HTML (a Custom HTML block, an Embed element, a Code block or an HTML card, whatever your editor calls it).
4. Publish and open the live page. Check that the widget loads and that the text link under it is there.
## Script or iframe
Both forms show the same widget and both include the text link. Pick by what your editor allows.
### Script (recommended)
A small `div` plus one script tag. The frame starts at 640 px and then takes the exact height of the widget as the result appears, so there is never a scrollbar inside it. The script is a few kilobytes, loads asynchronously and reads nothing from your page except its own `div`.
```html
```
### Iframe
One plain tag, for editors and sites that do not allow script tags. The height is fixed at the value in the code (640 px). A widget that shows a long result scrolls inside the frame; raise `height` if you prefer.
```html
Black-Scholes Option Calculator by TradingCalc.io
```
The widget is at most 640 px wide and works down to a 320 px screen. Put it in a column of your own width and it centers or aligns as your page does.
## Options
Every option is optional. In the script form it is a `data-` attribute on the `div`; in the iframe form it is a query parameter on the frame address. The configurator writes both for you.
- **Theme** (script: `data-theme="light"`; iframe: `tc_theme=light`): Dark is the default. Light turns the cards white and the text dark; the text contrast is tested on every widget.
- **Accent color** (script: `data-accent="#6d28d9"`; iframe: `tc_accent=6d28d9`): A hex color for links, highlights and buttons (default #e8b4b8 on dark, #962f4c on light). It is ignored, and the default is used, when it is too dark or too light to read on the theme, or when it is red, amber or green: those three are the verdict colors inside the calculators, and the accent also marks the neutral verdict.
- **Background** (script: `data-bg="transparent"` or `data-bg="#f1eee7"`; iframe: `tc_bg=transparent`): The space around the cards: the theme default, `transparent` to show your page, or a hex color. The cards themselves follow the theme.
- **Compact** (script: `data-compact="1"`; iframe: `tc_compact=1`): Less padding around the widget, for a narrow column or a sidebar.
- **Start values** (script: `data-start="spot=77777&strike=88888"`; iframe: `spot=77777&strike=88888`): Opens the widget with your numbers filled in. See the next section.
- **Height** (script: `data-height="700"`; iframe: `height="700"` on the tag): Where the frame starts before the widget reports its own size (script form), or the fixed height (iframe form). The default is 640.
### All options at once
```html
```
## Start values
To open a widget with your own example, fill the calculator on its own page, press "Copy share link", and paste that link into the "Start values" box of the configurator. It takes the numbers out of the link and puts them into the code.
By hand it is the part of the share link after the question mark: `https://tradingcalc.io/black-scholes-calculator?mode=manual&spot=77777&strike=88888` becomes `data-start="mode=manual&spot=77777&strike=88888"`. Tracking parameters and the options above are dropped on purpose.
A few tools always open empty and have no start values: Risk Parity Calculator, Does This Bet Have Edge?, Is This Token a Rug Pull Risk?, Swap Price Impact Calculator, Crypto Wallet Checker, Pump.fun Bonding Curve Calculator, Impermanent Loss Calculator, Crypto Market Cap Calculator. The configurator greys the box out for them.
## The text link
Every snippet ends with one plain text link to the calculator's own page, and starts with a one-line comment that says to keep it. The widget is free; the link is the thanks.
- Keep the link as given, with its address and its words. It sits in your own page, next to the widget, and it takes readers to the full calculator with its guide and FAQ.
- In the script form the link is inside the `div`; the script puts the widget above it and leaves the link where it is. If your editor drops the contents of a `div` when you save, add the link back exactly as in the code.
- Inside the widget there is a second, small link ("Calculator by TradingCalc.io") that opens in a new tab. It is not a replacement for the one in your page.
- The "Calculated by TradingCalc" badge on the configurator page is a separate, optional way to say thanks, for a page that shows our numbers without a widget.
## For your readers
Your visitors do not need an account or any setup. Here is what they get, and a paragraph you can paste above the widget if you want to explain it.
- The result updates as they type. Inputs that cannot be read (a half-typed number, a comma where a dot is expected) show a hint instead of a wrong result.
- "Copy share link" copies a link to the same calculation on tradingcalc.io, with their numbers in it, so they can save it or send it.
- Links inside the widget open in a new tab and never replace your page.
- Nothing they type is stored, and it is not sent to analytics. The link they copy is the only place their numbers go. The three on-chain checkers (wallet, token risk, swap) have to look an address up with their data sources to answer.
- Every calculator has a full guide, a worked example and a FAQ on its own page; the text link under the widget leads there.
### Text you can paste above the widget
> How to use this calculator: type your numbers into the fields and the result appears as you type. Nothing you enter is saved. "Copy share link" gives you a link to the same calculation. The calculator's own page has a full guide and a FAQ.
## Troubleshooting
Most problems come from the page, not from the widget. Each line names the cause and the fix.
- **Nothing appears, only the text link.** Cause: The editor removed the script tag, or it does not run scripts in preview. Fix: Open the published page, not the editor preview. If it is still empty, use the iframe form, or ask the site owner for the permission to add custom HTML (WordPress removes script and iframe tags for roles without the `unfiltered_html` capability).
- **An empty box or "refused to connect".** Cause: Your site sends a Content-Security-Policy that blocks the frame, or the frame address is not an embed address. Fix: Allow `https://tradingcalc.io` in `frame-src` (or `child-src`) and, for the script form, in `script-src`. Only addresses that start with `/embed/` can be framed by other sites; a normal calculator page address is refused on purpose.
- **A scrollbar inside the widget, or the bottom is cut off.** Cause: The iframe form has a fixed height. Fix: Use the script form, which sets the height itself, or raise `height` in the iframe tag.
- **My accent color is not used.** Cause: The color is too dark or too light for the theme, is not a hex value, or is red, amber or green. Fix: Pick another hue (blue, purple, teal and pink work) or switch the theme. The configurator shows why a color was refused.
- **The start values do not fill in.** Cause: The tool has no start values, or a name in the list does not match a field. Fix: Copy the share link from the calculator page and paste it into the configurator instead of typing the names.
- **The widget is dark on my dark page and I want it to blend in.** Cause: The background is the theme default. Fix: Set the background to `transparent` (or to your page color); the cards stay solid so the text stays readable.
- **The page jumps when the widget loads.** Cause: The frame starts at 640 px and then takes the real height. Fix: Set `data-height` to the height you expect, or reserve that space in your layout.
## All 67 widgets
The key is the value of `data-widget` (or the last part of the iframe address). The link on each title goes to the calculator page, which has its guide and FAQ. The suite key `suite` is one widget with the 12 crypto futures calculators behind a dropdown.
### Crypto perpetual futures
- [Crypto Average Price Calculator](https://tradingcalc.io/crypto-average-entry-calculator): `average-entry`
- [Break-Even Calculator for Crypto Futures](https://tradingcalc.io/crypto-breakeven-calculator): `breakeven`
- [Compound Funding Calculator](https://tradingcalc.io/crypto-compound-funding-calculator): `compound-funding`
- [Funding Rate Arbitrage Calculator](https://tradingcalc.io/crypto-funding-rate-arbitrage-calculator): `funding-arb`
- [Hedge Ratio Calculator](https://tradingcalc.io/crypto-hedge-ratio-calculator): `hedge-ratio`
- [Liquidation Price Calculator for Crypto Futures](https://tradingcalc.io/crypto-liquidation-calculator): `liquidation`
- [Max Safe Leverage Calculator](https://tradingcalc.io/crypto-max-safe-leverage-calculator): `max-safe-leverage`
- [Crypto Futures PnL Calculator](https://tradingcalc.io/crypto-pnl-calculator): `pnl`
- [Crypto Position Size Calculator](https://tradingcalc.io/crypto-position-size-calculator): `position-size`
- [Crypto Scenario Calculator](https://tradingcalc.io/crypto-scenario-calculator): `scenario`
- [Target Exit Calculator for Crypto Futures](https://tradingcalc.io/crypto-target-exit-calculator): `target-exit`
- [Crypto Funding Rate & Funding Cost Calculator](https://tradingcalc.io/funding-rate-calculator): `funding-rate`
### Options
- [Black-Scholes Option Calculator](https://tradingcalc.io/black-scholes-calculator): `black-scholes-calculator`
- [Covered Call & Protective Put Calculator](https://tradingcalc.io/covered-call-calculator): `covered-call-calculator`
- [Implied Volatility Calculator](https://tradingcalc.io/implied-volatility-calculator): `implied-volatility-calculator`
- [Options Payoff & Breakeven Calculator](https://tradingcalc.io/options-payoff-calculator): `options-payoff-calculator`
- [Vertical Spread & Iron Condor Calculator](https://tradingcalc.io/options-spread-calculator): `options-spread-calculator`
- [Straddle & Strangle Calculator](https://tradingcalc.io/straddle-strangle-calculator): `straddle-strangle-calculator`
### Forex
- [Forex Average Entry Calculator](https://tradingcalc.io/forex-average-entry-calculator): `forex-average-entry-calculator`
- [Forex Breakeven Calculator](https://tradingcalc.io/forex-breakeven-calculator): `forex-breakeven-calculator`
- [Forex Correlation Calculator](https://tradingcalc.io/forex-correlation-calculator): `forex-correlation-calculator`
- [Forex Currency Converter](https://tradingcalc.io/forex-currency-converter): `forex-currency-converter`
- [Forex Margin Level Calculator](https://tradingcalc.io/forex-margin-level-calculator): `forex-margin-level-calculator`
- [Forex Margin Required Calculator](https://tradingcalc.io/forex-margin-required-calculator): `forex-margin-required-calculator`
- [Forex Pip Value Calculator](https://tradingcalc.io/forex-pip-value-calculator): `forex-pip-value-calculator`
- [Forex PnL Calculator](https://tradingcalc.io/forex-pnl-calculator): `forex-pnl-calculator`
- [Forex Position Size Calculator](https://tradingcalc.io/forex-position-size-calculator): `forex-position-size-calculator`
- [Forex Risk/Reward Calculator](https://tradingcalc.io/forex-risk-reward-calculator): `forex-risk-reward-calculator`
- [Forex Scenario Calculator](https://tradingcalc.io/forex-scenario-calculator): `forex-scenario-calculator`
- [Forex Swap / Rollover Calculator](https://tradingcalc.io/forex-swap-calculator): `forex-swap-calculator`
### Risk and statistics
- [Cointegration Test Calculator](https://tradingcalc.io/cointegration-calculator): `cointegration-calculator`
- [Deflated Sharpe Ratio Calculator](https://tradingcalc.io/deflated-sharpe-ratio-calculator): `deflated-sharpe-ratio-calculator`
- [EVT Tail Risk Calculator](https://tradingcalc.io/evt-tail-risk-calculator): `evt-tail-risk-calculator`
- [GARCH(1,1) Volatility Calculator](https://tradingcalc.io/garch-volatility-calculator): `garch-volatility-calculator`
- [Hurst Exponent Calculator](https://tradingcalc.io/hurst-exponent-calculator): `hurst-exponent-calculator`
- [Kelly Growth-Security Frontier Calculator](https://tradingcalc.io/kelly-growth-security-frontier-calculator): `kelly-growth-security-frontier-calculator`
- [Order-Book Impact & Capacity Calculator](https://tradingcalc.io/orderbook-impact-calculator): `orderbook-impact-calculator`
- [Portfolio Tearsheet Calculator](https://tradingcalc.io/portfolio-tearsheet-calculator): `portfolio-tearsheet-calculator`
- [Return Unsmoothing Calculator](https://tradingcalc.io/return-unsmoothing-calculator): `return-unsmoothing-calculator`
- [Risk Parity Calculator](https://tradingcalc.io/risk-parity-calculator): `risk-parity-calculator`
- [Sharpe Ratio Calculator](https://tradingcalc.io/sharpe-ratio-calculator): `sharpe-ratio-calculator`
- [VaR / CVaR Calculator](https://tradingcalc.io/var-cvar-calculator): `var-cvar-calculator`
### Prediction markets
- [Crypto Up/Down Fair Value Calculator](https://tradingcalc.io/crypto-updown-fair-value-calculator): `crypto-updown-fair-value-calculator`
- [Market-Implied Price Odds](https://tradingcalc.io/market-implied-odds): `market-implied-odds`
- [Implied Probability Calculator](https://tradingcalc.io/odds-probability-converter): `odds-probability-converter`
- [Prediction Market Arbitrage Checker](https://tradingcalc.io/prediction-market-arbitrage-checker): `prediction-market-arbitrage-checker`
- [Does This Bet Have Edge?](https://tradingcalc.io/prediction-market-edge): `prediction-market-edge`
- [Prediction Market Spread Checker](https://tradingcalc.io/prediction-market-spread-checker): `prediction-market-spread-checker`
### On-chain
- [Is This Token a Rug Pull Risk?](https://tradingcalc.io/rug-pull-checker): `rug-pull-checker`
- [Swap Price Impact Calculator](https://tradingcalc.io/swap-price-impact-calculator): `swap-price-impact-calculator`
- [Crypto Wallet Checker](https://tradingcalc.io/wallet-flag-check): `wallet-flag-check`
- [Pump.fun Bonding Curve Calculator](https://tradingcalc.io/bonding-curve-calculator): `bonding-curve-calculator`
- [Impermanent Loss Calculator](https://tradingcalc.io/impermanent-loss-calculator): `impermanent-loss-calculator`
- [Crypto Market Cap Calculator](https://tradingcalc.io/market-cap-comparison): `market-cap-comparison`
### Crypto spot
- [Crypto Profit Calculator](https://tradingcalc.io/crypto-profit-calculator): `crypto-profit-calculator`
### Trade workflows
- [Should I Average Down?](https://tradingcalc.io/average-down): `average-down`
- [Has the breakout been accepted by the market?](https://tradingcalc.io/breakout-acceptance): `breakout-acceptance`
- [Will this carry trade make money?](https://tradingcalc.io/carry-trade): `carry-trade`
- [I'm averaging in: what's my entry?](https://tradingcalc.io/dca-entry): `dca-entry`
- [I'm holding overnight: what does it cost?](https://tradingcalc.io/funding-breakeven): `funding-breakeven`
- [Where did price open relative to value?](https://tradingcalc.io/open-analysis): `open-analysis`
- [How exposed is my whole book right now?](https://tradingcalc.io/portfolio-risk): `portfolio-risk`
- [Should I open this trade?](https://tradingcalc.io/pre-trade-check): `pre-trade-check`
- [Is this trade worth taking?](https://tradingcalc.io/risk-reward): `risk-reward`
- [I'm in profit: where do I take it?](https://tradingcalc.io/scale-out): `scale-out`
- [Is today a trend day, balanced, or rotational?](https://tradingcalc.io/session-structure): `session-structure`
- [Is value migrating higher or lower?](https://tradingcalc.io/value-migration): `value-migration`
## FAQ
### Is it free?
Yes. No signup, no API key. The only ask is to keep the text link that comes with the code.
### Can I change the text or the language of the widget?
No. The widgets are in English and their wording is the same as on tradingcalc.io, which is what keeps every result checkable. You can change the colors, the theme and the spacing.
### Does it work on my phone and on other people's phones?
Yes, from a 320 px wide screen up. The widget adapts to the width of the column you put it in, up to 640 px.
### Where do the numbers come from, and are they live?
The formulas are the ones behind the calculator pages and the API; the [methodology](https://docs.tradingcalc.io/methodology) page lists their sources. Widgets that use a live price, a funding rate or an on-chain check fetch it when they load, so there is nothing for you to update.
### Is anything my visitors type stored?
No. The values typed into a calculator are not stored and not sent to analytics; see the [privacy policy](https://tradingcalc.io/privacy). The three on-chain checkers look an address up with their data sources, because that is what they do. The widget page runs the same analytics scripts as tradingcalc.io (PostHog and Google Analytics, no advertising cookies), so mention it in your own privacy policy if your rules require it.
### Can I put several widgets on one page?
Yes. Each snippet is independent, and each comes with its own text link.
### Is there a limit on traffic?
Widgets that call live data or an on-chain check go through our servers, and each visitor's address is limited to a number of requests per minute, so ordinary traffic is fine. If you expect a very busy page, write to us first.
### Will the code stop working?
The loader file `embed.js` keeps working for pages that already include it. A change that would alter what an existing snippet does gets a new file name instead. The widget keys do not change.
### Can other sites frame my calculator page?
Only the widget addresses (`/embed/...`) can be framed by other sites. Every other page of tradingcalc.io refuses to be framed, which protects visitors from a fake overlay on top of a calculator.
### I build tools or bots. Is there something more than a widget?
Yes: the same calculations are available over an HTTP API and an MCP server, see the [API and MCP reference](https://docs.tradingcalc.io/api).
## Still stuck?
Write to us through the [support page](https://tradingcalc.io/support) with the address of your page and a line about what you see. A screenshot of the browser console helps.