IFrame Widget

A simple integration where we provide you a pre-configured IFrame URL. You use our script to implement it on the website.

General

The IFrame Widget is a wrapper that connects several different widgets. Each widget is represented in a self contained tab.

• Press releases

• Regulatory press releases

• Reports

• Annual reports

• Other news

• Subscribe

We will set up the widget and configure what will be delivered in the tabs depending on the use-case. One thing to note is that the widget is quite restricted in terms of customisation. It is possible for us to configure it to apply your own CSS remotely, but as the content it is in an IFrame is scoped it's not possible to affect the CSS directly from your frontend code.

How it works

The widget transfers information on a message channel to describe its own height whenever something inside it happens. To set it up you enter the id for the element where you want to the widget to injected as well as the src (the Widget URL). Please see the code example on how to implement the listener and set the height:

This code only works for MFN press feed with the WIDGET_URL provided by Modular Finance

<div id="inside-this-element"></div>
<script>
(function() {
    'use strict';

    // Adds an event listener in order to resize the iframe to an optimal
    // size for the page
    window.addEventListener('message', function(e) {
        var iFrameID = document.getElementById('mfn-iframe');
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iFrameID.height = data + 'px';
                break;
        }
    }, false);

    var ifrm = document.createElement('iframe');
    var c = document.getElementById('inside-this-element');
    c.innerHTML = '';
    ifrm.setAttribute('src', 'WIDGET_URL');
    ifrm.setAttribute('width', '100%');
    ifrm.setAttribute('frameBorder', '0');
    ifrm.setAttribute('id', 'mfn-iframe');
    ifrm.setAttribute('scrolling', 'no');
    c.appendChild(ifrm)
})();
</script>

Example

Widget example