HomeTrading Widgets › WordPress

Trading Widgets for WordPress

Add a position size calculator, a live rates board or an economic calendar to WordPress without installing anything. Custom HTML block, paste, publish.

🔌
No pluginNothing to install
🧱
Any builderGutenberg to Divi
🆓
FreeCommercial use allowed

i In short

Adding a trading widget to WordPress does not need a plugin, a shortcode or a developer. Every widget in this library is a single iframe tag, and WordPress has supported that natively since the block editor arrived. The whole job is choosing the right block type, and that is the only thing that goes wrong for most people.

The one problem worth knowing about before you start: WordPress strips iframe tags from content saved by users who do not hold the unfiltered_html capability, and some managed hosts and security plugins filter them regardless of capability. That is why a widget pasted into a paragraph block vanishes on save while the same code in a Custom HTML block works perfectly. It is a permissions behaviour rather than a bug, and the instructions below route around it.

Everything here applies equally to the block editor, the classic editor, Elementor, Divi, Beaver Builder and block-based themes. The widget itself is identical in all of them.

The block editor, step by step

  1. Copy the embed code Open the widget you want from the library and use the copy button on its page, or build a customised version in the widget builder.
  2. Add a Custom HTML block In the post editor click the plus icon, search for "Custom HTML" and insert it. This is the step that matters. A paragraph block will silently discard the iframe.
  3. Paste the code and preview Click Preview inside the block to confirm the widget renders before you publish. If the block shows the raw code instead of the widget, that is normal in the editor and it will render on the front end.
  4. Publish and check the live page View the published post. If the widget is missing there but present in the preview, a security plugin or host-level filter has stripped the iframe, and the section below covers the fix.

The classic editor

Switch from the Visual tab to the Text tab before pasting. The Visual tab runs the same sanitiser that strips iframes, and it will also reformat the code if you switch back and forth. Paste into Text, then publish without returning to Visual.

Elementor, Divi and other page builders

BuilderUse this elementNot this one
ElementorHTML widgetText Editor widget, which sanitises iframes
DiviCode moduleText module
Beaver BuilderHTML moduleText Editor module
WPBakeryRaw HTML elementText Block element
Block themes (FSE)Custom HTML block in a template partParagraph block

When the widget will not appear

There are only four causes, and they are quick to work through in order.

  • Wrong block type. By far the most common. Move the code into a Custom HTML block or your builder's HTML element.
  • Missing capability. On a multisite installation, ordinary administrators do not hold unfiltered_html. A super admin can place the block, or the capability can be granted.
  • A security plugin. Wordfence, Sucuri and similar tools can filter iframes. Allowlist tradeanswers.co.za in the plugin's settings.
  • A lazy-loading plugin rewriting the src. If the widget worked and then stopped after you installed an optimisation plugin, exclude the iframe from its lazy loading. The widget already lazy-loads itself.

Sidebars, footers and reusable blocks

A rates board or an economic calendar in a sidebar tends to get more use than the same widget inside a single post, because a returning reader checks it every visit. Use a Custom HTML widget under Appearance then Widgets, or a Custom HTML block inside a template part on a block theme. Add width=full to the iframe URL so the widget uses the full column width rather than capping at 520 pixels.

If you want the same widget on many posts, save the Custom HTML block as a synced pattern. Changing the pattern then updates every post at once, which is useful if you later decide to switch the accent colour or the theme.

Customisation options

ParameterValuesWhat it does
themeauto, light, darkDefault follows the reader's own system setting, so the widget looks right on a dark site and a light one without you choosing.
accentSix hex digits, e.g. accent=1A56DBRecolours the header bar and the primary button to match your brand.
header1 or 0Set to 0 to hide the title bar when your page already has a heading above the widget.
breakdown1 or 0Set to 0 to hide the calculation breakdown for a more compact block.
corners1 or 0Set to 0 for square corners if your design has no rounding anywhere else.
widthfullRemoves 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.

Which widget to start with

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

Do I need a plugin to add trading widgets to WordPress?

No, and you should not install one for this. The widget is a single iframe tag, and WordPress has handled iframes natively since the block editor arrived. A plugin would add an update dependency and a potential security surface for something a Custom HTML block does in ten seconds.

Why does my widget disappear when I save the post?

Almost always because the editor stripped the iframe tag. WordPress removes iframes from the visual editor for users without the unfiltered_html capability, which on multisite includes administrators.

The fix is to use a Custom HTML block rather than a paragraph, and on multisite to have a super admin place it or to grant the capability. Some managed hosts and security plugins also filter iframes, in which case the host's support team can allowlist the domain.

Will the widget work with Elementor, Divi or Beaver Builder?

Yes, in all three. Elementor has an HTML widget, Divi has a Code module and Beaver Builder has an HTML module. In each case use that module rather than the text or rich-text one, because the rich-text editors sanitise iframe tags out.

Does the widget work with caching and optimisation plugins?

Generally yes. The widget is an iframe rather than a script, so minification and script deferral do not affect it. The one thing to check is lazy-loading plugins that rewrite the src attribute into a data-src: if the widget stops loading after you install one, exclude the iframe from that plugin's lazy loading, since the widget already loads lazily on its own.

Can I put a widget in a sidebar or footer?

Yes. Use a Custom HTML widget in Appearance then Widgets, or a Custom HTML block inside a block-based template part. A rates board or an economic calendar works particularly well in a sidebar, because readers check them repeatedly. Set width=full on the iframe URL so the widget uses the available column width.

Is the widget responsive on mobile themes?

Yes. Give the iframe width="100%", which the supplied code does, and it fills its container. On very narrow screens the widget drops its rounded corners and side borders so it sits flush, which looks correct on a phone.

Does embedding a widget affect my Core Web Vitals?

It should not. The iframe carries loading="lazy", so it does not compete with your main content for bandwidth, and it is not part of your largest contentful paint unless you place it at the very top of the page.

Give the iframe an explicit height so the browser reserves the space, which prevents any cumulative layout shift when it loads.

Can I add a widget to a WooCommerce product page?

Yes, through the product description or a custom block area, using the same Custom HTML approach. Bear in mind that on a commercial product page a calculator can distract from the purchase, so it usually works better in a supporting guide than on the product itself.

🛡️
Test the numbers on real prices

Try a Free Demo Account

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 account
  • FSCA RegulatedTrade with confidence
  • Practice Risk FreeReal market conditions
  • Beginner FriendlyPerfect for learning

79% of retail CFD accounts lose money. Demo accounts do not guarantee future profits.