# IFrame

The \<iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

To integrate our widgets in an iframe, just specify the URL of the widget in the src attribute of the iframe element.&#x20;

{% hint style="warning" %}
Since iframe is treated as a separate website, CSS cannot style the content inside.
{% endhint %}

### 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\*:

### Datablock's example

Set **HEIGHT** to match the height of the widget.&#x20;

```markup
<iframe 
src="WIDGET_URL" 
width="100%" 
height="HEIGHT" 
style="border:none;">
</iframe>
```

### MFN Example

{% hint style="warning" %}
This code only works for MFN press feed with the WIDGET\_URL provided by Modular Finance
{% endhint %}

```markup
<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

<figure><img src="https://3454830448-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRMlPFaftvytkVA2iUj%2Fuploads%2FV6xZT4QS19SbsJTaRzav%2Fimage.png?alt=media&#x26;token=099e5923-5bc1-4e95-bbd1-a03d23538839" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://modfin.gitbook.io/datablocks/-LYRjiiPF4zveC0T_zB_/integration/iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.