There is no script tag, no stylesheet to include, no package to install and no JavaScript API. That is a deliberate constraint rather than a missing feature. A script embed can read the page it sits in; an iframe cannot, which is what lets these widgets promise that nothing about your readers is collected.
The basic embed
Four attributes matter. width="100%" makes the widget responsive. height
reserves vertical space so the page does not shift when the frame loads. title is what a
screen reader announces, and omitting it is an accessibility failure that automated audits will flag.
loading="lazy" defers the request until the reader scrolls near it.
A responsive wrapper
If you want the widget to fill a column with no maximum width, drop the max-width and add
width=full to the URL so the widget itself stops capping at 520 pixels.
Full-width variant
Auto-resizing the frame
An iframe cannot measure its own content across origins, so the widget posts its height to the parent window instead. Add this once per page, anywhere after the iframe, and every TradeAnswers widget on the page will size itself as the reader interacts with it.
Auto-resize snippet
The snippet checks the message origin marker before acting, so other embeds on the page posting their own messages cannot resize a TradeAnswers frame. If you would rather not run any JavaScript at all, the fixed heights in the table below are chosen to fit the widget with its breakdown open.
Content Security Policy and sandboxing
If your site sets a Content Security Policy, add the domain to your frame-src directive:
CSP directive
If you sandbox embeds as a matter of policy, the widget needs allow-scripts to calculate
and allow-popups allow-popups-to-escape-sandbox for the credit link. It does not need
allow-same-origin, allow-forms or allow-top-navigation, so leave
those off.
Widget URLs and suggested heights
Every widget follows the same URL pattern, /embed/{slug}.html, with the options from the
table further down appended as a query string. These are the widgets with a dedicated guide page; the
widget builder lists all of them.
| Widget | URL | Height |
|---|---|---|
| Position Size Calculator Widget | /embed/position-size-calculator.html | 870 |
| Pip Calculator Widget | /embed/pip-value-calculator.html | 690 |
| Forex Calculator Widget | /embed/lot-size-calculator.html | 890 |
| Currency Converter Widget | /embed/currency-converter-calculator.html | 630 |
| Economic Calendar Widget | /embed/economic-calendar-widget.html | 680 |
| Forex Rates Widget | /embed/forex-rates-widget.html | 520 |
| Live Forex Quotes Widget | /embed/live-forex-quotes-widget.html | 520 |
| Trading Chart Widget | /embed/trading-chart-widget.html | 620 |
| Market Data Widget | /embed/market-data-widget.html | 620 |
| Margin Calculator Widget | /embed/margin-calculator.html | 650 |
| Profit Loss Calculator Widget | /embed/profit-loss-calculator.html | 630 |
| Lot Size Calculator Widget | /embed/lot-size-calculator.html | 890 |
| Risk Reward Ratio Calculator Widget | /embed/risk-reward-ratio-calculator.html | 570 |
| Stop Loss Calculator Widget | /embed/stop-loss-calculator.html | 690 |
| Leverage Calculator Widget | /embed/leverage-calculator.html | 570 |
Customisation options
| Parameter | Values | What it does |
|---|---|---|
theme | auto, light, dark | Default follows the reader's own system setting, so the widget looks right on a dark site and a light one without you choosing. |
accent | Six hex digits, e.g. accent=1A56DB | Recolours the header bar and the primary button to match your brand. |
header | 1 or 0 | Set to 0 to hide the title bar when your page already has a heading above the widget. |
breakdown | 1 or 0 | Set to 0 to hide the calculation breakdown for a more compact block. |
corners | 1 or 0 | Set to 0 for square corners if your design has no rounding anywhere else. |
width | full | Removes the 520px maximum so the widget stretches to its container. |
Parameters are added to the iframe URL as a normal query string, for example
/embed/position-size-calculator.html?theme=dark&accent=1A56DB&header=0. The
widget builder lets you set all of them visually and hands you the finished code.
When an embed does not work
- Blank space where the widget should be. Your CMS stripped the iframe on save, or a Content Security Policy is blocking the frame. Check the browser console: a CSP violation names the directive that needs changing.
- Widget appears cut off. The height is too small. Use the value in the table, or add
breakdown=0to shorten the widget. - Horizontal scrollbar on mobile. A fixed pixel width was used instead of
width="100%". - Layout jumps when the page loads. No height attribute was set, so the browser reserved no space. Always set one, even if you also use the auto-resize snippet.
If your platform will not keep an iframe, the WordPress guide covers the editor and permission settings that cause it. For what each widget actually does, start at the widget library, the forex widgets or the financial widgets.
If your platform will not keep an iframe, the WordPress guide covers the editor and permission settings that cause it. For what each widget does, start at the widget library, the forex widgets or the financial widgets.
Licence and attribution
Every widget here is free to use on any website, including sites that carry advertising, sell products or sit behind a paywall. There is no fee, no usage cap, no sign-up and no contract.
- What you may do. Embed any widget on any number of pages and sites, change the theme and accent colour, hide the title bar, and set the width to suit your layout.
- What is asked in return. Leave the small credit line at the bottom of the widget in place. It is one line of small text and it is how readers find the full version.
- What is not allowed. Removing the attribution, editing the calculation logic and republishing the result as your own, or presenting the outputs as financial advice.
If the credit line genuinely does not work with your layout, use the contact page rather than stripping it out. There is usually an arrangement that suits both sides.
Frequently asked questions
What is the minimum HTML needed to embed a trading widget?
A single iframe tag with a src, a width, a height and a title. Nothing else is required: no script tag, no stylesheet, no wrapper div and no JavaScript. The title attribute is not optional in practice, because without it a screen reader announces the frame as unlabelled.
How do I make the widget responsive?
Set width="100%" on the iframe, which the supplied code already does, and it fills its container. A fixed pixel width is the usual cause of horizontal scrolling on a phone.
Height is the harder part, because an iframe cannot size itself to its content across origins. Use the suggested height, or add the auto-resize snippet shown above, which listens for the height message the widget posts.
Will the widget work with a strict Content Security Policy?
Only if your policy allows it. Add https://www.tradeanswers.co.za to your frame-src directive. The widget itself loads no external resources, so no other directive needs changing. If you are seeing a blank frame and a console error mentioning CSP, this is the cause.
Can I sandbox the iframe?
Yes, and it is reasonable practice on a site where you sandbox every embed. The widget needs allow-scripts to calculate anything, and allow-popups allow-popups-to-escape-sandbox if you want the credit link to open. It does not need allow-same-origin, allow-forms or allow-top-navigation.
Why is there a scrollbar inside the widget?
The iframe height is smaller than the content. Increase the height to the value in the table above, which allows for the calculation breakdown being visible, or add breakdown=0 to the URL to hide the breakdown and reduce the space needed.
Does the widget work if my site is HTTP rather than HTTPS?
The widget is served over HTTPS, which loads fine inside an HTTP page, though browsers will flag the page as not secure for other reasons. If your site is still on HTTP in 2026, that is worth fixing regardless of this widget.
Can I load the widget only when the reader scrolls to it?
It already does. The loading="lazy" attribute on the supplied code defers the request until the frame is close to the viewport. You do not need an intersection observer or a lazy-load library on top of that.
Is there a JavaScript API to read values out of the widget?
No. The widget posts a height message to the parent window for auto-resizing, and nothing else crosses the frame boundary. Reader inputs stay inside the widget by design, which is what lets the tool promise that nothing is collected.