Market data widgets

Three widgets, embedded exactly as a broker embeds them: the iframe snippet below each panel is the generated output, pasted verbatim. They authenticate with the demo tenant’s embed key against the live read API.

Demo embed key mw_live_3174d6450c4440810670dcf0376ddd4bd36bd816874df97c

Forex rates grid

Default theming — nothing but the key in the URL. ECB euro reference rates, republished as the majors and refreshed on the 10-second cache policy.

Embed snippet 
<!-- Forex rates grid - widgets.mbtoolz.com -->
<iframe
  data-mktwidget="fx-grid"
  src="https://widgets.mbtoolz.com/w/fx-grid?key=mw_live_3174d6450c4440810670dcf0376ddd4bd36bd816874df97c"
  title="Forex rates grid"
  width="100%"
  height="380"
  style="border:0;display:block;max-width:100%"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups"
></iframe>
<script>
(function () {
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://widgets.mbtoolz.com') return;
    var d = e.data;
    if (!d || d.type !== 'mktwidget:height' || typeof d.height !== 'number') return;
    var frames = document.querySelectorAll('iframe[data-mktwidget]');
    for (var i = 0; i < frames.length; i++) {
      if (frames[i].contentWindow === e.source) {
        frames[i].style.height = Math.ceil(d.height) + 'px';
        frames[i].height = Math.ceil(d.height);
      }
    }
  });
})();
</script>

Crypto ticker

The same bundle with theme=dark and a custom accent. Theming is read from the URL, so a broker restyles a widget without a redeploy.

Embed snippet 
<!-- Crypto ticker - widgets.mbtoolz.com -->
<iframe
  data-mktwidget="crypto-ticker"
  src="https://widgets.mbtoolz.com/w/crypto-ticker?key=mw_live_3174d6450c4440810670dcf0376ddd4bd36bd816874df97c&amp;theme=dark&amp;accent=%2322d3ee"
  title="Crypto ticker"
  width="100%"
  height="360"
  style="border:0;display:block;max-width:100%"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups"
></iframe>
<script>
(function () {
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://widgets.mbtoolz.com') return;
    var d = e.data;
    if (!d || d.type !== 'mktwidget:height' || typeof d.height !== 'number') return;
    var frames = document.querySelectorAll('iframe[data-mktwidget]');
    for (var i = 0; i < frames.length; i++) {
      if (frames[i].contentWindow === e.source) {
        frames[i].style.height = Math.ceil(d.height) + 'px';
        frames[i].height = Math.ceil(d.height);
      }
    }
  });
})();
</script>

Economic calendar

Compact density, a violet accent and an explicit locale, which drives date, time and number formatting.

Embed snippet 
<!-- Economic calendar - widgets.mbtoolz.com -->
<iframe
  data-mktwidget="calendar"
  src="https://widgets.mbtoolz.com/w/calendar?key=mw_live_3174d6450c4440810670dcf0376ddd4bd36bd816874df97c&amp;accent=%237c3aed&amp;density=compact"
  title="Economic calendar"
  width="100%"
  height="460"
  style="border:0;display:block;max-width:100%"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-popups"
></iframe>
<script>
(function () {
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://widgets.mbtoolz.com') return;
    var d = e.data;
    if (!d || d.type !== 'mktwidget:height' || typeof d.height !== 'number') return;
    var frames = document.querySelectorAll('iframe[data-mktwidget]');
    for (var i = 0; i < frames.length; i++) {
      if (frames[i].contentWindow === e.source) {
        frames[i].style.height = Math.ceil(d.height) + 'px';
        frames[i].height = Math.ceil(d.height);
      }
    }
  });
})();
</script>