The full embed reference: iframe markup, responsive sizing, auto-resize, CSP and sandbox settings, and every widget URL with its suggested height.
Every widget in this library is delivered as one iframe tag, which means the integration is the same whatever your stack is: WordPress, a static site generator, a React app, a Rails template or a hand-written HTML file. This page is the reference for the markup itself, the responsive and accessibility details worth getting right, and the four things that actually break an embed.
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.
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.
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.
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.
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.
If your site sets a Content Security Policy, add the domain to your frame-src 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.
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 |
| 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.
breakdown=0 to shorten the widget.width="100%".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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Widgets show the maths. A demo account shows how the same maths behaves against live spreads and real market movement, without risking funds.
Open a free demo account79% of retail CFD accounts lose money. Demo accounts do not guarantee future profits.